glTF loader does not place correctly instancedMesh


I’m working on a converter of .ifc files to .gltf files. It’s working fine, but now, I try to improve the performances, because as you may know, .ifc files can be huge.

So, I use InstancedMesh to do improve it. The issue here, is that I have not the same behaviour with my three.js viewer or with others. When I load the new .glb file, my instanced meshes are not positioned where they need to be, as if the matrix had not been updated.

(three.js r155)

As you can see, my instancedMeshes are at the origin (0;0;0). The instancedMeshes are the windows, tables and chairs.

Whereas when I open the file with the glTF Tools extension of VSCode I get this:

(three.js r153)

I even tried on Don McCurdy’s website glTF Report :

(three.js r155)

So, I guess it comes from my loader. I use the loader from Three.js:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

At first I thought it was from the ‘EXT_mesh_gpu_instancing’ plugin of glTF but the loader seems to understand it pretty well. My file is a binary file and is draco compressed. I do nothing special when loading the file except changing materials to a transparent one. Do you have any clue?

Do you mind sharing one of your glTF assets in this topic for testing?

Probably have a mismatch with world and local coordinates.

1 Like

Sure, here it is.

scene.glb (322.7 KB)

Currently working on rotations, so don’t judge pls :sweat_smile:

Is this the expected result?

The screenshot was done with the current version of the three.js editor. Don’s glTF viewer as well as the BabylonJS sandbox render the asset in the same way.

Problem is definitely in the scene.glb
Just drag & drop into the Khronos sample viewer

Yes this is the expected result.

@spacefrog this is what I have with my viewer too. I don’t get why this is different

with Khronos sample viewer:

Do you have Object3D.DEFAULT_MATRIX_AUTO_UPDATE or Object3D.DEFAULT_MATRIX_WORLD_AUTO_UPDATE set to false in your app?

No I didn’t specify Object3D.DEFAULT_MATRIX_AUTO_UPDATE

Do you have an animation loop in your app or do you render on demand?

Yes I have an animation loop

Any chances to demonstrate the issue with a live example? three.js dev template - module - JSFiddle - Code Playground

Here it is: three.js dev template - module - JSFiddle - Code Playground

So basically, I load the gltf file, apply a specific material (shader material with transparency) but I didn’t in this fiddle, and then calculate a wireframe and apply it.

Here the wireframe is red and you can see the issue with the wireframe at the origin of the scene (inside the building). I couldn’t reproduce the issue for the building though, only the wireframe.

1 Like

Instances of ShaderMaterial are not automatically compatible with InstancedMesh, only build in materials. When using custom shaders, you have to add the respective shader code for instancing by yourself.

Besides, when you rendering wireframes, you render lines which are no instanced meshes anymore.

1 Like

If you have issues with writing your shader material so it is compatible with instancing, consider to enhance a built-on material with Material.onBeforeCompile() according to your needs.

Oh ok I didn’t know that ShaderMaterial wasn’t compatible. Good to know. I’ll investigate this, but it’s probably the reason why it’s not working.

Thanks for your help anyway. I’ll get back to you as soon as I can test it

Edit: the issue was with ShaderMaterial as you suggested