Textures Rendered as Black on (some?) devices with Android 7+

[gabrielgrant]

Description of the problem

Three.js Standard Material textures are rendered as solid black. eg https://threejs.org/docs/scenes/material-browser.html#MeshStandardMaterial doesn't work with the inital settings (appears all black).

Changing background color to something other than black reveals the object as a black silhouette (despite it's initial material being set to a non-black color).

Interesting, changing the material to have an emissive color seems to work fine

Not sure if this is problem caused by one of the two texture warnings I'm seeing? (visible in those screenshots' consoles)

three.min.js:35 THREE.WebGLRenderer: WEBGL_depth_texture extension not supported.
three.min.js:35 THREE.WebGLRenderer: OES_texture_float_linear extension not supported.

This doesn't appear to be a problem with all WebGL texturing, though -- https://fltr.world/ (simple texture demo implemented with three.js shaders) works fine, as does https://webglsamples.org/aquarium/aquarium.html

I'm seeing this using Chrome 66.0.3359.158 with LG's stock Android 7.0 (version M21010v; January 1, 2018 security update) with on both my LG Aristo (LG-M210) and my LG Fiesta (LG L63BL)

Also reported in A-frame here: aframevr/aframe#3523
And here: https://stackoverflow.com/questions/40010080/scene-rendering-black-when-entering-vr-mode-in-a-frame

Browser

I've only tested on Android's Chrome, but it has also been reported on (the Android version of) Firefox and the default Android browser: aframevr/aframe#3523 (comment)

OS

Android 7+

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

Relevant Android device running Android 7+. Reported to be reproducible on:

• LG Aristo (LG-M210) (by me)
• LG Fiesta (LG L63BL) (by me)
• Motorolla Moto G3
• Samsung Galaxy J3 Mission (SM-J327VPP)

Edit: if this is indeed the same issue as that reported in #12679, then the following devices also exhibit the problem:

• Huaweï MediaPad T3 10 (AGS-L09) - Androïd 7 / EMUI 5.1 / Snapdragon 425 / 2Go RAM / 800x1280
• Samsung SM-T555 (Galaxy A)
  [- 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](MeshPhongMaterial is rendered black on Huaweï MediaPad T3 #12679 (comment))

And the following do not:

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

However the issue does not seem to appear on:

• Samsung Galaxy J3 (SM-J327T) also running Android 7.0
• Pixel 2

I have several devices that exhibit the failure. Happy to either run test cases or supply one to test if someone wants to work on this who is located in the SF Bay area.

In searching, also found this issue: rnc-archive/react-native-webgl#21 It has similar symptoms (black textures on Android), but pretty sure it's a different root problem

[gabrielgrant]

Other materials tested:

• MeshBasicMaterial works
• MeshDepthMaterial works
  
• MeshLambertMaterial works:
  
• MeshPhongMaterial does not work:
  

Let me know if there are any other in particular i should try out

[WestLangley]

possibly related: #12679, #12592

[gabrielgrant]

@WestLangley ah, thanks, good catch. Not sure how I missed those. The first one sounds likely to be the same issue. The second one sounds similar, but slightly different (Happens on Android 5.1.1 on Atom devices, whereas this seems to just be v7+ and MeshLambertMaterial doesn't work for that reporter, whereas it does for me)

@mrdoob I see you were looking for a device that exhibits this failure. I have several here in SF. Looks like you're here too, so happy to drop one off for you (or anyone else equipped to work on this) to test on. Pinged you in three.js slack if you'd like to coordinate that

[gabrielgrant]

It seems most of the devices on which this has been reported use the Qualcomm Snapdragon 425*. So the issue may have something to do with that chip's Adreno 308 GPU. The one strange datapoint is that the issue was reported to not appear on one particular Samsung Galaxy J3 (SM-J327T) also running Android 7.0

*: FWIW this chip seems to be using in most common low-/mid-range Android devices available in the market these days

[Usnul]

Possibly texture unit limit. Alternatively, number of uniforms limit. Could you perhaps check these numbers on your devices?

[gabrielgrant]

@Usnul Here's the relevant info from webglreport.com. Looks like 16 (vertex)/16 (fragment) shaders, and 256 (vertex)/224 (fragment) uniforms. I only posted shots from the Aristo, but the result looks basically identical on the Fiesta (unsurprising, given it's using the same Adreno 308 GPU). Lemme know if there's anything else that would be helpful in tracking this down

[Usnul]

@gabrielgrant
No, all looks fine to me. Like you said. So, not the uniform/texture limit :)

