All materials render black on some mobile devices

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.

The solution to this would be using material precision: 'mediump' on all mobile devices as a default value. Solving this has first been suggested in 2018 by @Mugen87 https://github.com/mrdoob/three.js/issues/14570. These examples are from another thread, and I can confirm that this is an issue. Testing various devices using these two tests below confirmed it.    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   var material = new THREE.MeshPhongMaterial( { precision: 'highp' } );  https://jsfiddle.net/f2Lommf5/6722/embedded/result   IHMO is very important that 3D graphics operate flawlessly by default on all devices capable of running them, despite the bad drivers, operating systems, or browser versions.   Is anyone interested to investigate a solution to this? I am willing to test and confirm how possible solution works with various devices.

[Supernuija]

Thanks for making that change! I am sure that this change will make your excellent 3DViewer more popular on the long run, when all models will display materials, no matter what kind of mobile devices are used, and how well HW/SW manufacturers have done their work. =)

[Supernuija]

Great that you already released the fixed version!

For the time being your solution is the best on the market ; ) - and any working solution is better than no solution at all.

As I have mentioned before, in these kind of cases where different parties like HW and SW manufacturers just blame each other for something that doesn’t work, and users suffer the consequences without any possibility to do anything about it, any working solutions are worth of gold.

I perfectly understand why three.js is not eager solving this issue, and rather wish that it would go into history when ageing devices eventually vanish from the market at some point.

I am not sure if this is related to the same thing, but just recently someone had this issue: https://github.com/pmndrs/react-three-fiber/issues/1388 - which might indicate that this problem persists even in new devices, if it has to do with the same bug.

The fact is that new devices will come to market all the time, and this webgl side is still so new that QA side regarding it’s functionality drags million miles behind. We can’t control how well the others do their work, just our own end. Sometimes patching might be the only reasonable thing to do.