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

Question

我试图了解WebGL的实用性，用于渲染由100K三角形组成的大型室内场景。这些三角形分布在许多对象上，场景中有许多材质。另一方面，没有活动部件。材料往往相当简单，主要是基于纹理贴图。有很多纹理贴图共享..例如，场景中的所有椅子将共享一个公共地图。还有一些多纹理 - 材料中最多覆盖三个纹理。

我一直在做一些实验和阅读，并且认为在渲染过程中频繁切换材料会减慢速度。例如，具有200K三角形的场景将具有显着的性能差异，具体取决于是否有10个或1000个对象，假设每次显示对象时都会设置新材料。

因此，如果表现很重要，那么场景应该按照材料进行分类，以尽量减少材料切换。我正在寻找的是关于如何考虑各种状态变化的开销的指导方针，以及我在哪里获得最大的收益。例如，

• gl.useProgram()，gl.uniformMatrix4fv()，gl.drawElements()
的相对性能成本是多少？
• 我应该尝试编写ubershaders来最小化着色器切换吗？
• 我应该尝试聚合几何图形以最小化gl.drawElements()调用的数量

我意识到里程可能因浏览器，操作系统和图形硬件而异。我也不是在寻找英勇的措施。只是那些已经有一些快速制作场景经验的人的指导。我要补充一点，虽然我以前在固定管道OpenGL编程方面有过一些经验，但我对WebGL / OpenGL ES 2.0的做事方式还不熟悉。

Answer 1

您是否阅读过batch, batch, batch？不可否认，它专注于directX，但推理在较小程度上也适用于Open / WebGL：每个API调用在CPU上都有很大的开销。建议是使用所有API的选项来共享纹理，使用实例化（如果可用），编写复杂的着色器以避免许多绘制调用。因此，如果您可以在一次通话中将整个房子绘制为单个网格，那么每个房间的呼叫要好1000次。编写ubershaders是建议的，但主要是因为它可能允许你删除绘制调用，而不是因为GPU状态切换是昂贵的。

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