# InstancedMesh vs. InstancedBufferGeometry

**URL:** <https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058>\
**Category:** Questions\
**Tags:** instancing\
**Created:** [October 22, 2021, 4:14am UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058 "2021-10-22T04:14:52Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alex/32/9027_2.png) [@Alex](https://discourse.threejs.org/u/Alex)\
**Post date:** [October 22, 2021, 4:14am UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058/1 "2021-10-22T04:14:52Z")

</div>

Hello All,

I am working on performance optimization.

Currently i am rendering 1000s of objects into my scene using buffer geometry.

I found that buffer geometry is faster but due to lot of objects my browser slow down.

So i found a solution to use instance buffer geometry or instance mesh

To overcome the large number of object rendering and slowness in the browser.

Here a little confuse which one i should go for in between instance mesh and instance buffer geometry.

Because in future i have to do some transformation means move the individual obj so i think this is not possible with instance buffer geometry.

Please any views on each of my statement above.

Thanks

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 22, 2021, 8:08am UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058/2 "2021-10-22T08:08:50Z")

</div>

Please use `InstancedMesh`. It will make it easier to transform individual instances like demonstrated in the official demos, e.g. [three.js webgl - instancing - dynamic](https://threejs.org/examples/webgl_instancing_dynamic).

---

<div class="post-metadata">

**Author:** ![Alex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alex/32/9027_2.png) [@Alex](https://discourse.threejs.org/u/Alex)\
**Post date:** [October 26, 2021, 2:16am UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058/3 "2021-10-26T02:16:47Z")

</div>

> [@Alex](#):
>
> I found that buffer geometry is faster but due to lot of objects my browser slow down.
> 
> So i found a solution to use instance buffer geometry or instance mesh
> 
> To overcome the large number of object rendering and slowness in the browser.

I just read simple discussion here.

But i am not able to found how ?

Means how rendering 1000s of buffer obj is slower than rendering 1000s of instances.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 26, 2021, 8:02am UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058/4 "2021-10-26T08:02:50Z")

</div>

> [@Alex](#):
>
> Means how rendering 1000s of buffer obj is slower than rendering 1000s of instances.

Rendering 1000 meshes produces 1000 drawcalls.  
Rendering 1000 instances of a single instanced mesh produces 1 draw call.

There are many topics in this forum which explain why draw calls are a critical performance metric.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 9, 2022, 4:19pm UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058/6 "2022-07-09T16:19:48Z")

</div>

For transforming instancedBufferGeometry (like trees or sprites) need custom shader.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/7/1785af3d1273598db89ec89ffd75ca0291ede099.jpeg)

---

<div class="post-metadata">

**Author:** ![caBattista](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cabattista/32/26293_2.png) [@caBattista](https://discourse.threejs.org/u/caBattista)\
**Post date:** [July 10, 2022, 6:36am UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058/7 "2022-07-10T06:36:30Z")

</div>

Is it possible to have different shaders per instance with instancedBufferGeometry or InstancedMesh and still have only one draw call?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 10, 2022, 7:57am UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058/8 "2022-07-10T07:57:18Z")

</div>

Its posible to use several materials like phong, standard, lambert in one shader and one draw calls, but bad solution, because will be very big code and warst fps  
Its posible to set different colors, textures to different objects in instancedBufferGeometry and InstancedMesh  
For me instancedBufferGeometry is raw solution of InstancedMesh fo custom developing.  
For you maybe simple be using instancedMesh  
My sprites with 13 textures is instancedBufferGeometry, 1 draw call

> [@InstancedMesh - can it be used to draw hundreds of planes with different textures?](https://discourse.threejs.org/t/instancedmesh-can-it-be-used-to-draw-hundreds-of-planes-with-different-textures/13221/2):
>
> Yes, but it’s hard to map it onto your use case because of the massive amount of different textures. Can you really use 250 texture objects in your app without crashing? TBH, that sounds a bit extreme. I would suggest to merge all textures into a single texture atlas, use it as the diffuse map for a single material. You can then use an additional instanced attribute to define texture offsets per instance. Then, and only then, instanced rendering makes sense. When using InstancedMesh, it’s eas…

---

<div class="post-metadata">

**Author:** ![caBattista](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cabattista/32/26293_2.png) [@caBattista](https://discourse.threejs.org/u/caBattista)\
**Post date:** [July 10, 2022, 9:30am UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058/9 "2022-07-10T09:30:53Z")

</div>

I will have to try out instancedBufferGeometry.

Could one write a custom shader that makes Instances meshes appear completely different? From what I understand one can modify the vertices with a custom shader too.

That way one could only have instanced meshes in the scene. But change the shape with a custom shader.

Or is it only possible to have the same shader code for all instances? I found this [InstancedUniformsMesh](https://discourse.threejs.org/t/instanceduniformsmesh-set-shader-uniform-values-per-instance/22814) where it is at least possible to change the uniforms per instance.

---

<div class="post-metadata">

**Author:** ![caBattista](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cabattista/32/26293_2.png) [@caBattista](https://discourse.threejs.org/u/caBattista)\
**Post date:** [July 10, 2022, 7:14pm UTC](https://discourse.threejs.org/t/instancedmesh-vs-instancedbuffergeometry/31058/10 "2022-07-10T19:14:20Z")

</div>

I’ve researched a little more and found out it can’t be done because for that (for example adding a vertex within a shader) you would need a geometry shader which WebGL does not support.

> [@Geometry shaders in Three.js?](https://discourse.threejs.org/t/geometry-shaders-in-three-js/33462):
>
> Hi all, is it even remotely conceivable to somehow plug in a [geometry shader](https://www.khronos.org/opengl/wiki/Geometry_Shader) between vertex and fragment shaders within Three.js?