I am found after some researches in the forum that there is a posteffect available in PC in the source code (
https://github.com/playcanvas/engine/blob/9a0697c6b2cd521db510df49f90028f414006696/scripts/posteffects/posteffect-bokeh.js) and in the demos ( PlayCanvas Examples)
I want for one project to have this kind of bokeh effect but only in the background like in this picture from this previous forum post :
Where can I find a Bokeh post effect?
Did you think it is possible ?
You can try playing with the focus property to and also reduce aperture and maxBlur to get it to affect only the background.
There is also a trick by using a second camera to affect objects only on a specific layer, not sure if it’s going to look OK with bokeh, but you can give it a try:
I tried to change the rendering order of the bloom effect with two cameras. But in all the hierarchies I made, the effect that was supposed to only affect the bloom layer worked on all objects. I couldn’t solve this problem according to the example you gave.I am attaching my sample project here. What solution can you suggest me?
Leonidas’ solution is the easiest one, but it may not bend properly or be noticiable if the distance between the camera and the objects in those 2 layers is dynamic or they are close between them.
You could also access the depth buffer and edit the postteffect you shared to add it as uniform and weight the effect depending on it.
11:13AM - 08 Mar 22 UTC
01:35PM - 13 May 22 UTC
good first PR
At the moment, the engine by default creates a Depth layer, which is disabled. I
… f this layer is added to a camera, and the layer is enabled, this triggers the rendering operation (render on webgl1, copying of depth buffer on webgl2) at the point the camera gets to render the Depth layer. After this point, the depth texture is accessible to following layers.
The way to enable the depth layer is this:
const depthLayer = this.app.scene.layers.getLayerById(LAYERID_DEPTH);
and to disable:
We should expose a simple API to manage this, perhaps
CameraComponent.renderDepth = true;
Perhaps some changes could be made to how the Depth layer is integrated into the camera. By default, the layer is automatically added to the default camera. And the user is responsible for adding it to other cameras (when rendering to texture). Perhaps the renderDepth API could automatically add / remove the layer for the camera as well.
It'd be also great to create an engine example showing how to use the rendered depth in some custom shader.
I have tried that, but it seems to apply the effect in a 2D layer on top of the rendering screen.
Here are two tests with focus at -40 & aperture at 0.31 (for exaggeration) :
and focus at -60
Can you share your project? I would like to see the custom posteffect you used
It may be something related to how playcanvas renders the layers one on top of the previous too.
@Leonidas , good afternoon.
I took a look to the project and the problem was that the character was not in the depthBuffer for some reason, so nothing to do with the shader itself.
I uploaded a new .fbx and it was recognized.
Do you have any idea of what the problem may be?
In the picture you can see how the original character doesn’t show up in the right, but the big one on the back does.
I don’t share the project because it belongs to
Here another screenshot:
Hmm, not sure I’d check two things:
If the character materials have depth write disabled for some reason.
If the character is rendered on a layer ordered to render after the depth layer is rendered (e.g. transparent layers).
@Leonidas i just invited you in the project
@vogloblinsky @dadiaar I don’t have a working example of this right now, but in the past when I had similar troubles with depth of field I used something like this to add support for near/far focus (glsl):
// updated bokeh factor to make focusing easier
// camera near/far are the camera clipping distances
// dof focus and dof range are user attributes to set the effect zone
float depth = getScreenDepth(vUv0);
float cFar = cameraFar / (cameraFar - cameraNear);
float sceneZ = ( -cameraNear * cFar ) / ( depth - cFar);
float factor = clamp((1.0 / dofFocus - 1.0 / sceneZ) / dofRange * 500.0, -1.0, 1.0);
@Leonidas is it possible to have getScreenDepth source code ?