Postprocessing examples stopped working on Fairphone 2.0 (Adreno 330)

[jagracar]

Some of the postprocessing examples stopped working on my mobile.

For example, this example only shows a black screen:

https://threejs.org/examples/?q=pos#webgl_postprocessing

I had a look at the console output and I get some warnings, but I don't know if that's the problem, because the same example was working some months ago:

THREE.WebGLRenderer: WEBGL_depth_texture extension not supported.
THREE.WebGLRenderer: ANGLE_instanced_arrays extension not supported.
THREE.WebGLRenderer: OES_texture_float_linear extension not supported.

Three.js version

• Dev
• r100
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

[Mugen87]

What mobile device and what version of mobile Chrome and Android are you using? Does it also happen with Firefox?

[jagracar]

Hi @Mugen87

Chrome 71.0.3578.99 running on a Fairphone 2.0 with Android 7.1.2

I also tried Firefox and I've got the same black screen result

[jagracar]

Sorry, I just closed the issue by mistake...

[jagracar]

I have to check it again, but some weeks ago I had the same problem with an iphone. Will check later.

[jagracar]

In case it helps to understand the problem, in this example I can see the backgrounds, but the heads are black:
https://threejs.org/examples/?q=pos#webgl_postprocessing_advanced

[Mugen87]

Um, it's not the first time that users report problems in context of Adreno 300 GPUs, see #9988 (your Fairphone 2.0 has a Adreno 330 GPU). If this is actually a similar device/driver issue, there will be most likely no fix.

because the same example was working some months ago:

Maybe the problems were introduced with a system update (which also updates the graphics driver)?

[jagracar]

Thanks @Mugen87

Indeed that could be the problem. I will investigate a bit. I'm quite sure the examples were running fine in previous three js versions. I will test it and if the problem persists with older versions then the graphics driver update is probably the reason.

[jagracar]

Hi again,

I tested the example with older versions of three.js and the problem persists.

It's most probably related with the update to Android 7 that took place last November:
https://support.fairphone.com/hc/en-us/articles/208342503-Fairphone-OS-for-Fairphone-2-Release-Notes

I found this issue which indicates that OpenGL 3.0 is not enabled in that particular Android version:
https://bugtracker.fairphone.com/project/fairphone-android-7/issue/56

Thank you for help with this. If you come to Munich one day I buy you a beer!

[jagracar]

Finally! After reading your comments in #14137 i tried the proposed solution:

#14137 (comment)

and it worked nicely for me :)

It seems that the software update from Android 6 to 7 created the problem, but switching my THREE.MeshPhongMaterial to mediump resolved it.

My postprocessing examples now work fine:
https://webgl-shaders.com/badtv-example.html

Thank you everybody for your help!

[mrdoob]

@Mugen87 I guess it's worth testing what post processing shaders could work as mediump?

[Mugen87]

Yes. But desktops automatically use highp no matter what precision you set in the shader. The following fiddles represent some of our post-processing examples in mediump. Test with a Pixel 1.

Does not work:

• webgl_postprocessing (moire pattern)
• webgl_postprocessing_dof (no blur)
• webgl_postprocessing_dof2(moire pattern, wrong focus area)
• webgl_postprocessing_advanced (heads are black, background flickers)
• webgl_postprocessing_sao (occluded areas look scattered)
• webgl_postprocessing_glitch (moire pattern)

---

Does work:

• webgl_postprocessing_afterimage
• webgl_postprocessing_godrays
• webgl_postprocessing_masking
• webgl_postprocessing_outline
• webgl_postprocessing_pixel
• webgl_postprocessing_sobel
• webgl_postprocessing_ssao
• webgl_postprocessing_unreal_bloom

It seems quite a bit of work to ensure that certain shaders also work with mediump. I think a first step could be to find out why the mentioned moire pattern is produced...

[Mugen87]

Interesting. I have analyzed the dot-screen shader of webgl_postprocessing and realized that the moire pattern is not produced by the related shader code. The actual problem is setting MeshPhongMaterial.flatShading to true. So the moire pattern might be related to the derivate functions dFdx and dFdy that are used to compute the normals in the fragment shader.

I have create a new test case based on webgl_postprocessing that demonstrates the issue but without the post processing related code. Just some meshes with a flat shaded material (renderer created with mediump parameter): https://jsfiddle.net/Lpmzh70g/2/

I wonder if we should create a new issue. Something like: flatShading does not work with mediump.

[Mugen87]

BTW: The test case looks like this on my Pixel:

[jagracar]

https://www.enkisoftware.com/devlogpost-20150131-1-Normal-generation-in-the-pixel-shader

[Mugen87]

three.js already uses a value in view space for normal derivation:

three.js/src/renderers/shaders/ShaderLib/meshphong_vert.glsl.js

Line 51 in 18e4439

vViewPosition = - mvPosition.xyz;

three.js/src/renderers/shaders/ShaderChunk/normal_fragment_begin.glsl.js

Lines 6 to 8 in 18e4439

	vec3 fdx = vec3( dFdx( vViewPosition.x ), dFdx( vViewPosition.y ), dFdx( vViewPosition.z ) );
	vec3 fdy = vec3( dFdy( vViewPosition.x ), dFdy( vViewPosition.y ), dFdy( vViewPosition.z ) );
	vec3 normal = normalize( cross( fdx, fdy ) );

So it seems the article does not help in context of mediump precision issues.

[Mugen87]

Um, I've research this afternoon for a solution. Unfortunately, I found only these two approaches that would work for mobile devices (assuming mediump precision):

• Generate flat normals in a DCC tool or in JavaScript (C++/Java/whatever)
• Generate flat normals with a geometry shader (does not work with WebGL)

I found no resource that demonstrates how to use dFdx/dFdy in order to safely compute flat normals in context of mediump.