[Solved] Normal map on Android

Questions
,
1

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 normal map and the results where correct on Mobile(Android) but not on macOS.

Here is the screenshot with default normal map.

def normals
def normals1866×1342 144 KB

Normal map in above screenshot

40s_Chambray_FCL1PSC004_NORMAL
40s_Chambray_FCL1PSC004_NORMAL1024×1024 362 KB

And following is the screenshot with flipped normal map.

Flipped normal
Flipped normal1866×1338 114 KB

Normal map in above screenshot

40s_Chambray_FCL1PSC004_NORMAL_Flip
40s_Chambray_FCL1PSC004_NORMAL_Flip1024×1024 619 KB

Also, if set material side to THREE.FrontSide it fixes the problem

FrontSide
FrontSide1834×1366 145 KB

I wan’t to keep materials as THREE.DoubleSide and work with same normal map. I know there is difference between Direct-X and OpenGL coordinate system and having normal maps in one coordinate system gives you opposite results in other. But where I am confused is that why is that happening only on Android. Is it something related to OS? Or I am missing something.

I hope I have explained my problem well. Feel free to question in case you don’t understand.

1 Like