All materials render black on some mobile devices

[Supernuija]

Describe the bug

Testing on various mobile devices (phones and pads) indicates that depending on the drivers, GPU:s and browser versions three.js may render all objects pitch-black. Mobile device having the same GPU/processor may behave differently depending on the phone model and year; older may work while newer doesn't. The same device may operate correctly with Chrome but not with Firefox etc.

To Reproduce

Since this is due to false positive value given by three.js checking on device capabilites, there is no easy way to reproduce it without the correct hw/sw combination. Using the simple test below, it can be reproduced on all devices that have this issue.

Live example

This will show a white cube on all devices:
var material = newTHREE.MeshPhongMaterial( { precision: 'mediump' } );
https://jsfiddle.net/f2Lommf5/6721/embedded/result

This will not show a white cube on some devices, rendering it pitch-black on some phones/pads:
var material = new THREE.MeshPhongMaterial( { precision: 'highp' } );
https://jsfiddle.net/f2Lommf5/6722/embedded/result

Possible solution

One solution to this would be using material precision: mediump on all mobile devices as a default value. This has first been suggested in 2018 by @Mugen87 #14570. There has been some arguments against this as a solution, and therefore perhaps a better solution to this would be some kind of automatic pre-testing whether the device really supports highp in practise or not, e.g. rendering a white test material sample and if it fails then defaulting material precision to mediump.

Platforms (tested, but there can be more):

• Device: [Mobile]
• OS: [Android]
• Browser: [Chrome, Firefox]
• Three.js version: r126 (min-126)

[mrdoob]

Another option would be to set mediump by default and update all the required shader code so the lighting doesn't break (#14570 (comment))

Anyone up for giving a go at this? Seems like iOS is a good platform for testing this.

[Mugen87]

Too bad that it is not possible to force/emulate mediump on Desktop somehow. This would make testing much easier.

a better solution to this would be some kind of automatic pre-testing whether the device really supports highp in practise or not

Like mentioned in #14570, I'm not voting for this approach. It also seems to me that this issue a duplicate of #14570. Not sure why @Supernuija created a new one.

[Supernuija]

I opened this as a new issue, because the problem hasn't vanished anywhere, and was found already 2018. It has also been commented in one form or the other ever since on some other threads. Some may argue that this affects only a minor amount of users and devices, but if setting default to mediump would solve this for everyone I think it's worth fixing, especially when no one knows how many users this actually concern. People expect mobile devices to operate without normal PC/Linux type of tuning. In order to increase the usability of three.js on mobile side, these kind of basic issues must be fixed.

[mrdoob]

@Supernuija Would you like to give it a go?

[mrdoob]

@Mugen87

It also seems to me that this issue a duplicate of #14570.

It sure is!