Three.js: What is three.js's normal map handedness convention?

[donmccurdy]

It may be helpful to have this documented. @emackey pointed out an issue with GLTF2Loader (https://github.com/donmccurdy/three-gltf-viewer/issues/10) and normal map inversion seems to be responsible. For comparison:

BabylonJS: x-axis = left, y-axis = down
OpenGL: x-axis = right, y-axis = up
DirectX: x-axis = right, y-axis = down

[emackey]

Has there been progress on this?

In my own projects I'm fixing this manually by setting:

    material.normalScale.x = -1;

[donmccurdy]

I haven't heard anything. It would be nice to know, but I'm inclined to just flip normalScale.x if that works correctly with the sample models.

[emackey]

The answers have been worked out by @WestLangley and @donmccurdy here: https://github.com/mrdoob/three.js/pull/13784#issuecomment-379511456

Hopefully I'm summarizing correctly:

• ThreeJS's default normal map handedness is OpenGL, right-handed, same as glTF.
• ThreeJS's default UV origin is lower-left, opposite of glTF's upper-left UV origin.
• As a result, GLTFLoader must flip the UVs and then flip the normal handedness to compensate.