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.
- 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: