How to Access Depth Buffer?

[mikefinch]

Right, probably depth is somewhere else. But still try to create custom render target for world layer and set up using depth.

I asked about that then layers were released, but nobody answered me.

[Leonidas]

That might be a solution, for now, you are right.

Found a hint here:

“That means calling all enable/disable callbacks. This is useful when multiple effects require a layer (e.g. particle systems wanting a depth map). Each effect would increment the counter, when activated and decrement when destroyed. So, for example, if the last depthmap-dependent particle system is destroyed, engine will no longer render the depth map.”

Layer system

@will, @Mr_F I leave it to you.

[Luke_Titley]

Hey guys, I’m really struggling to get access to the depth map. I’ve tried setting the render target of the world layer, but depending on whether I do it before the effect is added or after the affect is added I get different results. I either get a blank texture or the color texture in the depth map texture. Pulling out my hair a bit here, a depth map is a pretty intrinsic requirement for post effects, can’t understand why there are no docs for it. I’ve tried the bokeh example, it’s written to work with a depth map, but it seems to be using the color map, in place of the depth map on my machine.

Any help would be greatly appreciated.

Luke

[Luke_Titley]

okay, so I changed _createOffscreenTarget method in playcanvas js to create a depth map texture for the render target of the first post effect. All seems to work fine now. Its unfortunate I had to change the play canvas code directly to get this to work.

[Charlie_Van_Norman]

I hope I’m not spamming the forums by posting my solution everywhere, but I think it is relevant and useful since i looked through all these threads on my journey! Anyway here is a working example in 2024 of a depth buffer in a post effect shader:

Depth Buffer Post Effect Shader Example

//--------------- POST EFFECT DEFINITION------------------------//
pc.extend(pc, function () {
    // Constructor - Creates an instance of our post effect
    var ExamplePostEffect = function (graphicsDevice, vs, fs) {
        
        const vertex = `#define VERTEXSHADER\n` + pc.shaderChunks.screenDepthPS + vs;
        const fragment = pc.shaderChunks.screenDepthPS + fs;
        const shader = pc.createShaderFromCode(pc.app.graphicsDevice, vertex, fragment, 'FogShader');
        this.shader = shader;

    };

    // Our effect must derive from pc.PostEffect
    ExamplePostEffect = pc.inherits(ExamplePostEffect, pc.PostEffect);

    ExamplePostEffect.prototype = pc.extend(ExamplePostEffect.prototype, {
    
        render: function (inputTarget, outputTarget, rect) {
            var device = this.device;
            var scope = device.scope;
            scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);
            pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
        }
    });

    return {
        ExamplePostEffect: ExamplePostEffect
    };
}());

//--------------- SCRIPT DEFINITION------------------------//
var PostEffectDepthShader = pc.createScript('postEffectDepthShader');


PostEffectDepthShader.prototype.initialize = function() {
    this.entity.camera.requestSceneDepthMap(true);
    const vertShader = `
        attribute vec3 vertex_position;
        varying vec2 vUv0;

        void main(void)
        {
            vec2 aPosition = vertex_position.xy;
            gl_Position = vec4(aPosition, 0.0, 1.0);
            vUv0 = (aPosition.xy + 1.0) * 0.5;
            
        }`
    const fragShader = `
        precision highp float;
        varying vec2 vUv0;

        void main() {
            float depth = getLinearScreenDepth(vUv0) * camera_params.x;
            gl_FragColor = vec4(vec3(depth), 1.0);
        }`

    var effect = new pc.ExamplePostEffect(this.app.graphicsDevice, vertShader, fragShader); 
    
    // add the effect to the camera's postEffects queue
    var queue = this.entity.camera.postEffects;
    queue.addEffect(effect);
    
    // when the script is enabled add our effect to the camera's postEffects queue
    this.on('enable', function () {
        queue.addEffect(effect, false); 
    });
    
    // when the script is disabled remove our effect from the camera's postEffects queue
    this.on('disable', function () {
        queue.removeEffect(effect); 
    });  
};

[LeXXik]

Its a zombie thread from ancient times. Please, don’t resurrect those. A single post is enough to find it.