[gabrielgrant]

@Usnul definitely worth checking -- it was a good theory! :)

[gabrielgrant]

I'm still at a bit of a loss as to how to continue debugging this. Any more guidance as to what I could be looking into to get this fixed?

[Mugen87]

Can you please make a test with an older release of three.js?

https://github.com/mrdoob/three.js/releases/tag/r73

R74 refactored the GLSL code for lights. Maybe this change is the cause for your rendering problems.

[gabrielgrant]

@Mugen87 ah, that makes sense, thanks for the context. is there any chance the official demos using the r73 are still available somewhere?

[gabrielgrant]

Ok, just checked it out locally. There doesn't seem to be a MeshStandardMaterial in this version*, but the MeshPhongMaterial (which was also broken in the latest release) does indeed seem to work in r73:

and is broken as described in this issue in r74:

• Edit: Indeed, appears MeshStandardMaterial was added in r74: Inital PR for MeshStandardMaterial #7381

[Mugen87]

I think we can definitely say that the mentioned refactoring broke the lighting shader code for certain platforms. I suspect it's because of the usage of arrays with structured uniforms (see #12592 (comment) and 74d3aa3).

I'm not sure how we should proceed since the problem is clearly hardware/driver related. Does the following conformance test work on your device?

https://www.khronos.org/registry/webgl/sdk/tests/conformance/glsl/misc/shader-with-array-of-structs-uniform.html?webglVersion=%5Bobject%20Object%5D

[gabrielgrant]

Yup, seems to pass:

[Mugen87]

Um, okay. I've created an other reduced test case. Can you see both red and blue planes on your devices?

https://jsfiddle.net/f2Lommf5/6715/

[gabrielgrant]

A little cramped to see on mobile,but yes,it appears to work on this device:

[Mugen87]

We need to isolate the part of the shader which is executed differently on your device. Then we have a real chance that browser implementers can validate the issue. If array with structured uniforms are not the actual problem, it must be something different...

[gabrielgrant]

Makes sense. Certainly happy to run whatever tests you can suggest to isolate the problem

[gabrielgrant]

Not sure if it will help, but currently running the full suite of conformance tests on another device with the same snapdragon processor/gpu that is exhibiting this same problem

[Mugen87]

Do you see the white box in this example. It just has a single point light (the material viewer in the documentation has three).

https://jsfiddle.net/f2Lommf5/6718/show

[gabrielgrant]

The full, multi-pane fiddle is again pretty hard to make out on mobile, but it seems to be just black. here's the fiddle result as a standalone page:

[Mugen87]

Okay, let's see if a different precision qualifier makes a difference. We are now using lowp for the phong material. Any improvements?

http://jsfiddle.net/f2Lommf5/6720/embedded/result

[gabrielgrant]

Yup, that seems to work:

[Mugen87]

Really?!? What about mediump?

http://jsfiddle.net/f2Lommf5/6721/embedded/result

[gabrielgrant]

Weird, that does too... I thought mediump was the default...?

[Mugen87]

No, it's highp if the platform supports it. Okay, one last test. We now set explicit highp. This should not work, right?

http://jsfiddle.net/f2Lommf5/6722/embedded/result

[gabrielgrant]

Confirmed:

[Mugen87]

Many thanks for your feedback! We definitely made some progress in this issue. Can you please post your device name, GPU, OS and browser you have tested with right know? This could be useful for further investigation.

