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.
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.”
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
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.
2 Likes
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);
});
};
Its a zombie thread from ancient times. Please, don’t resurrect those. A single post is enough to find it.