Flipped x axis with clones but not with instances (gltf)

Hi everyone!

I have a weird problem with my gltf model. After I changed from using createInstance -method to clone, it seems the x axis has been flipped. See this playground for reference:


My goal is to have all the game map pieces in a same gltf/glb file and then instance/clone those pieces and transform/rotate them. However when I clone the pieces it seems the x axis gets mirrored in a weird way. Is there something I have to do in Blender to circumvent this problem of have I done something naughty in the code?

It seems that when you instantiate something it removes the parent reference, but this does not happen with clones? Could someone clarify the differences with these methods?

Thank you in advance for your help :sunglasses: :pray:

Here is your fix:
Cloning vs instancing flipped axis | Babylon.js Playground (babylonjs.com)

Instances are far faster than clones but suffer from several limitation (in a nutshell, an instance is rendered within the same GPU draw call so it has to share the same properties (ie. material) than the source)

When creating an instance the system does not assume you want to have the same parent.

The clone is simply a totally independent mesh but which share the same geometry as the source.
Clone will attach the new mesh to the same parent.

More details:


Thank you for the response and clarification Deltakosh :slight_smile:

I’ve been banging my head a bit more since I just can’t figure out what is happening in my game, but I think it has something to do with the parent. I updated the playground as well to explain a bit more.


The two black rectangles now represent the way the pieces should go to, but the pieces seem to be mirrored x-axis wise even though they are given the right coordinates… I think the instanced mesh was actually working “better” without the parent. Is it doing something wrong now?

Here is a reference picture as well… Does this have to do something with the left handedness?

let me ping @Evgeni_Popov or @bghgary to check if they have some free cycles to check

1 Like

Phew, I managed to “fix” this by detaching the parent from the clone.
Here is the final playground: https://playground.babylonjs.com/#S7E00P#99

I still don’t quite understand why this works though… I guess it has something to do with the parent, but what is the actual problem… If someone knows, would be very informative :pray:

Your problems probably stem from the fact that the gltf files are in a right handed (RH) coordinate system whereas Babylon is left handed (LH) by defaut. So we have to create a root node which transforms from RH to LH. To get rid of this transformation (the root node is still there but with an identity transform), you can set the scene into RH by doing this just after scene creation:

scene.useRightHandedSystem = true;
1 Like

If I detach the parent completely like in the playground before, is this a good solution? Why does it seem to fix the problem? :thinking:

The clones and instances are no more children of the original mesh:

Notably, they don’t have __root__ as a parent, so they are not impacted by its transform:

This transform mirrors Z and rotates Y by 180°. It’s also the same thing than mirroring X (x => -x).

When you set scene.useRightHandedSystem = true; the transform of __root__ becomes the identity transform so making the clones/instances children of it or not does not make any difference.

1 Like

Thank you for the explanation! Didn’t notice the scaling and rotation at all… So basically if I only use gltf models it is safe to set useRightHandedSystem = true :sunglasses: