Background blur on GUI

Questions
1

Hi,

I don’t seem able to find a way to make a background or layer blur using the GUI. I’m trying to get a blur between one component and it’s container background when using fullscreen GUI. Something like below:

image

I saw a post by using postprocessing on a mesh by using RenderTargetTexture, however, I wonder if there’s something for the GUI.

Thanks,

2

GUI doesn’t support blur, no. 3D GUI is technically based on meshes, so it might be helpful to use the 3D GUI instead, if possible.
Is the blurred part also GUI elements, or is it just a texture?

1 Like
3

That makes sense. The blurred part is part of the GUI elements. It is the background of the main container, controls would be over it and their own backgrounds would blend with the main container with the use of a blur effect . Something like below:

image
image1041×647 105 KB

The 3D GUI is a great option, but for easy-to-read 2D feel I’ll go with an HTML GUI instead for my current project.

I think it’d be great to have the option for a blur in 2D GUI. Do you think it is possible to implement such a functionality? If so, do you have any pointers on where I could look to maybe contribute to the source code?

4

It is pretty tricky to do and might be highly inefficient to do in the 2d gui as you would need every frame to read the content of the canvas and pass it back into the context 2d of the GUI with a filter effect when you render it.

In 3d you would render the scene in an offscreen texture, blur it and composite in the main canvas which is involved as well but at least does not have the extra unnecessary copies.

2 Likes
5

Hi Sebavan,

Sorry, I didn’t explain myself correctly. The blue image with the “ogros” in the background would just be a texture applied to the background of the main container in the 2D GUI. The white container with a bit of blur would be a child component.

6

Wait, the background is fully static and not moving ? or 3d ?

7

It is fully static, just a png.

8

I would then recommend to blur it offline fully, then it is more a matter of playing with offset and scale of the texture to position it in screen space on top of the main canvas

1 Like