In WebGL, how can I efficiently render a mesh many times per frame, without instancing?

Question

I'm using WebGL and I want to render a single mesh many times at different locations. I know about WebGL 2's drawArraysInstanced() and drawElementsInstanced() calls, but I think only Firefox supports them now.

The only solutions I see are :

1. Put all the meshes in a single buffer and render it with a single call to drawArrays()/drawElements(), but that would be a waste of memory because the mesh contains a lot of vertices and if the meshes are not static I would need to re-load the vertices in gpu memory every frame or so.

2. Have a single mesh in memory and render each instance with a separate call to drawArrays()/drawElements(), updating the model matrix between each call. I don't think that's the best way.

Any ideas? Thanks

Answer 1

You need the same exact mesh, thus you only need one vertex buffer with the mesh info of 1 model. No need for very long vbos.

Remember, if you don't multiply the mesh's position with a model matrix in the shader, then you get the mesh in the center of the scene without any rotation.

If you want it to be in the scene multiple times at different positions, bind the model obly once, then for each of them load in a different model matrix to the shader and call the appropariate draw function.

This is pretty efficient, you only send 2 calls to the GPU every time you render a new model, and it uses significantly less VRAM thab the instancing method (you don't need a separate vbo for the locations).

Answer 2

Putting all your meshes in one big buffer and render it with one drawArrays call is not even half as bad. However, this has a few drawbacks. If a mesh ever needs to change, you'll have to update the buffer. Whilst that is not that expensive, if this happens frequently and with multiple objects, it will become a bottleneck.

It all depends on how many objects you have and how much they have to move. If its all static geometry, you'll be fine with one big buffer (although I would still recommend just using instanced anyway). If they should move every frame, you should use multiple drawcalls.

The only way to make sure is just to try it and look at the results.