The problem is we still don't know at which place in the shader the bug happen. But it seems to be related to the usage of high precision.

[AytoMaximo]

Hi! Are there some updates? Still getting black object on Android device

[Mugen87]

No updates so far, sorry. A fix for this in the library is complex and probably not doable without any visual restrictions. Read #14570 for more information.

[bhouston]

I think we should just make materials work with mediump. I think it isn't impossible. Probably just 3 or 4 math equations in glsl to update. And other libraries do it, so there should be hints there either in PlayCanvas, Babylon or Filament.

[AytoMaximo]

Suddenly new info: my iPhone XR has the same issue. iPad Air 2, for example, is OK.

[WestLangley]

@AytoMaximo Can you provide a link to a simple example for which your iPhone is rendering black?

[AytoMaximo]

@AytoMaximo Can you provide a link to a simple example for which your iPhone is rendering black?

I need some more time for tests. I've created a light version of my app for you, but it works fine on XR and I don't know why. I'll write you back about the investigation results later :)

[AytoMaximo]

This is true madness. First of all - iOS black texture problem happens only in Chrome (not Safari!).
Also, we can't reproduce the error for sure. You just update the page over and over and you textures are black or normal again... and after a lot of attemps it suddenly become stable. I can open the page from my device and it'll be black, but at the same time another device works fine.

The only info I can provide:

1. http://aytomaximo.ru/fctor/simple-player/ - the link

2. the warning from chrome://inspect

WARNINGTHREE.WebGLShader: gl.getShaderInfoLog() fragment WARNING: 0:384: Overflow in implicit constant conversion, minimum range for lowp float is (-2,2)

[cailven]

the issue is appered ,but 'mediump' doesnt work.I really confused.
and I don‘t use MeshPhongMaterial ,I just use shaderMaterial.

[mrdoob]

@cailven what device is that with?

[kierangilliam]

Same with me. On an iPhone 7, iPhone 8, and iPhone 11 I get the expected results. On iPhone 8s, iPhone X, iPhone Xs, and iPhone Xs Max I get a black screen. I'm not sure if my specific problem is related to materials, though. I was using MeshLambertMaterial a couple of weeks ago on an iPhone Xs Max without any issues. Since then I introduced something that makes the viewport go black and hadn't been thoroughly testing all different iPhone models. I'll look through my commit history and report back if I find the breaking change.

[kierangilliam]

I found the line that caused black screens on the aforementioned iPhone devices:

renderer.setPixelRatio(window.devicePixelRatio)

Here is my full renderer setup for reference.

function setupRenderer(shadowsEnabled: boolean): WebGLRenderer {
    const renderer = new WebGLRenderer()
    
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.gammaFactor = 2.2    
    renderer.physicallyCorrectLights = true
    renderer.outputEncoding = sRGBEncoding
    renderer.toneMapping = ACESFilmicToneMapping
    // renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setClearColor(Colors.SKY, 1)

    if (shadowsEnabled) {
        renderer.shadowMap.enabled = true
        renderer.shadowMap.type = PCFShadowMap
    }
    
    return renderer
}

Any ideas around this to allow a higher resolution (pixel ratio) without breaking usage on certain devices?

[WestLangley]

@kierangilliam It is best if you post a new issue linking to the simplest, live example that reproduces the problem. Also, try disabling shadows.

[CreaticDD]

I notice this issue is Closed, but I'm still having this pop up in r114 on
iPhone 11 (!)
Lenovo TB-X104G running Android 8.1.0

Using MeshBasicMaterial seems the only real solution - tried 'mediump', but didn't work.

Any updates on this, or a current issue?

Thanks

[CreaticDD]

Update:
Managed to update to r117 - MeshPhongMaterial still problematic.

Precision: 'mediump' introduces a strange effect on the iPhone 11, but solves the issues on the Qualcomm Aldreno 304 tablet

MeshLambertMaterial (default precision) does seem to be the most stable solution after testing