Comparing 2 approaches using BufferGeometry

My scene will have 50000 regular hexagons, same color and scale, different positions and rotations.
Please comment on these two approaches:

1a) Each hexagon is a mesh with BufferGeometry and
mesh.drawMode = THREE.TriangleFanDrawMode;
1b) Add each mesh to a THREE.Group.

  1. One mesh – BufferGeometry, 300000 triangles (50000*6) and
    mesh.drawMode = THREE.TrianglesDrawMode;

You should look into using InstancedBufferGeometry instead of generating that many separate Meshes. It’ll perform much faster. You’d basically have to declare one hexagon geometry, then just assign:

The only downside is that you might need to write your own shader code.

Here’s a beautiful example that looks a lot like what you’re trying to achieve. And here’s another, simpler example with just triangles.


Yes, it is beautiful, but I don’t see that it uses InstancedBufferGeometry!

Because all the cubes in that example is a single geometry.

Ah, my mistake, you’re right. That example is using a different coding approach because it’s running on three.js r55, and InstancedBufferGeometry wasn’t added until r72, I think?. However, the concept of instancing and animating all the geometries on the GPU instead of creating 50k meshes is still the same.

Also, you mentioned 6 triangles per hexagon, but here’s a little trick to draw one with only 4 tris, if you want to build it manually:


4 tris instead of 6
Thank you. But another case: If I had many “fans”, but they were all different, would I use the “fan” drawmode and add the meshes to a group, or would I just use the triangle drawmode?