WebGL slow when rendering 10k triangles

[Captain Harlock]

I'm using WebGL to render N triangles in 2D.
The triangles' geometry and colors are random, computed once and placed in buffers at start up. My shaders are super simple.
Then I render them by one call to drawArrays, and animate via requestAnimationFrame. The FPS drops rapidly as N grows (both on my PC and my MacPro).
When N = 10k, it's painfully slow.
All over the web I see smooth demos with very large numbers of triangles.

What I'm doing is very simple:

https://jsfiddle.net/CaptainHarlock/mphd96L5/

You can vary the number of triangles and see performance go down.

I'm not sure if I'm doing something wrong. Help!

[Andre Weissflog]

I'm pretty sure that you're running into fillrate-problems because of the massive overdraw. If you make the area of the triangles much smaller, e.g. like this (note the multiply by 0.1)

     addTriangle_() {

       var vertices = [];

       for (var i = 0; i < 6; i++) {

         vertices.push(0.1 * Math.random());

       }

...I can go up to 100k triangles still at 60fps, only when I go to 1 million the framerate suddenly breaks down to 9fps (but this looks like a different problem).

In general, even modern graphics cards don't have enough fillrate to render each pixel many thousand times per frame (Retina MacBooks and other HighDPI notebook with weak Intel GPUs barely have enough oomph to render each pixel just once at Retina resolution). You'll have to manually help to prevent that overdraw, by reducing depth-complexity of your scene, draw from front to back (GPUs can fairly efficiently discard triangles that would be completely depth-culled, google for 'hierarchical depth buffer') or other occlusion culling techniques.

Cheers,

-Floh.

[Captain Harlock]

Thanks Floh!

You're right, there seem to be too many pixels/fragments to render.

I followed your recommendation and rendered smaller, triangles, and it's fast now.

In fact, I evenly spread the smaller triangles on the viewport, and it's still fast with 100k triangles.

https://jsfiddle.net/CaptainHarlock/oabqoago/

Thanks,

-CH

[Rachid El Guerrab]

For me, on a macbook pro:

It goes below 60 (to about 55fps), at 3M triangles or more.

It crashes after 5,150k triangles (~40fps)

--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

- rachid