Blur the GUI background

Hello,

Is it possible to blur the background of the BabylonJS GUI please?

I currently have one camera for the main scene and another one for the GUI as in the example below :
https://www.babylonjs-playground.com/#N4N3BJ

I guess I have to inject a buffer from the first camera into the fragment shader of the second camera to achieve this effect.
In addition, I would not like to limit myself to basic geometrical shapes.

Could you please tell me which solution I should go for?

Thanks in advance.
Have a nice day,
Kheod

https://www.babylonjs-playground.com/#N4N3BJ#2

Need to get the alpha to come through on the UI layer, but I dont have time for that. Just dropping in on my lunch break.

Maybe someone smarter than me can figure out why the alpha adds on itself.
https://www.babylonjs-playground.com/#N4N3BJ#3
Hence that fade in on play. Gotta be something with the camera not clearing afterwards or something I guess… It’s something to do with the advanceTexture I would think because if you hit play and then quickly mouseover the button it freezes the alpha.

Thanks for your feedback.

I see two problems with your approach.
You’re blurring the GUI, so the text and images on it will be impacted as well.
The camera rendering the GUI is on a different layer than the one rendering the scene so I don’t think you can blend the alpha.

Here is an example of the effect I would like to achieve:

Do a secondary pass over the camera scene that blurs it, pass the blurred scene the GUI layer and the unblurred scene to the postEffect and combine them appropriately

It’s pretty much as I thought it would be.
However, my knowledge on this subject is limited. Could you tell me (or refer me to some documentation) how to make 2 passes on the scene camera and provide this value to the GUI camera please?