Babylon.js: [glTF] Changing the mesh material swaps the faces

[rlouvat]

Following the issue on the forum: http://www.html5gamedevs.com/topic/39028-gltf-exporter-fur-material-issue/?tab=comments#comment-222990
Previous issue: https://github.com/BabylonJS/Exporters/issues/276

After loading a glTF scene from the glTF-Sample-Model:

• the mesh is rotated 180 degrees on the y-axis
• changing the mesh material doesn't work as expected (nomal or uv flipped ?)
• Bug repro on http://www.babylonjs-playground.com/#DTAJTU

[bghgary]

https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#coordinate-system-and-units

glTF is currently loaded into BabylonJS by adding a negative z-scale to compensate for BabylonJS being left-handed (by default) and glTF being in right-handed. The makes the world matrix of all the glTF nodes have a negative determinant. The engine flips the faces when the world matrix determinant is negative. Thus in order to assign a material to a glTF mesh, you must flip the sideOrientation property of the material.

glTF is also loaded into BabylonJS always facing +Z in both left-handed and right-handed modes.

Here is a fixed version of your playground:
http://www.babylonjs-playground.com/#DTAJTU#1

Another solution is to change the scene to use right-handed system:
http://www.babylonjs-playground.com/#DTAJTU#2

Note you still have to set the sideOrientation to CCW though because glTF triangles are always CCW and BabylonJS defaults to CW in right handed mode.

[rlouvat]

Hi @bghgary
Thank you for your clear answer.

Like the original problem posted on the forum, I try with the fur material. And it's like the fur is going inside the mesh...

Here is a test with a box and a standard material. Even with sideOrientation set to CCW, the faces are flipped.
http://www.babylonjs-playground.com/#DTAJTU#3

Here is the test with a duck and a fur texture:
http://www.babylonjs-playground.com/#DTAJTU#4

[bghgary]

The material for this should be set to CW because Babylon is in left-handed and there is a negative determinant due to the negative z-scale on the root.

[bghgary]

Here is a fixed version: http://www.babylonjs-playground.com/#DTAJTU#5

[rlouvat]

Hi @bghgary,

Thank you for the explanation :)

[tibotiber]

Gold answer @bghgary, thank you!