优化场景以获得更好的 WebGL 性能

在这里，我们推荐一些优化技术，这些技术被证明适用于创建基于 Web 的交互式体验。本章主要基于Soft8Soft在Verge3Day Europe 2019会议上的演讲。

几何体/网格

几何体是 3D 应用程序的根源，因为它构成了模型的主要形状。为了获得更平滑的反射和更快的渲染，您应该使网格尽可能规则。一开始，您应该决定场景中要包含的细节级别，并在建模时坚持这一点。

对折痕进行建模时，最好使用平滑组，而不是添加更多多边形。

处理圆柱模型时，请努力减少其中心的多边形数量。

不要使用用户无论如何都看不到的额外详细信息来重载模型。如下图所示，用橙色突出显示的边缘定义了整个模型的细节级别，因此您可以将其用作参考。

#

法线贴图

优化 WebGL 性能的常用方法是通过将法线贴图从高多边形模型烘焙到低多边形模型来减少多边形的数量。

但是，由于 8 位图像的精度有限，法线贴图可能会产生可见的伪影。一些可能的解决方案如下图所示，但它们相当不切实际：使用更高精度的图像会产生更重的文件，而第二种方法相当耗时，不能保证干净的结果。然而，第三种方法在某些情况下可能有效：如果您的表面相当粗糙，我们建议您在材质中添加噪点以减少这些伪影。

根据我们的经验，我们发现光泽对象的最佳解决方案是使用具有平滑组的中间多边形几何体，并且没有任何法线贴图。

最后，在某些情况下，您可能希望使用法线贴图而不是高度详细的网格：

对象由许多不同的表面组成。

您的表面粗糙，不会产生精确的伪影。

您的对象很远或很小，因此用户不会注意到任何伪影。

#

纹理

下面是 PBR 管道（以及一般情况下）中使用的一组典型纹理。

如您所见，它们中的大多数都是黑白的。因此，您可以将黑白纹理组合到单个图像的 RGBA 通道中，每个图像最多 4 个贴图。

如果您只有一个黑白纹理，则可以将其与任何现有的RGB纹理组合，方法是将其打包到Alpha通道中。最后，如果您没有要组合的图像，则可以将黑白图像转换为jpeg格式，并启用95%压缩和灰度模式。

减小纹理大小的另一种方法是优化UV空间。UV 展开越紧凑，图像就越有效地使用纹理空间。因此，您可以拥有较小的图像而不会损失任何质量。

#

顶点颜色

使用顶点颜色而不是图像是加快加载速度和提高 WebGL 应用程序整体性能的有效方法。尽管这是以牺牲额外的边缘为代价的，您必须将其添加到模型中才能分离不同的顶点颜色。

还可以使用顶点颜色来定义粗糙度、金属度或镜面反射曲面或任何其他参数。您可以在下面看到仅使用顶点颜色的此类材质的示例。

#

着色器数量

这对于场景中的材质/着色器差异较少非常有益。WebGL中的着色器处理会导致加载时间延长，这在Windows上尤其明显。此外，如果您的着色器较少，则引擎在渲染时在它们之间切换的时间将减少，从而提高性能。

如果您有仅纹理不同的类似材质，则只能使用一种材质并在运行时加载/交换其纹理。为此，您可以使用替换纹理拼图或使用JavaScript来完成。这不仅将优化着色器的数量，还将减少应用程序启动时加载的图像数量。

下面是此类优化的示例。所有这些轮胎仅由一种材料表示，并通过交换其纹理进行配置。

为了减少着色器的数量，您可以将 2 个或更多简单材质组合成一个更大的材质。如果您计划在这些材料之间切换（例如，您正在制作配置器应用程序），则此技术特别有效，因为它以这种方式工作得更快，并且还允许动画过渡。

#

绘制调用

此外，还有另一个重要方面 - 绘制调用的数量。此数字可以从打印性能信息拼图输出的几何缓冲区部分获得。这大致相当于每个对象只分配一个材质时单独对象的数量，而多材质对象需要更多的绘制调用来渲染它们。

因此，应尽可能努力连接网格，并使用较少的唯一材质，以减少绘制调用次数并提高性能。

如果您有动画对象，您仍然可以将其各个部分连接在一起并使用骨骼进行动画处理，这在对单独的对象进行动画处理时有时更方便。

#

高动态范围照明

如果您仅通过 HDR 图像来照亮场景，而不使用任何光源，则有助于大大提高性能。HDR 文件的重量可能小于 1 Mb。

#

阴影

仅当动态阴影有助于很好地呈现对象时才使用动态阴影。在下图中，工业机器人演示中使用的动态阴影强调了机器人模型的形状。允许旋转模型本身，因此阴影无法对用户隐藏对象的任何部分。另一方面，踏板车演示中的阴影会掩盖许多细节。

如果对象在应用程序中没有移动，则可以烘焙阴影和环境光遮蔽贴图，并将其应用于对象下方的平面。