Depth issues when enabling a post process effect

Help & Support
21

Hmm, I tested on the same browser the example you shared and also the post process example using both antialias: true and antialias: false and both work fine and I’m getting 4 and 0 samples. No WebGL warning for the framebuffer blit.

I haven’t thought to enable antialias in the Post Process example that one does a scene grab as well so the setup should be somewhat similar.
I’m going to debug that one too and compare to what I’m getting on our side and see where’s the difference. Thanks Martin!

1 Like
22

A colleague of mine noticed that we can reproduce the same bug with PlayCanvas Examples if we:

  • load Post Effects example
  • add the line stencil: false to const gfxOptions at line 28
  • open the dev console
  • switch to WebGL2 as active device.

It will break same as in our case and it will start generating the same WebGL warnings in the console.

1 Like
23

Hey awesome find @heretique
Please create an issue on Issues · playcanvas/engine · GitHub to track this.

2 Likes
24

Will do, thanks!

25

The issue was created here: WebGL2 Graphics device creation with `stencil: false` breaks depth scene grab · Issue #5664 · playcanvas/engine · GitHub

26

So does the workaround with using the stencil when creating the device work on your side?

27

Yes, using the stencil seems to work fine on our side, we just don’t know if this is a proper fix. On the long run I guess PC should try to match the buffer formats or do some conversion.

1 Like
28

Writing the depth back to the canvas target via gl_FragDepth works for us in order to render UI after post-effects with correct depth culling. The following steps are needed:

1.) enable depth buffer access for your last post-effect
this.needsDepthBuffer = true;

2.) be sure to use glsl version 300 and add shader code to comfortable access depth

"#version 300 es\n\n" + pc.shaderChunks.gles3PS,
pc.shaderChunks.screenDepthPS,

3.) write the depth in the canvas target at the end of your fragment shader code

vec2 uv = gl_FragCoord.xy * uScreenSize.zw;
float d = texture2D(uSceneDepthMap, uv).r; 
gl_FragDepth = d;

4.) Enable depth write for the posteffect by device.setDepthState(pc.DepthState.WRITEDEPTH);

5.) Disable the device.setDepthState function before pc.drawFullscreenQuad to keep it set

3 Likes