使用一次绘制调用绘制许多独特的三角形(以获得更好的性能)? [英] Drawing many unique triangles with a single draw call (for better performance)?

问题描述

这是一个最简单的例子:http://jsfiddle.net/headchem/r28mm/10/

Here is a fiddle of the simplest case: http://jsfiddle.net/headchem/r28mm/10/

有什么办法可以避免为我想绘制的每个三角形都调用这条线?

Is there any way to avoid calling this line for every single triangle I wish to draw?

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

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

As a learning exercise, I'm trying to create a 2D game out of simple colored triangles. I'd like to put several hundred moving triangles on screen each frame, but my framerate is very slow with my current attempts. I suspect it's because of the hundreds of drawArrays() calls I am making each frame.

我已经阅读了一些关于顶点缓冲区对象的内容，这个问题听起来很有希望，但是我在上面的小提琴演示中无法将所有部分放在一起.是否可以在一次绘制调用中以良好的性能渲染数百个独特的 2D 三角形 + 不同颜色 + 透明度?

I've read a bit about Vertex Buffer Objects, and this question sounds promising, but I'm having trouble putting all the pieces together in my fiddle demo above. Is it possible to render hundreds of unique 2D triangle shapes + different colors + transparency in a single draw call with good performance?

推荐答案

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

Weather you use a VBO or not you seem to have a major problem in your vertex data design as each object contains the data needed for drawing and those data are not in the same array. First thing you should consider is how to pack those data together. In my opinion it would be best to create an array of vertices in your case combined both positions and colours, then your triangle objects should have a reference to a specific point that array where its vertex data lay. For instance the first object would be at 0, second would be at (3*3 + 3*4) as in (number_of_vertices * number_of_floats_per_point + number_of_vertices * number_of_floats_per_color). In this case you can now draw all the triangles using a single draw call with this same array of vertex data.

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

There can be a few problems in this procedure as you might need to inflate/deflate the array of data but you should be able to make it.

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

As for VBO the procedure is exactly the same except you need to maintaing the whole array as the VBO, getting the pointer and changing the data on the fly. Now if those data are constantly moving (you are changing most of the data on every frame) then you will gain nothing from the VBO and it is useless to even crate it. But if you do use it try to have only 1 buffer for all the triangles.

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

Also note you do NEED to have a colour as an attribute and must be defined per-vertex to complete your drawing as a single draw call.

这篇关于使用一次绘制调用绘制许多独特的三角形(以获得更好的性能)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！