Hi, I have a GLB hair model which has normal maps looking incorrect in ThreeJS canvas. It looks all fine in Blender, and the normal map itself looks smooth and fine. However, when I load the GLB into the scene I can see some very sharp seams on some of the parts of it. I tested with normalMapType as ObjectSpaceNormalMap, it looks smooth but ofc light reflections become wrong in this case.
Here is the code sandbox for the issue: fervent-hooks-9sll3l - CodeSandbox
In Blender:
In ThreeJS:
Maybe there is texture hair. Then using standard material
gltf.scene.children[0].material=new THREE.MeshStandardMaterial();
The issue is directly related to the normal map. The GLB model is already loaded with Mesh Standard Material with the normal map in it. Also, there is no diffuse map in it by design.
Your geometry doesn’t seem to have tangent attribute for tangent space normal map. You can compute one by computeTangents. Try:
gltf.scene.children[0].geometry.computeTangents()
Thank you @avseoul this actually does help!
Very interestingly I tried to make the same example on r3f and React, which is my actual use case. And I see normal is correct but my colleagues who tested it on different browsers still get the seams.
