# Issue About Performance in Three Fiber

**URL:** <https://discourse.threejs.org/t/issue-about-performance-in-three-fiber/36584>\
**Category:** Questions\
**Tags:** gltf-loader, geometry, materials\
**Created:** [March 31, 2022, 3:38pm UTC](https://discourse.threejs.org/t/issue-about-performance-in-three-fiber/36584 "2022-03-31T15:38:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TasteDaBombDev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tastedabombdev/32/25333_2.png) [@TasteDaBombDev](https://discourse.threejs.org/u/TasteDaBombDev)\
**Post date:** [March 31, 2022, 3:38pm UTC](https://discourse.threejs.org/t/issue-about-performance-in-three-fiber/36584/1 "2022-03-31T15:38:27Z")

</div>

Hello! I am trying to mimic the effect there that [https://globe.ertha.com/](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.

```javascript
{
                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>
                })
            }

```

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [March 31, 2022, 4:40pm UTC](https://discourse.threejs.org/t/issue-about-performance-in-three-fiber/36584/2 "2022-03-31T16:40:46Z")

</div>

> [@TasteDaBombDev](#):
>
> I was thinking of Instanciated mesh, but this is the case for geometries that repeat.

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](https://threejs.org/examples/?q=scatter#webgl_instancing_scatter)

---

<div class="post-metadata">

**Author:** ![TasteDaBombDev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tastedabombdev/32/25333_2.png) [@TasteDaBombDev](https://discourse.threejs.org/u/TasteDaBombDev)\
**Post date:** [March 31, 2022, 4:48pm UTC](https://discourse.threejs.org/t/issue-about-performance-in-three-fiber/36584/3 "2022-03-31T16:48:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [March 31, 2022, 6:38pm UTC](https://discourse.threejs.org/t/issue-about-performance-in-three-fiber/36584/4 "2022-03-31T18:38:19Z")

</div>

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](https://math.stackexchange.com/a/1987206/940964)? 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. 🙂