WebGL: How do I render like 4k triangles per frame at 60fps?

[Ciro]

Hi, I'm relatively new at WebGL and I'm trying to make my own 2D WebGL framework.

 

This example was not made by me, but by doing a little modification it can show my problem. My goal was to see how many random triangles I could render per frame, so I put the following code inside a requestNextFrame function:

 

for (var ii = 0; ii < 50; ++ii) {    // Setup a random rectangle    setRectangle(        gl, randomInt(300), randomInt(300), randomInt(300), randomInt(300));    // Set a random color.    gl.uniform4f(colorLocation, Math.random(), Math.random(), Math.random(), 1);    // Draw the rectangle.    gl.drawArrays(gl.TRIANGLES, 0, 6);  }

so 50 random rectangles are rendered every frame. It went smoothly, but when I raised the loop length to 500~1000, the frame rate dropped a lot.

 

I know (I think) that by using gl.bufferData a single time with a big array instead of using it many times with small arrays should be more efficient, so I did this but it still didn't solve the problem...

 

But in this PIXI v3 example I can have +10.000 bunnies at 60fps! What kind of magic PIXI used?

[AshleyScirra]

The solution is batching, which is like you say: write a single buffer and pass it to drawArrays, or better yet drawElements, in one go.

 

If you keep calling uniform4f followed by drawing a single triangle, that is still very inefficient. If the colors really change for every triangle, you should create a new buffer for colors, and feed that in to the vertex shader. Then you can simply fill the buffers and make a single draw call again.

 

Basically every WebGL call has a performance penalty, so try to get it down to a fixed set of calls every frame, even for a variable amount of content to draw.

[Ciro]

Ok, this time I made the example by myself: https://dl.dropboxusercontent.com/u/75048835/triangles/index.html

Everything is in one array and there's a buffer for colors, however it still uses drawArrays because I still can't figure out how to apply drawElements here.

 

Anyway, in this example you can drag the slider for the quantity of rendered triangles. Here the framerate starts dropping by going greater than 200. I don't know how to optimise that.

 

Source file is here.