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

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: https://github.com/aframevr/aframe/issues/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: https://github.com/aframevr/aframe/issues/3523#issuecomment-391611976

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](https://github.com/mrdoob/three.js/issues/12679#issuecomment-375980801)

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: react-community/react-native-webgl#21 It has similar symptoms (black textures on Android), but pretty sure it’s a different root problem

[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.

[kenrussell]

Thanks everyone for reporting these issues under http://crbug.com/851870 and http://crbug.com/851873.

As you’ve all already seen, reduced test cases were added to the WebGL conformance suite covering these bugs in https://github.com/KhronosGroup/WebGL/pull/2663 .

If it’s possible for the Three.js community to supply test cases in a similar form in the future, including as pull requests against the WebGL repository directly, that will greatly speed up the handling and reporting of these vendor-specific issues. The conformance/rendering directory is another good one to look at for examples, as it contains many test cases which render and verify multiple frames: https://github.com/KhronosGroup/WebGL/tree/master/sdk/tests/conformance/rendering

Thanks in advance for your help.

P.S. We are upstreaming these WebGL conformance tests to the Android graphics test suite in https://android-review.googlesource.com/718028 to ensure that this bug doesn’t happen again on the Android platform.