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

[hm711]

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:

gltf-import-normalmaps - CodeSandbox

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

Screenshot from Desktop:

Screenshot on Chrome for Android:

Material setup in Blender:

[Mugen87]

Possible duplicate of:

[Solved] Normal map on Android

I am having problem with normal maps on Android(9.0.6 oxygen OS) Google Chrome (84.0.4147.125). I have a model in glb format that I load from GLTFLoader in my code. The problem is when I open my app on mobile directional light doesn’t work as expected only when there is a normal map is enabled. Contrary to this the model loads fine and light works correctly on macOS(10.15.4) Google Chrome (84.0.4147.135). I thought it might the problem with the normal map coordinate system. So, I inverted the n…

[hm711]

@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.