InstancedMesh for simple geometries?

I understand InstancedMeshes to be better than merging geometries, because they store the geometry only once (reducing memory overhead), and are faster to generate without the merging step.

But if my geometry is a simple triangle, would the added overhead of instanceMatrix (16 floats apiece) offset the savings of repeated geometries (3 vertices of 3 floats each → 9 floats)? Compared to merging, does this mean the memory savings are only worth it for geometries of at least 6 vertices (18 floats)?

Using InstancedMesh with a single triangle is very unlikely to improve performance — Mesh is already a collection of triangles, and is the most efficient way to represent that. I don’t think there is any specific number of vertices that would lead you to choose merging vs. instancing in all cases and all devices.

I understand InstancedMeshes to be better than merging geometries…

I’m not aware of any rule of thumb to say this. All WebGL applications have limits in terms of:

  • number of draw calls
  • other CPU bottlenecks
  • CPU memory
  • GPU memory
  • cost of GPU fragment shader, and other GPU bottlenecks
  • cost of initializing the scene and updating for each frame

If you’re bottlenecked by draw calls, merging or using InstancedMesh are both good ways to improve that. If you test this example…

… I find framerate to be a touch better with merging than instancing on my machine, but I don’t know if that’s universally true. And certainly the memory cost of merging is higher. There’s no one “right” choice to decide between using more CPU time or more memory. You’ll need to optimize and test for the limits you are hitting, and the performance goals of your app; it is a multi-dimensional optimization and not reducible to vertex count.


thanks for the thorough breakdown of potential limitations here. I’m seeing the same frame rate behavior with that example, which is surprising. looks like a lot more bottleneck-seeking is in order.