我最近正在研究一种基于Tiny Glade的实时引擎风格的渲染实践，目的是看看我能否在浏览器中实现一条基于美术风格的管道。

为了开始，我设置了以下限制：

•   只能使用WebGL（不允许计算着色器）

•   单线程JavaScript

•   实时性能目标（约120 FPS）

在过去的几周里，我致力于了解那些取得了软美术风格的手crafted看起来美观，仍然保持良好性能的游戏。

我实现了以下内容：

•   GPU驱动实例化砖块墙

•   Noise jitter + 弹性建造动画

•   植被系统（树、灌木、花）

    +   Billboard卡牌扩张、风飘摇动画和生长动画

•   过程生成草地

    +   terrain对齐 + 交互式推动变形

•   水渲染

    +   层次噪声 + 交互式涟漪 + Fresnel基准反射

•   terrain系统

    +   斜坡感知三维面板材料、脏路径和岩石

•   后处理管道（7个通道）

    +   TAA、照明、焦距、美术风格滤波、ACES色调图映射、3D LUT颜色调节、电影颗粒

实际上很难的不是任何单个.shader。

真正的挑战是在浏览器中让这些系统共同存在：

•   视觉效果（一致的美术风格）

•   同时保持高效（同时实现高performance）

在WebGL中，性能问题会迅速累积：

•   动画

•   材料

•   后处理

•   场景管理

一切都在争夺毫秒。

我学到了以下几点：

+   从参考中复制效果是件事情。

+   设计出自己的系统实现相同感觉是另一回事。

最有趣也是最困难的部分是：

+   不是单个技术本身，而是让这些技术合作为一条实时管道。

这仍然是私有的教育研究，目前正在考虑如果有兴趣，分享特定技术的分解。

想听听有关风格化渲染或WebGL管道的人的思想和体验。