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

Question

我试图了解WebGL的实用性，用于绘制大的内部场景，包括100 K的三角形。这些三角形分布在许多物体上，场景中有很多材料。另一方面，没有移动的部件。而且材料往往很简单，主要是基于纹理图。有很多纹理图共享。例如，场景中的所有椅子都将共享一张共同的地图。也有一些多纹理-多达三个纹理覆盖在一个材料。

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

因此，如果性能是重要的，则应根据材料对场景进行排序，以尽量减少材料的切换。我要找的是关于如何考虑各种状态变化的开销的指导方针，以及我在哪里能得到最大的回报。例如,

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

我意识到里程可能因浏览器、操作系统和图形硬件而异。我也不是在找英雄的手段。只是一些人的指导，谁已经有一些经验，在快速制作场景。我要补充的是，虽然我以前在固定管道OpenGL编程方面有过一些经验，但我对WebGL/OpenGLES2.0的编程方式还是比较陌生的。

Answer 1

你读过批，批，批吗？诚然，它关注的是directX，但其推理在更小的程度上也适用于Open:每个API调用在CPU上都有很大的开销。建议是使用API的所有选项来共享纹理，使用实例(如果可用)，编写复杂的着色器以避免多次绘制调用。所以，如果你能在一个电话中把整个房子画成一个网格，那就比每个房间1000个电话要好。编写ubershaders是重新编写的，但主要是因为它允许您删除绘图调用，而不是因为GPU状态切换很昂贵。

这假设是最近的硬件。用于低端平台(iPad?)或者英特尔GMA芯片，瓶颈将出现在其他地方(比如软件顶点处理)。