What normalScale to use when applying NormalMap on gltf mesh vs three mesh

Questions
,
1

So meshes loaded using gltf loader have normalScale of (1,-1)
the default value of normalScale in meshStandardMaterial is (1,1)

when applying a normal map from polyhaven on

  • a mesh from a gltf
    and
  • a mesh made with new MeshStandardMaterial()

is there any steps i can take so the normals look correct on both models automatically?

2

The glTF specification has a different texture coordinate convention than three.js uses by default. When assigning any texture to a material on a mesh loaded from a glTF file you’ll need to:

  1. set texture.flipY = false
  2. if the texture is a normal map and the mesh does not include vertex tangents, then you also need to make sure the Y component of normalScale is negated as shown above. GLTFLoader will do this automatically when a normal map is included in the file.

To check whether a mesh has tangents, see if mesh.geometry.attributes.tangent exists.

If you wanted to scale the normal map by 4x, normalScale would be (+4,-4) instead.

It doesn’t matter whether you create the material yourself or not — it’s the geometry that matters. Geometry loaded from glTF files requires these steps, geometry created procedurally in three.js will not. Geometry from other file formats … who knows! :slight_smile:

2 Likes