Is it possible to instance a complete GLTF that is imported to three.js

Hey Folks,

I am working on a project where I import GLTF and clone them multiple times to display in the scene. I need to access each of this later for a use case.

However, this is causing a lot of draw calls per frame (5000-6500) depending on the viewport and hence consumes a lot of memory and reduces the FPS.

I had gone through multiple posts here and on Stackoverflow but every post talks about either a mesh created from scratch inside three js or OBJs using a single material.

Our GLTF consists of multiple sub meshes and object3Ds and I was looking around if there is a way to instance this complete GLTF instead of cloning them to reduce the draw calls.

Any suggestion or direction is greatly appreciated.

P.S: I do not have a lot of experience writing custom shaders and if need be where should I look to start writing custom shaders for such use cases.

Thanks in advance, cheers!

You need to create a InstancedBufferGeometry using the original buffer attributes of your model and add a offset and orientation InstancedBufferAttribute in order to use instancing, in addition you need to patch your shader, here is a example pen that also makes shadows work with instances.

You can only make instances per geometry, so you’ll either have to make a instancing batch for each part of your model or merge it into one. If you use different materials and textures that will be an issue, if you’re interested, i’ve made a merging solution for this that allows to merge a model with multiple geometries, materials and textures into one, specifically made for instancing.


Thanks @Fyrestar, and yes our models have different material and texture so i guess this is going to be complicated than it should be. I will check your merging solution and get back for any doubts that may arise.

Thanks again!

1 Like

This has been discussed previously, see here for a possible solution.

Thanks @looeee, checking it out!

Whats the case with multiple materials and textures on 1 geometry ?
is this a problem? should it be 1 geo, 1 material, 1 texture or can you have more materials and textures? so long as its only applied to 1 geo?

Instancing means 1 material, 1 geometry. Textures those passed as uniform.

i made a tool that does this, it takes a gltf and finds similar geometry/material pairs, then creates instances from them

and here’s a real world usecase with a complex model from sketchfab, every screw, everything that’s the same is being re-used.

there’s an option where it creates an instance out of everything, even non-duplicate geometries, with this you can now mount the same model multiple times and it will re-use everything:

it’s react, but if you want to have this in vanilla, it’s based on @donmccurdy’s gltf-transform dedupe. after that it’s really just traversing and finding the pairs, and then forming as many THREE.InstancedMesh as pairs you found.