通过单次绘制调用绘制许多独特的三角形（以获得更好的性能）？

Question

这是最简单案例的小提琴：http://jsfiddle.net/headchem/r28mm/10/

有没有办法避免为我想绘制的每个三角形调用此行？

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

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

我已经阅读了一些关于顶点缓冲对象和this question sounds promising的内容，但是我在上面的小提琴演示中将所有部分放在一起时遇到了麻烦。是否有可能在单次绘图调用中呈现数百个独特的2D三角形形状+不同的颜色+透明度并具有良好的性能？

Answer 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中获得任何东西，甚至无法创造它。但是如果你使用它，试着只为所有三角形设置一个缓冲区。

另请注意，您需要将颜色作为属性，并且必须按顶点定义，以便将绘图作为单个绘制调用完成。