在WebGL应用程序中，我必须绘制一堆四边形（越多越好，但1000应该是合理的上限）。每个四边形都有一些属性，如颜色，位置，大小，可能还有一些材料属性。每个四边形大约10个花车的东西。着色器会用这些来做奇特的东西，但这在这里无关紧要。每个顶点可以描述为（位置+尺寸×（±1，±1,0））。现在我想知道如何最好地渲染所有这些四边形。我看到基本上有三种选择：
对所有参数使用制服，然后为每个四边形调用gl.drawArrays一次，使用一个数组缓冲区，其中只包含角的相对坐标，即形式的向量（±1，±1） ）。这意味着形成两个三角形的四个顶点的三角形条带。
对所有四边形使用单gl.drawArrays次调用。由于属性是每个顶点，而不是每个三角形，这意味着复制所有顶点的所有参数。此外，因为我不能在所有顶点都有一个三角形条带，所以我必须复制顶点，所以我基本上每个四边形有6个顶点，并且可能使用不同的三角形而不是三角形条带。这意味着每个四边形大约有6×（10 + 2）= 72个浮点数，其中有很多冗余。
与2.相似但是使用gl.drawElements来避免复制形成每个四边形的两个三角形的顶点。所以我最终得到4×（10 + 2）= 48个浮点作为属性，6个指数用于索引。
我不确定采取哪种方法。他们都没有感觉完全足够。在1.我得到的印象是，每次调用只绘制四个顶点的数组可能会浪费性能。我不确定使用这种方法绘制的几个四边形是否可以并行渲染。使用2.和3.我担心数据冗余量很大，以及保存数组所需的缓冲区大小。 3.稍微减少数据量，但可能由于间接而涉及额外的开销。
我知道，就性能而言，最终的答案是执行基准测试。但我想知道这里是否有一些既定的最佳实践，它不仅考虑我的一台开发机器上的性能，而且考虑各种硬件，驱动程序，浏览器，还考虑其他方面，如内存的可扩展性要求。这就是我在提出适合现实生活比较的实现时我会问这个问题的原因。
答案 0 :(得分：1)
减少绘制调用通常是在提高性能时要做的第一件事，因此直接采用1.并且只会因为更多的四边形而变得更糟。
我没有看到使用2超过3的优势，所以我会选择3.记住你总是可以使用退化三角形在不连续的对象上使用三角形条，在你的情况下四边形。
如果您想减少冗余而不是使用属性，请考虑使用textures as a lookup，并对纹理进行编码，以便您只需查找颜色即可。我不确定这是否会更快，但这是一个选择。
答案 1 :(得分：0)
我做了一些实验，在Linux和Mac上使用Firefox。由于某些原因，我无法运行属性框架计数器，但从响应性到鼠标交互方法2的感觉明显优于1. Linux机器上的区别更大，它有一个较旧的nouveau驱动的图形卡。因此，除非其他人发布相反的答案，否则我将使用此作为指导并暂时使用2。如果我遇到内存成为问题的场景，也许可以切换到3。