<p dir="auto">Using a tangent space normal map and DoubleSide phong material doesn't show lighting effects on Android Chrome.  (Desktop Chrome seems to be fine, changing to FrontSide also works)</p>
<p dir="auto"><strong>Code</strong></p>
<p dir="auto"><a href="https://gist.github.com/nbilyk/809fc2a3fc1644a72048038e01ac6468">https://gist.github.com/nbilyk/809fc2a3fc1644a72048038e01ac6468</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
const planeMat = new THREE.MeshPhongMaterial({
	map: groundTex,
	side: THREE.DoubleSide, // DoubleSide causes lighting not to be seen on android. FrontSide works fine.
});

const groundNormalText = textureLoader.load('./assets/groundNormalMap.jpg');
groundNormalText.wrapS = THREE.RepeatWrapping;
groundNormalText.wrapT = THREE.RepeatWrapping;
groundNormalText.magFilter = THREE.LinearFilter;

planeMat.normalMap = groundNormalText;
planeMat.normalMapType = THREE.TangentSpaceNormalMap;
planeMat.normalScale = new THREE.Vector2(0.8, -0.8);  // Negative scaling - normal map written for a different coordinate system.

const mesh = new THREE.Mesh(planeGeo, planeMat);
mesh.receiveShadow = true;
mesh.rotation.x = Math.PI * -.5;
scene.add(mesh);"><pre class="notranslate"><code class="notranslate">const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
const planeMat = new THREE.MeshPhongMaterial({
	map: groundTex,
	side: THREE.DoubleSide, // DoubleSide causes lighting not to be seen on android. FrontSide works fine.
});

const groundNormalText = textureLoader.load('./assets/groundNormalMap.jpg');
groundNormalText.wrapS = THREE.RepeatWrapping;
groundNormalText.wrapT = THREE.RepeatWrapping;
groundNormalText.magFilter = THREE.LinearFilter;

planeMat.normalMap = groundNormalText;
planeMat.normalMapType = THREE.TangentSpaceNormalMap;
planeMat.normalScale = new THREE.Vector2(0.8, -0.8);  // Negative scaling - normal map written for a different coordinate system.

const mesh = new THREE.Mesh(planeGeo, planeMat);
mesh.receiveShadow = true;
mesh.rotation.x = Math.PI * -.5;
scene.add(mesh);
</code></pre></div>
<p dir="auto"><strong>Expected:</strong></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/589193/104109409-263af400-5293-11eb-8b4c-0ca65588d508.png"><img src="https://user-images.githubusercontent.com/589193/104109409-263af400-5293-11eb-8b4c-0ca65588d508.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Actual:</strong></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/589193/104109421-38b52d80-5293-11eb-9349-1636a8bf7b17.png"><img src="https://user-images.githubusercontent.com/589193/104109421-38b52d80-5293-11eb-9349-1636a8bf7b17.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: Pixel 2</li>
<li>OS: Android</li>
<li>Browser: Chrome 87.0.4280.141</li>
<li>Three.js version: r124</li>
</ul>
<p dir="auto"><strong>Description of problem</strong></p>
<p dir="auto">Models appear to be washed out/metallic when they are loaded on certain Android devices.<br>
From the tested devices Google Pixel and OnePlus phones display this issue.<br>
Models are loaded in .glb format (packed with PBR textures), the scene contains an HDRI environment map.</p>
<p dir="auto">This issue may be related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="625758066" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/19479" data-hovercard-type="issue" data-hovercard-url="/mrdoob/three.js/issues/19479/hovercard" href="https://github.com/mrdoob/three.js/issues/19479">#19479</a></p>
<p dir="auto"><strong>Example Screenshots</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/31434858/103416517-cad07e00-4b8f-11eb-87e4-511caab12e78.png"><img src="https://user-images.githubusercontent.com/31434858/103416517-cad07e00-4b8f-11eb-87e4-511caab12e78.png" alt="Preview-1" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/31434858/103416597-1b47db80-4b90-11eb-8ae4-e61bf7d1eb3c.png"><img src="https://user-images.githubusercontent.com/31434858/103416597-1b47db80-4b90-11eb-8ae4-e61bf7d1eb3c.png" alt="Preview-2" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Viewers used for testing</strong></p>
<ul dir="auto">
<li><a href="https://gltf-viewer.donmccurdy.com/" rel="nofollow">https://gltf-viewer.donmccurdy.com/</a> (r123)</li>
<li><a href="https://gltf.insimo.com/" rel="nofollow">https://gltf.insimo.com/</a> (r88)</li>
</ul>
<p dir="auto"><strong>THREE.js Versions tested</strong></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r123 (issue appears)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r121.1 (issue appers)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r88 (works correctly)</li>
</ul>
<p dir="auto"><strong>Browser</strong></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> FireFox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<p dir="auto"><strong>OS</strong></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<p dir="auto"><strong>Devices used for testing</strong></p>
<ul dir="auto">
<li>Google Pixel 4a (Android 11, 2 separate devices) - issue appears</li>
<li>Google Pixel 4xl (Android 11) - issue appears</li>
<li>OnePlus 6 (Android 10) - issue appears</li>
<li>Samsung Galaxy Note 9 (Android 10)</li>
<li>Samsung Glaxy S20+ (Android 10)</li>
<li>Samsung a50 (Android 9)</li>
</ul>