Importing GLTF PBR material with normal map renders dark on Chrome for Android (only)

I discovered something weird when importing a GLTF scene created in Blender into threejs:

My demo scene shows 4 spheres from top to bottom:

  1. MeshStandardMaterial created programmatically
  2. MeshStandardMaterial + normal map created programmatically
  3. MeshStandardMaterial created in Blender
  4. MeshStandardMaterial + normal map created in Blender

1 + 2 and 2 + 4 are supposed to look the same and they actually do on all Desktop browsers and on iOS Safari. On Chrome (v. 85) for Android (v.10) on my Oneplus 5 however sphere 4 renders way to dark.

Inspecting the material settings everything looks good. I also suspected the material becoming reflective but adding an envmap does not show any reflections.

Anyone came across something similar?

Codesandbox:


Codesandbox Demo:
https://jwsi9.csb.app/

Screenshot from Desktop:

Screenshot on Chrome for Android:

Material setup in Blender:

Possible duplicate of:

1 Like

@Mugen87 Brilliant!

My Oneplus 5 indeed features an Adreno GPU that exposes the bug.

Computing tangents via BufferGeometryUtils.computeTangents() fixes the issue as mentioned in the thread you linked.

I initially discovered the problem using @google/model-viewer that uses three under the hood but does not expose its API. There the problem can be worked around by including tangents in the GLTF file while exporting from Blender.

2 Likes