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!