Support vertex tangents

[donmccurdy]

via @ondys –

---

A simple cube mode with normal map that simulates flat shading:
normal_map_flat-20190201T224012Z-001.zip

The cube has smooth geometry normals (no normal seams on cube edges) + a normal map that simulates flat shading.

threejs flat	babylonjs flat

Babylon.js rendering seems to work correctly but three.js produces a weird looking result (cesium viewer also seem to work correctly)

For comparison, if normal map is set to a constant value (128, 128, 255), the resulting geometry is smooth for both three.js and babylon.js:

threejs smooth	babylonjs smooth

Cube with constant normal map is here:
normal_map_smooth-20190201T224029Z-001.zip

[donmccurdy]

Testing with MeshNormalMaterial, the vertex normals look right, but the normalMap difference persists:

vertex normals only	with normalMap

[WestLangley]

Please see if you can get the OP to provide an example with a plane only.

[ondys]

OP here.
Could the issue be that the GLTF contains custom tangents that are being ignored? I looked at the normal mapping code here and it looks like three.js is computing the tangents in the shader .. but maybe I'm looking at a wrong shader.

[donmccurdy]

threejs does compute tangents in the shader, ignoring custom tangents in the model, yes. I'm not sure how to isolate whether that is the cause... omitting the tangents, will babylonjs still render correctly?

[ondys]

When I delete the tangent attribute, it introduces some color variance on the cube faces but the result still looks much "flatter" compared to three.js (see image below). Looking at the three.js code, it doesn't look like the algorithm for generating tangents corresponds to the Mikktspace algorithm prescribed by GLTF spec (in case tangents are not present). Specifically, in Three.js, tangents seem to be completely independent on vertex normals which would explain the results from above. If that's the case, the best solution would be to add support for tangent attribute to Three.js otherwise it would be rather challenging to use GLTF normal mapping.

[WestLangley]

Could the issue be that the GLTF contains custom tangents that are being ignored?

Yes. three.js ignores attribute tangents.

[WestLangley]

Related: #15428

[ondys]

Yeah, seems to be the same issues (tangents nor propagated to Three.js from GLTF and Three.js not using tangents attached to the geometry). It would be nice if this could get fixed to make three.js GLTF compliant.

[donmccurdy]

I have a branch (dev...donmccurdy:feat-attribute-tangents-v2) that appears to be working. The DamagedHelmet example (it had similar issues in the past, which we solved differently) looks fine as well. But it will take some time to test this change more thoroughly, and at the moment I don't have much bandwidth, so it could be a while before I can get to a PR.

without normal map	with normal map

[WestLangley]

Vertex tangents are 4-component, no? It appears you are treating them as 3-component.

[donmccurdy]

@WestLangley see the table under the glTF • Meshes section – the w component is a sign value (+1/-1) that can be ignored except in calculation of the binormal, to my understanding. The vertex attribute is a vec4, but vTBN only (directly) depends on the .xyz components.

[WestLangley]

The vertex attribute is a vec4, but vTBN only (directly) depends on the .xyz components.

I would say the matrix depends on .xyzw, but I see you are, in fact, using the 4th component to set the correct bi-tangent vector, which was my concern.

Since your vTBN matrix will be interpolated in the fragment shader, and will no longer be orthonormal, it may be preferable to pass varyings vec3 vNormal, vec3 vTangent, and vec3 vBitangent, instead, and construct the orthonormal TBN matrix in the fragment shader.

However it is typically done is fine...

And thanks for this! :-)

[ondys]

Thanks Don and everyone else for adding this feature so quickly!