通过最小化着色器/状态更改来优化WebGL性能的指南

Question

我正在尝试了解WebGL的实用性，以渲染由100K三角形组成的大型室内场景。这些三角形分布在许多物体上，场景中有许多材料。另一方面，没有活动部件。而且材料往往很简单，主要基于纹理图。有很多纹理地图共享。例如，场景中的所有椅子都将共享一个共同的地图。还有一些多纹身 - 最多三个纹理覆盖在材料中。

我一直在进行一些实验和阅读，并收集在渲染通行证期间经常切换材料会减慢速度。例如，具有200k三角形的场景将具有显着的性能差异，具体取决于是否有10个或1000个对象，假设每次显示对象时都会设置新材料。

因此，如果性能很重要，则应通过材料对场景进行排序，以最大程度地减少材料切换。我正在寻找的是有关如何思考各种州变化的开销的准则，以及我在哪里获得最大的收获。例如，

• 例如，相对的性能成本是什么 gl.useProgram(), gl.uniformMatrix4fv(), gl.drawElements()
• 我应该尝试写Ubershaders以最大程度地减少着色器切换吗？
• 我应该尝试汇总几何形状以最大程度地减少 gl.drawElements() 呼叫

我意识到里程可能会根据浏览器，操作系统和图形硬件而有所不同。而且我也不是在寻找英勇的措施。只是来自已经有一些经验的人的一些准则，可以快速制作场景。我补充一点，虽然我过去曾经在固定Pipeline OpenGL编程方面有一些经验，但我对WebGL/OpenGL ES 2.0进行操作的新手是新手。

Answer 1

你读了...吗 批次，批次，批次？诚然，它的重点是DirectX，但是推理适用于较小程度的打开/WebGL：每个API调用在CPU上都有明显的开销。该建议是使用所有API的选项共享纹理，使用实例（如果有），编写复杂的着色器以避免进行许多拨打电话。因此，如果您可以在单个通话中将整个房屋作为单个网格绘制，那将比每个房间的1000个呼叫要好。编写Ubershaders已被推荐，但主要是因为它可以允许您删除拨打电话，这不是因为GPU状态切换很昂贵。

这是最近的硬件。对于低端平台（iPad？）或英特尔GMA芯片，瓶颈将在其他地方（例如在软件顶点处理中）。