Issue About Performance in Three Fiber

Questions
, ,
1

Hello! I am trying to mimic the effect there that https://globe.ertha.com/ is doing. They have there a hexasphere (a sphere made out of hexagons).

I would like to replicate that in my project too. I have managed to create an algorithm that generates the vertices coordinates for each triangle of the face and, in the end, managed to create the hexasphere. The issue is that I want to put there 25k hexagons. This means 25k draw calls and it is a lot (the fps are 24 in Chrome, 8 Firefox, and 10 Safari).

Can anyone help me out to suggest a better workaround? I was thinking of Instanciated mesh, but this is the case for geometries that repeat. I tried creating a model in Blender (that has 650 children - each child is a hexagon), but I get 650 draw calls, so I assume it would be the same for 25k. How can ertha get that good fps?

Here is how I have created the meshes:
Note: variable el from the map was a Float32Array that held the vertices array in such order that it created 6 triangles, so a face.

{
                hexasphereFaceVertices.map(el => {
                    return <mesh
                        material={material}
                    >
                        return <bufferGeometry>
                        <bufferAttribute
                            attachObject={["attributes", "position"]}
                            array={el}
                            itemSize={3}
                            count={el.length / 3}
                            onUpdate={self => (self.verticesNeedUpdate = false)}
                        />
                    </bufferGeometry>

                    </mesh>
                })
            }
2

I think InstancedMesh is what you want here, 25K draw calls is certainly too many. You can give each instance a different position, rotation, scale, and color. This example may be helpful:

webgl / instancing / scatter

3

Hi! I have seen the link. It is a great resource.

Yeah, I would definitively need the instantiated mesh, but the thing is that the hexagons are not perfect. It is a Goldberg sphere. Each hexagon is not a perfect hexagon. In the link there is the same geometry (the flower), but repeated.

Do you have any other solutions? I have not tested the thing with the blender model. What do you think about that?

4

If you can express the deformation of each hexagon as a 4x4 matrix transform (even a non-affine transform) then InstancedMesh should work. Possibly a chamfer transform? They don’t have to be perfect hexagons.

If you can’t use instancing I think you’d need to compute all of these hexagons and write them into a single BufferGeometry (or a limited number), with vertex colors if necessary. BufferGeometryUtils.mergeBufferGeometries can help with that.

Blender can merge geometries, and may be a helpful workflow to achieve the same thing. But I wouldn’t want to load 25K meshes from Blender. :slight_smile: