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.
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.
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?
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.
