The combination of DirectionalLight and Environment Maps results in material artifacts in the Pixel 3

[jgsacris]

Description of the problem

When combining DirectionalLight and Environment Maps with GLTF models results in very noticeable surface artifacts on the 3D model when viewed on the Pixel 3

Start model with environment map and directional light:

Start model with only directional light:

Star model with only environment map:

Different model with directional light and environment map:

Three.js version

• Dev
• r116
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, ...)

Problem only seen on Google Pixel 3
The device is running Android version 10

[mrdoob]

Could you create a jsfiddle that reproduces the issue on the device?

[jgsacris]

Here is a jsFiddle where this problem can be reviewed:

https://jsfiddle.net/jg4inr/vy7qsnok/41/

[Mugen87]

I've tested the fiddle on a Pixel 1 (with Android 10) and it looks like on my Desktop. So no rendering artifacts.

[jgsacris]

We tested on two different Pixel 3's that we have in the office for development and both have this issue so it is not particular to one device. We are getting hold of a Pixel 4 and we will report the findings here.

[mrdoob]

Yes, this is a Pixel 3 issue. I've bumped on this before. Thanks for the jsfiddle! 🙏

[elalish]

Indeed, this is a problem I'm hitting all the time now in model-viewer, since I only have a Pixel 3 to test on. I think it's very closely related to a bug I fixed a few months ago by refactoring a shadow shader: #18315. It was pretty clear the shader wasn't wrong, but any small change would make this driver bug appear or disappear.

[Mugen87]

Does this issue still appear with Android 11?

BTW: The above fiddle looks good on a Pixel 4a and Android 11.

[mrdoob]

Seems like we can!

This screenshot is from a Pixel 3 running Android 11: