InstancedMesh vs. InstancedBufferGeometry

Questions
1

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

2

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.

1 Like
3

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.

4

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.

1 Like
6

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

image
image960×540 108 KB

7

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

8

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

9

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 where it is at least possible to change the uniforms per instance.

10

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.