Description of the problem
Hi, I’m working with a small team on implementing a THREE scene with glTF and PBR/IBL.
It all works great except when testing on specific mobile devices we’ve come across a weird rendering issue.
It is easily reproducable (though only on some hardware!) by opening the MeshStandardMaterial example and setting the
Steps to reproduce:
- Connect Android device using USB debugging and set up Chrome Remote Device Debugging
- Navigate to the MeshStandardMaterial example
- Switch to the
vieweriframe in the console.
- Setting the material to doublesided using
scene.children.children.material.side = THREE.DoubleSide,
scene.children.children.material.needsUpdate = true
The models will appear as follows:
Is there anything we can do to provide more info? Anything blatantly obvious we’ve overlooked? Thank you in advance.
Some things of note
- Lighting the material using an
envMapis required. Both LDR and HDR envMaps are affected.
- The affected devices (as far as we were able to test!) have a Qualcomm Adreno 500 series GPU
- When removing the
normalMap, the material renders correctly (roughness, metallic) albeit without the normal map affecting the lighting 😉
- All of them
- Internet Explorer
- All of them
Hardware Requirements (graphics card, VR Device, …)
Android Device with Qualcomm Snapdragon SOC with an Adreno 500 series GPU: We’ve tested on 505, 506 and 530