1

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

  1. 对所有参数使用uniforms，然后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. 稍微减少数据量，但可能由于间接而涉及额外开销。

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

4

2 回答 2

1

减少绘图调用通常是提高性能时要做的第一件事，因此 1. 立即退出，并且只会随着更多四边形而变得更糟。

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

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

于 2015-02-09T13:13:49.763 回答
0

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

于 2015-02-05T15:52:41.790 回答