Instanced mesh in blender -> glb -> three.js - is it instanced in three.js?

Questions
,
1

If you instance a mesh in Blender, and then bundle the instances into a glb file, will they each act as an instanced mesh in Three.js? i.e. a single draw call?

2

No the gltf loader will not create an instancedMesh. However the instances geometry is reused within the gltf file, so it’s still a good idea to export instances when you can to reduce the file size. Then when you import a gltf file with three.js, you can loop through the imported scene and re-create the instances with THREE.InstancedMesh.

more in this thread

3 Likes
3

thank you - that makes sense. How can you identify a mesh as instanced when looping through that scene?

1 Like
4

As far as I know you have to do it with their names… You name your instances in blender like “my-instance-01”, then in three.js you check the names of the imported scene children.

glb.scene.traverse( (child) => {
	
	if ( child.name && child.name.includes( 'my-instance' ) ) {

		// add to instancedMesh

	}

} );

I’m sure there must be a better way, but that’s how I do it.

5

By creating a map with the used geometries, I’ve done it and it works. Made a small tool for it that creates it automatically: GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components (-i). Here’s an example of a heavy file that was instanced automatically with some nice perf bonus: https://twitter.com/0xca0a/status/1439953570439303171?t=WCcCLliXrkQWhtk4_K8mYA&s=19 (it’s react, but the geom collection works).

6

hey! awesome tool w/ gltfjsx.

question about using the “-i” option to create a jsx file w/ instancing:

say i have a bunch of models of a missile - same geometry & material, i want them to end up in different locations. will using gltfjsx with either the -i or the -I option help with reducing draw calls in this scenario?

currently when i add several instanced jsx components produced with either option, each instance increases my draw calls overall. am i doing it wrong? thanks!!

7

yes, that will work, but you need to wrap all these components into “” here’s a simpler example of how that works: Floating, instanced shoes. - CodeSandbox the components then don’t return a mesh no linger but the instance itself.

1 Like