在WebGL的情况下，经常发生的情况是，对于常规的台式机或移动图形而言，效果很好的优化技术并不总是能达到预期的效果。 在本文中，我收集了（或者说翻译成俄语，并在Verge3Day的
演示文稿中以文本形式概述了）这些生产力方法，这些方法对于创建交互式Web应用程序非常有效。
几何/网格
正确的几何形状是任何3D应用程序性能的关键。 为了获得均匀的阴影和快速渲染，应保持多边形网格尽可能均匀。 在工作的开始，您应该确定场景的细节级别，并在建模时坚持下去。
在对折痕建模时，最好使用阴影组，而不是添加更多的多边形。
使用圆柱模型时，请尝试减少靠近中心的多边形数量。
不要给模型增加用户仍然看不到的其他零件。 如下图所示，橙色突出显示的边缘确定了整个模型的详细程度，因此您可以将其用作参考。
法线贴图
优化WebGL性能的常用方法是通过创建法线贴图来减少多边形数量。
但是，由于8位图像的精度有限，法线贴图可能会创建可见的伪像。 下图显示了此问题的可能解决方案，但实现起来相当困难：使用精度更高的图像将导致下载文件的大小增加，而第二种方法非常费力并且不能保证干净的结果。 第三种方法有时适用于粗糙的表面。 在这种情况下，我们建议向您的材料添加噪音以减少可能的伪影。
根据我们的经验，我们得出结论，对光泽对象的最佳解决方案是使用具有平滑顶点组的中等复杂度几何体，而不使用任何法线贴图。
最后，在某些情况下，您可以使用法线贴图而不是非常详细的网格：
- 您的对象包含许多不同的表面。
- 您的表面粗糙，没有明显的缺陷。
- 您的对象太远或太小，以致用户无法注意到任何伪像。
纹理化
这是现代PBR照明模型（不仅是）中使用的一组典型纹理。
如您所见，其中大多数是黑白的。 因此，您可以在一张图像的RGBA通道中组合黑白纹理（每张图像最多4张卡）。
如果只有一个黑白纹理，则可以通过将其打包在alpha通道中将其与任何现有的RGB纹理组合。 最后，如果您没有要合并的图像，则可以将启用了95％压缩和灰度的黑白图像转换为jpeg格式。
减小纹理大小的另一种方法是优化UV扫描。 扫描越紧凑，图像使用纹理空间的效率就越高。 这使您可以在不损失质量的情况下获得更轻量的图像。
顶点颜色
使用顶点颜色而不是图像是加快加载速度并提高WebGL应用程序整体性能的有效方法。 唯一的缺点是您必须在模型中添加一些额外的边缘以分隔相同顶点的颜色。
您也可以使用顶点颜色来确定粗糙度，金属性或镜面或任何其他参数。 在下面，您可以看到仅使用顶点颜色的这种材料的示例。
着色器数量
非常重要的是，舞台上的不同材质/着色器要少一些。 在WebGL中编译着色器会导致很长的负载，这在Windows中尤其明显。 此外，如果着色器较少，则引擎将在渲染期间花费较少的时间在它们之间进行切换，从而提高了性能。
如果您有类似的材质，但材质仅不同，则只能使用一种材质，并在运行时加载/更改其材质。 为此，您可以使用JavaScript或使用某些WebGL框架中可用的可视逻辑编辑器。 这不仅可以优化着色器的数量，还可以减少应用程序启动时加载的图像数量。
这是这种优化的一个例子。 一个轮胎的所有四个变体都由一种材料表示，并通过替换纹理进行配置。
要减少着色器的数量，可以将2种或更多简单的材质组合为一种更复杂的材质。 如果您计划在这些材料之间进行切换（例如，创建配置器应用程序），而不仅是切换，而且还可以平滑优美地为从一种材料到另一种材料的过渡设置动画，则此方法特别有效。
抽签
此外，还有一个重要方面-绘图调用的数量（它们也是绘图调用和绘图调用）。 如果每个对象仅分配一种材质，则这大致对应于单个对象的数量，而具有多种材质的对象需要更多的调用才能可视化它们。
因此，您应该尽可能地合并网格，并使用较少的唯一材料来减少绘制调用的次数并提高性能。
如果您有动画对象，则仍可以连接其各个部分并使用骨骼进行动画处理，这有时在为单个对象设置动画时更加方便。
HDR照明
如果仅使用HDR图像照亮场景而不使用任何光源，则这有助于显着提高性能。 HDR文件的重量不到1 MB。
暗影
仅当动态阴影以最佳方式帮助呈现对象时，才使用动态阴影。 下图显示了
工业机器人演示中的动态阴影。 由于模型本身是在此应用程序中旋转的，而不是在相机中旋转的，因此阴影无法向用户隐藏对象的任何部分，从而完美地突出了机器人的形状。 另一方面，
Scooter演示中的相同阴影将模糊模型的许多细节。
我们由此得出结论：如果对象在应用程序中不移动，则可以烘焙阴影和环境光遮挡贴图，并将它们分配给对象下方的平面。 与使用动态阴影相比，这种解决方案将更具生产力，并且看起来更好。
仅此而已。 如果您还有其他可能有助于提高WebGL性能的技巧，请在注释中编写。