BabylonJS GUI Element has strange effects with depthOfField

Using BABYLON.DefaultRenderingPipeline with depthOfField creates strange effects on GUI (partly blurred).

I expected to not have multiple areas with different blurred areas.

Playground: Babylon.js Playground

This is not related to the gui but mostly more pronounced with it:

the edge bleeding with high depth changes is really hard to solve. I can not remember if @Evgeni_Popov already looked into it ?

The workaround I`m going with.

It’s kind of expected, as the GUI does not write to the zbuffer. As the dof effect is based on the depth of the currently shaded pixel, for the text over the sphere, it will take the depth of the sphere, and for the text outside it will take the far depth value. So, for the text outside of the sphere, it will blur as if it was far away, leading to a strong blur.

What you did in the 2nd PG is the right way to do it, by using a plane: the plane will write the same depth value in the depth buffer, so everything will be blurred the same way.

1 Like

Thank you for the detailed reply.