Depth Buffer in material shader

Hi @Excess, sadly I don’t have access to a Mac right now to help you debug that.

Maybe try a number of other WebGL2 samples like After the Flood to check if it is indeed a generic WebGL2 issue on the Mac.

Hi @Excess, I just stumbled on this thread while trying to figure out how get the depth buffer and realizing my toon water tutorial doesn’t work with the latest PlayCanvas editor anymore. It sounds like you and Leonidas have found a number of issues here! If you have a forked version that’s updated with some of these fixes for the depth map I’d appreciate a link here so I can update the source version.

The engine-only source code is in this repo and I welcome any PRs there too: https://github.com/OmarShehata/tutsplus-toon-water.

It sounds like perhaps this is thread is a good reference on the latest correct way of obtaining the depth buffer: Accessing Depth Buffer of a Render Target?

1 Like

@ray probably knows most about it.

We have an engine example that shows how to use the depth buffer with both WebGL1 and 2 in the bokeh DOF post process: https://playcanvas.github.io/#graphics/post-effects.html - however, the bokeh DOF post process script only works in WebGL2 in a PlayCanvas project - I am looking into why it isn’t working for WebGL1.

Requires a small engine change to fix WebGL1 depth access in editor projects: https://github.com/playcanvas/engine/pull/2657 - the editor project I used for testing is here: https://playcanvas.com/project/751022/overview/bokeh-dof

2 Likes

Hey,
found out how to access the camera depth and implement it. Mainly used code from this example.

Made a simple project with only the depth-feature here.

It uses a bit of shader chunk code, but it should be fairly simple to re-write it to only use custom shaders (basically just copy over the code from the “pc.shaderChunks.screenDepthPS” script).

2 Likes