使用每个四边形的一次绘制调用或对所有四边形使用一次调用来渲染独立的四边形？

Question

在 WebGL 应用程序中，我必须绘制一堆四边形（越多越好，但 1000 应该是一个合理的上限）。每个四边形都有一些属性，例如颜色、位置、大小，也许还有一些材料属性。每个四边形大约有 10 个浮点数。着色器会用这些来做一些花哨的事情，但这在这里无关紧要。每个顶点可以描述为（位置+大小×（±1，±1，0））。现在我想知道如何最好地渲染所有这些四边形。我看到的基本上有三个选项：

1. 对所有参数使用制服，然后为每个四边形调用一次gl.drawArrays，并使用一个数组缓冲区，其中仅包含角的相对坐标，即形式为 (±1,±1) 的向量。这意味着一个由四个顶点组成的三角形带形成两个三角形。

2. 对所有四边形一起使用单个 gl.drawArrays 调用。由于属性是每个顶点，而不是每个三角形，这意味着复制所有顶点的所有参数。此外，由于我不能让单个三角形条穿过所有顶点，因此我必须复制顶点，所以我基本上每个四边形有 6 个顶点，并且还不如使用不同的三角形而不是三角形条。这意味着每个四边形大约有 6×(10+2)=72 个浮点数，其中有很多冗余。

3. 与 2 类似，但使用 gl.drawElements 以避免重复形成每个四边形的两个三角形的顶点。所以我最终会得到 4×(10+2)=48 个浮点数作为属性，6 个整数作为索引。

我不确定采用哪种方法。他们中没有一个人感觉完全足够。 1. 我的印象是每次调用仅绘制四个顶点的数组可能会浪费性能。我不确定是否可以并行渲染使用这种方法绘制的几个四边形。对于 2. 和 3. 我担心大量的数据冗余，以及保存数组所需的缓冲区大小。 3. 一定程度上减少了数据量，但可能会由于间接而涉及额外的开销。

我知道，就性能而言，最终答案是执行基准测试。但我想知道这里是否有一些既定的最佳实践，它不仅考虑我的一台开发机器上的性能，还考虑各种硬件、驱动程序、浏览器，还考​​虑其他方面，比如内存的可扩展性要求。这就是我在致力于实现适合现实生活比较的实现时提出这个问题的原因。

Answer 1

减少绘图调用通常是提高性能时首先要做的事情，因此这会立即消除 1. 的影响，并且只会随着更多的四边形而变得更糟。

我没有看到使用 2 比 3 的优势，所以我会选择 3。请记住，您始终可以使用退化三角形在不连续的对象上使用三角形带，在您的情况下是四边形。

如果您想减少冗余，而不是使用属性，请考虑使用textures as a lookup，并对您的纹理进行编码，以便您可以简单地查找颜色。我不确定这是否会更快，但这是一种选择。

Answer 2

我做了一些实验，在 Linux 和 Mac 上使用 Firefox。出于某种原因，我无法让属性帧计数器运行，但从对鼠标交互的响应能力来看，方法 2 明显优于 1。Linux 机器上的区别更大，它具有较旧的 nouveau 驱动显卡。因此，除非其他人发布相反的答案，否则我将以此为指导并暂时选择 2。如果我遇到内存成为问题的情况，可能会切换到 3。