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

Created on 11 May 2017 · 3Comments · Source: mrdoob/three.js

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

Question

Source

donmccurdy

Most helpful comment

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.

emackey on 9 Apr 2018

👍2

All 3 comments

Has there been progress on this?

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

    material.normalScale.x = -1;

emackey on 22 Jul 2017

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.

donmccurdy on 22 Jul 2017

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.

emackey on 9 Apr 2018

👍2

Was this page helpful?

0 / 5 - 0 ratings