Three.js: MeshPhongMaterial is rendered black on Huaweï MediaPad T3

[Alexandre-Passerelle]

Device

This occur on Huaweï MediaPad T3 10 (AGS-L09) - Androïd 7 / EMUI 5.1 / Snapdragon 425 / 2Go RAM / 800x1280

Note that this issue DO NOT occur on these other devices tested on my own :

• Huaweï P8 Lite (Android 6 + EMUI 5.1)
• Huaweï P9
• HTC Nexus 9 (Android 7.1.1)
• Galaxy Tab A 2016 ( Android 7)

Description of the problem

Mesh with MeshPhongMaterial is rendered black, the sample of official documentation is concerned too.

All my test with MeshPhongMaterial do the same, whatever light used...
No problem with MeshLambertMaterial (but can't use it since it don't accept bumpMap

As an old code of mine worked, I've done many test that revealed this issue happen since version 74 of Three.js. Version 73 worked (as 72 and 71)

Warnings on Chrome console :

• three.min.js:145 : THREE.WebGLRenderer: WEBGL_depth_texture extension not supported.
• three.min.js:145 : THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
• three.min.js:93 : THREE.WebGLProgram: gl.getProgramInfoLog() --From Vertex Shader:
  --From Fragment Shader:
  

  Link was successful.

Three.js version

• [x] r73 to r86

Browser

• [x] Chrome
• [x] Cordova + XWalk
• [x] Firefox

OS

• [x] Android

WebGL report :

[Mugen87]

As an old code of mine worked, I've done many test that revealed this issue happen since version 74 of Three.js. Version 73 worked (as 72 and 71)

see https://github.com/mrdoob/three.js/issues/12592#issuecomment-343103155

It seems both issues are related in some way...

[mrdoob]

Is it this one?
https://www.amazon.com/Huawei-MediaPad-Marshmallow-Moonlight-Warranty/dp/B01LB08BH6

[Alexandre-Passerelle]

Is it this one?

It's not the Huawei M3, mine is T3 10"

see #12592 (comment)
It seems both issues are related in some way...

I will check at work today, but from my memory, no problem with Lambert...

EDIT : OK with MeshLambertMaterial

[makc]

this issue happen since version 74 of Three.js. Version 73 worked

there is a lot of going on between two versions, actually. I thought doing quick diff between the shaders will highlight it, but no. still, if you want to save yourself some time, here are the files:

r73.txt
r74.txt

(saved from following fiddles: r73, r74)

[Alexandre-Passerelle]

Indeed, the lot of differences make me crasy as i'm not familiar with shaders...
As my project is concerned, i will try to learn more about shader and blending in order to make a substitute of Phong one, because using an old version of Three is not the best solution...

The other problem is what tablets/phones are concerned by this issue...

(Please forgive my english)

[makc]

to make a substitute of Phong one

Idk if it's possible to use 3js lights in custom shader, but you could always put your lights world positions and params in uniforms by hand

[mrdoob]

Is this still an issue?

[Alexandre-Passerelle]

I haven't test last revision since we give back Huawei tablets to our client.
I'm affraid to never know the cause (Huawei GPU ? Software ? ...)
We finished the project with r73 (without AA because of some bugs i don't really understood during scene resizing on this older version).
My WebGL knowledges are too poor for more investigation on shader side.
I don't really like this workarround but no other choice, we spend many time successless yet...

Thanks you for your comments.

[EerikKivistik]

@mrdoob This still seems to be an issue and it also seems to be more widespread than it used to. We have recently started getting more and more reports from our users (3d editor on mobile devices), who are experiencing this issue. As far as I can tell, it affects all releases from r73-r91. I will see if I can compile a list of affected devices. I will also provide some sample screenshots and material parameters, that produce different results.

[mrdoob]

A list of devices (and gpus) would indeed be super helpful!

[throni3git]

Same issue on Samsung SM-T555 (Galaxy A). It does support OES_texture_float but not the filtering extension OES_texture_float_linear, whilst supporting OES_texture_half_float_linear and OES_texture_half_float.

Can textures be switched vom type=Float to HalfFloat eaysily?

[EerikKivistik]

I'll add a list of devices that my users are having issues on. I have tried to reproduce on around 30 devices and am unable to find one with the issue. What I do know is that it started happening a lot more often when people upgraded from an older version of Android to Android 7.0. Some of our users are willing to help us debug, so if you have a specific fix you want to try out, I can forward it to our users.

I'll also note, that this example fails on all of the listed devices (scene completely black): https://threejs.org/examples/?q=lights#webgl_lights_pointlights2, screenshot included.

Affected devices that I am aware of:

• Xiaomi Redmi 4A, Android 7.1.2, MIUI 9.2.6.0
• Acer Predator 8 (GT-810 rolex), Android 7.1
• LG K20 Plus (lv517), Android 7.0
• Galaxy Tab A 9.7 (gt510wifi), Android 7.1
• Moto G4 Play (harpia), Android 7.1
• Galaxy Tab E 9.6 (gtelwifiue), Android 7.1
• Galaxy J5(2016) (j5xnlte), Android 7.1
• Galaxy Tab A 9.7 (gt510wifi), Android 7.1
• HM NOTE 1LTETD (dior), Android 4.4

[EerikKivistik]

@mrdoob Is there anything else I can provide you with to help with debugging?

[mrdoob]

@EerikKivistik Not for now. That list is great. I'll try to buy one of these. Thanks!

[mrdoob]

Okay, so I bought a Moto G4 Play (XT1609). It's still on Android 6.0.1.

Not sure how to update it to 7.1, but It's interesting to see that with 6.0.1 it works fine.

[EerikKivistik]

I was wondering that myself, why this issue started spreading with Android 7.0+. There is always the chance that the users are running something like CyanogenMod, that causes this. But that is just a shot in the dark. As far as I know, it can be upgraded to 7.0 via official channels, so shouldn't be too much fiddling.

[throni3git]

For my Samsung SM-T555 (Galaxy A) with Android Version 7.1.1 and Samsung Experience version 8.5 it doesn't work. No user mod involved here.

[EerikKivistik]

Yeah, the issue seems to getting more prevalent, at this point I think we are getting a few hundred reports a week from our users. Any news on your end @mrdoob?
As a side note, I'm currently considering hot-switching all the materials out to Lambert during runtime as a dirty temporary workaround. In case someone is looking for a really awkward fix until this is solved.

[mrdoob]

@EerikKivistik The Moto G4 Play (XT1609) I bought is not receiving the 7.1 update 🙁

[nilsmoh]

@mrdoob According to Wikipedia XT1609 is the Verizon Model of this Phone.
Recently exactly this version of the Moto G4 Play should have gotten Android 7.1.1
Please try again to update your device. :-)

https://en.wikipedia.org/wiki/Moto_G4
http://www.ubergizmo.com/2018/02/verizon-moto-g4-play-android-7-1-1-nougat/

[mrdoob]

In #14137 it was discovered that changing precision to mediump solves the issue.

Could you guys try passing the precision to the material like this?

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

[EerikKivistik]

I tried with setting the renderer precision to mediump (not material) and it did start rendering in color, but it has some artifacts, I will post the image here as well from one of our users:

Would you like me to try this with materials only?

[makc]

@EerikKivistik btw, what's with the black border around "G" icon, is it normal?

[EerikKivistik]

@makc No clue, it's a screenshot sent to me by a user of our software.

[mrdoob]

I tried with setting the renderer precision to mediump (not material) and it did start rendering in color

How did you do that? 🤔

[EerikKivistik]

I think you answered that question yourself in another thread already :)

[Alexandre-Passerelle]

Thank you everyone !
The {precision: 'mediump'} has resolved our issue !

EDIT : I can't mark subject resolved...

[makc]

with some phones that need medium precision to work nice, while some other phones need high precision, what are we, app-level devs, are supposed to do?

I guess someone needs to make an utility that, given user agent, would apply fixes to materials

glslFixer = new Whatever(userAgent);
glslFixer.fixThreeJSMaterial(material);

or maybe all materials (via THREE.ShaderLib or what was that place)

[mrdoob]

with some phones that need medium precision to work nice, while some other phones need high precision, what are we, app-level devs, are supposed to do?

No idea... 😕 I think we are trying to move the shaders code to mediump...

I guess someone needs to make an utility that, given user agent, would apply fixes to materials

I don't think we can get the device info out of the user agent... 😕