Screen depth artifacts on mobile (iOS / Android)

[leonidaspir]

A simple shader that calculates depth height on a plane, using the screen to world depth difference, produces visible banding on mobile.

Here is on desktop:

Here is on Android 10, Samsung Galaxy S10:

Here is on an 2020 iPad, iOS 14.3:

The shader code is pretty simple:

varying vec2 vUv0;
varying vec3 vPositionW;

void main() { 
    
    float waterDepth = getLinearDepth(vPositionW);
    float depth = getLinearScreenDepth();

    float depthDiff = clamp(pow(abs(waterDepth - depth) * 27.5 * 0.002, 0.5), 0.0, 1.0);

    gl_FragColor = vec4( vec3(depthDiff), depthDiff);
}

Project sample: https://playcanvas.com/editor/scene/1164740

It seems like a texel size / resolution issue, though we were unable to find the exact fix by overriding the internal screen depth chunk methods.

[mvaligursky]

maybe it needs

#define GL2

[leonidaspir]

maybe it needs

#define GL2

Added that to the top of the PS shader, but still the result is the same on mobile.

[mvaligursky]

how about
precision highp float;
I suspect it might default to lowp if not specified

[leonidaspir]

Added it but still the same. We thought it may be some precision issue, we even rendered to a render target on another example and messed with the texture formats to increase precision but still the same issue.

[mvaligursky]

I tried the example on Google Pixel 3A, Android 11, and also iPhone XR on 14.5, and cannot see any banding there.

[leonidaspir]

It seems to reproduce here on the following devices:

Samsung Galaxy S10, Android 10, Chrome

iPad 2020, iOS 14.2, Safari

[leonidaspir]

So issue seems to persist, tested on the following devices:

• iPhone XR, iOS 14 (WebGL 2.0 enabled)
• iPad 2020, iOS 14 (WebGL 2.0 enabled)
• Samsung Galaxy S10, Android 11

All produce the same result, interestingly when switching to WebGL 1.0 the issue is resolved. Any idea why the same shader produces a different output?

We are about to release an open alpha of our open world game, it would be great if we could solve this. On the same device/OS/browser, WebGL 1.0:

WebGL 2.0:

[willeastcott]

Presuambly there is a bug in the GL2 code path for getLinearScreenDepth:

https://github.com/playcanvas/engine/blob/master/src/graphics/program-lib/chunks/screenDepth.frag#L36

[willeastcott]

Although then I would expect the bug to happen on desktop too under WebGL 2.

[leonidaspir]

This may be related: mrdoob/three.js#18696

[leonidaspir]

Although then I would expect the bug to happen on desktop too under WebGL 2.

Yeah, I thought so. Initially I thought something with the screen size may be the issue but I wasn't able to reproduce on desktop emulating mobile screen sizes ( pixel ratio > 1).

[willeastcott]

I seem to be able to fix this by overriding the screenDepth.frag chunk and editing:

uniform sampler2D uDepthMap;

to:

uniform highp sampler2D uDepthMap;

[leonidaspir]

Confirmed, that indeed fixes the issue. Many thanks @willeastcott for the find!

[leonidaspir]

For anyone coming across this and until the fix is added to the engine, you can do the following before using the screenDepthPS shader chunk:

// --- fix precision of depth map on mobile
pc.shaderChunks.screenDepthPS = pc.shaderChunks.screenDepthPS.replace('uniform sampler2D uDepthMap', 'uniform highp sampler2D uDepthMap');

[willeastcott]

The fix for this is now deployed so you can remove the workaround from your application code. 😄