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.
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:
InstancedBufferAttribute with 50,000 different positionsInstancedBufferAttribute with 50,000 different rotationsThe 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!
Hi!
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?