用一次绘制调用绘制许多独特的三角形（以获得更好的性能）？答案

【问题标题】：Drawing many unique triangles with a single draw call (for better performance)?用一次绘制调用绘制许多独特的三角形（以获得更好的性能）？
【发布时间】：2014-07-07 15:24:47
【问题描述】：

这是最简单的情况：http://jsfiddle.net/headchem/r28mm/10/

有什么方法可以避免为我要绘制的每个三角形调用这条线？

gl.drawArrays(gl.TRIANGLES, 0, numItems);

作为一项学习练习，我正在尝试用简单的彩色三角形创建一个 2D 游戏。我想每帧在屏幕上放置数百个移动三角形，但我目前的尝试速度非常慢。我怀疑这是因为我在每一帧都进行了数百次 drawArrays() 调用。

我已经阅读了一些关于 Vertex Buffer Objects 和 this question sounds promising 的内容，但是我在上面的小提琴演示中无法将所有部分放在一起。是否可以在一次绘制调用中渲染数百个独特的 2D 三角形形状 + 不同的颜色 + 透明度并具有良好的性能？

【问题讨论】：

你所做的就是"immediate mode" rendering。这是一种非常错误的 OpenGL 方式。如今，使用 Vertex Buffer Objects 是一个普通的标准。未来的优化可能包括静态和动态 "batching"、"geometry instancing"、在 geometry shader 或 tessellation shaders 以及它们的任意组合。您可能想要运行一些谷歌搜索，因为现在您有了关键字。此外，这些主题的一些基础知识包含在现代 OpenGL 书籍（OpenGL 3.0+）中。
@Drop：注意opengl-es 和webgl 标签。您提出的大多数功能在 OpenGL ES 2.0（WebGL 所基于）中不可用。
@RetoKoradi 哦，我没有看到那些标签。之前只有opengl ;) 无论如何，VBO 和批处理是必须有的，并且随处可用。
@Drop：是的，在我遇到问题之前，genpfault 正在修复标签。
@Drop: 不，那是不是立即模式。即时模式是glBegin/End，per vertex 有几个 GL 调用，而且 wegbl 甚至不支持。

标签： opengl-es webgl

【解决方案1】：

无论您是否使用 VBO，您的顶点数据设计似乎都存在重大问题，因为每个对象都包含绘图所需的数据，而这些数据不在同一个数组中。您应该考虑的第一件事是如何将这些数据打包在一起。在我看来，最好在您的情况下创建一个顶点数组，结合位置和颜色，然后您的三角形对象应该引用该数组的顶点数据所在的特定点。例如，第一个对象位于0，第二个对象位于(3*3 + 3*4)，如(number_of_vertices * number_of_floats_per_point + number_of_vertices * number_of_floats_per_color)。在这种情况下，您现在可以使用相同的顶点数据数组使用单个绘制调用绘制所有三角形。

此过程可能会出现一些问题，因为您可能需要对数据数组进行膨胀/缩小，但您应该能够做到。

对于 VBO，过程完全相同，只是您需要将整个数组维护为 VBO，获取指针并动态更改数据。现在，如果这些数据不断移动（您正在更改每一帧上的大部分数据），那么您将不会从 VBO 中获得任何收益，甚至创建它也没有用。但是，如果您确实使用它，请尝试为所有三角形只使用 1 个缓冲区。

另请注意，您确实需要将颜色作为属性，并且必须针对每个顶点进行定义才能将您的绘图作为单个绘图调用来完成。

【讨论】：

标记为答案，因为这最终是我最终要做的（也感谢@Drop 提出的建议）。我现在在这里有一个后续问题：stackoverflow.com/questions/24616756/… 感谢您的洞察！
实际上，我只在我的新问题中实现了 VBO - 我仍在努力将顶点数组与颜色数组结合起来。数据的整体大小是相同的，但只更新一个缓冲区而不是两个缓冲区真的会产生很大的性能提升吗？
成功！ jsfiddle.net/headchem/r28mm/14 这是一个只为顶点和颜色使用一个缓冲区的更新。它肯定提高了性能。谢谢！
对于后人，通过遵循此答案的建议，性能再次得到了极大的提高：stackoverflow.com/questions/24616756/…这是最终结果：jsfiddle.net/headchem/r28mm/16