Jump to content

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


Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...