solved Materials black on Lenovo pad

[E.A.]

A friend has a Lenovo TB-X304F (https://support.lenovo.com/tw/en/solutions/pd105081)

Running Android 7.1.1 and (should be) latest version of Chrome.

For some reason all materials are just black, any obvious noob mistake?

Friends pad:

 

Everything else I tried it on:

Code: https://rawgit.com/AlexanderssonErik/08262/master/GL.html (enable popups and reload)

If I look at the “stats” in the “inspector” I can see that the following isn’t enabled (that is enabled on my PC) on the Lenovo Pad: Compressed Textures, Fragment Depth, Draw Buffers. Can’t find any errors, what should I look for?

 

Cheers,

Erik

[brianzinn]

Hi Erik - Looks like a really interesting game.  If you are using compressed textures, there is a PG to test what is supported here:
https://doc.babylonjs.com/resources/multi-platform_compressed_textures#the-solution

Generally BabylonJS has fallback mechanisms for down level devices.  Sometimes we have to dial back our scenes.  Were you able to narrow it down to a playground?

[Guest]

Yes a playground could definitely help here

[Pryme8]

are you using custom shaders?

[E.A.]

Thank you brianzinn, Delakosh and Pryme8. It is a hobby project that has gone a bit overboard, where we have physical “LEGO blocks” that can be tracked in space – basically a 3D sculpturing display... Babylon.js and Web Bluetooth seems to be two very attractive methods to simplify deployment and lowering the threshold for creating content.

I managed to find a phone that has a similar problem. For this unit the https://playground.babylonjs.com/ also renders the sphere and the ground black

ZenFone ZB555KL (https://www.gsmarena.com/asus_zenfone_max_(m1)_zb555kl-9097.php)
Android: 8.0.0
Chrome: 68.0.3440.91

Are there some GPUs that are not supported by Babylon.js, or some setting somewhere that might cause this? 

I don’t think that I use any custom shaders, is https://playground.babylonjs.com/ using custom shaders?

[Pryme8]

Can you link me to the PG, if its sensitive script you can pm me.

[Guest]

Babylon.js will rely on webgl so if webgl is not supported or badly implemented then Babylon.js cannot run. 

[Hersir]

Hi, @E.A. are you using PBR material ? I found out that `Mali-G71` with webgl 2.0 cards have issues with it on some android versions, reported it here.

If so you could try to force webgl 1.0 on these devices

[E.A.]

Thank you Pryme8, Delakosh and Hersir.

 The standard Babylon.js playground ( https://playground.babylonjs.com/ , just the sphere and ground) doesn’t work so my assumption would be that it isn’t related to any exotic features. The devices that have problems are in no way top of the line, but also not ancient ..

Samples from here seems to work: http://webglsamples.org/

Some samples from here seems to work and some doesn’t seem to work: https://threejs.org/examples/

 

I tried using WebGL1.0 but the problem remains.

This would be the way to do it?

var engine = new BABYLON.Engine(canvas, true, {disableWebGL2Support: true });

Any other way of dialing back settings?

 

One thing that I can see is that if I turn off “Lights” in the “Inspector” it seems to give similar results

Cheers,

Erik

[E.A.]

Seems like none of the light sources are working. However, materials with emissiveColor is working.

 

Might this be the "same" issue:

https://github.com/mrdoob/three.js/issues/12592

https://github.com/mrdoob/three.js/issues/12679

https://github.com/mrdoob/three.js/issues/14137

 

 (?) somehow it can be fixed in three.js by changing the precision of the materials..

var material = new THREE.MeshPhongMaterial( { precision: 'mediump' } );

var material = new THREE.MeshStandardMaterial( { precision: 'mediump' } );

 

Is there something similar in Babylon.js?

 

[Sebavan]

Could you try after instanciating the engine to call :

engine.getCaps().highPrecisionShaderSupported = false;

This should put all your shader in mediump ?

 

[E.A.]

Great!

A thousand thanks Sebavan!

engine.getCaps().highPrecisionShaderSupported = false; seems to have solved the problem.

No light: https://playground.babylonjs.com/

OK: https://playground.babylonjs.com/#T7UUGI#1

 

Seems like something is fishy with Adreno 308(?).

Devices not working w/o disabling highPrecisionShaderSupported:

Device	Android	Chrome	CPU	GPU
Lenovo TB-X304F	7.1.1		Snapdragon™ MSM8917 64-bit  (Quad-Core; Up to 1.4 GHz)	Qualcomm® Adreno™ 308
ZenFone ZB555KL	8.0.0	68.0.3440.91	Quad-core 1.4 GHz Cortex-A53 Octa-core 1.4 GHz Cortex-A53	Adreno 308 Adreno 505

 

Do anyone else have the same problem?

Anyone have a good strategy for detecting this? So that not all devices has to run with highPrecisionShaderSupported set to false.

 

Cheers,

Erik

[Sebavan]

We could add a special rule for those GPUs

Could you proved us the information returned by engine.getGlInfo()

[E.A.]

So far I've only been able to get the guy with the ZenFone ZB555KL to check engine.getGlInfo()

Note that it say WebGL 1.0

https://playground.babylonjs.com/#DMAFXF