Bokeh effect just for background

Hello,

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?

064a68ac34f43f85f4ba3592ba72032af4f5fab2_2_690x379

Did you think it is possible ?

Hi @vogloblinsky,

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:

1 Like

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.

2 Likes

@dadiaar

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.

1 Like

@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.

1 Like

I don’t share the project because it belongs to @vogloblinsky

Here another screenshot:

1 Like

Hmm, not sure I’d check two things:

  1. If the character materials have depth write disabled for some reason.
  2. If the character is rendered on a layer ordered to render after the depth layer is rendered (e.g. transparent layers).
1 Like

@Leonidas i just invited you in the project

  • Materials have depth write enabled
  • It was in the World layer, as all the other objects. I already checked.

We’ll see.

@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);
2 Likes

@Leonidas is it possible to have getScreenDepth source code ?