Blur effect on UI

Unity Engine
1

Good night to everyone.

I’ve been watching the internet for hours without finding the solution to my “problem”.

I would like to know if it is possible to apply a Blur effect in the UI, that is, to blur elements of the UI, not only the 3D world.

To give an example, I have a panel that overlays another, and is also smaller. I added a black background with alpha, but I would like it to defocus the entire screen, leaving only the elements behind the defocused and those of the front without blurring.

Graces, I hope I have explained

2

I dont know if there’s a way to achieve that easily. My way is to capture a screenshot before you open the Panel. Apply a blur to that screenshot and place it under that panel. You can search for a shader that can be used to blur a Image.

Good luck.

3

That is a fantastic way to approach this. The reason is because it will have a minute effect on performance as opposed to doing it in realtim. That’s not to say that you can’t do it in realtime, I personally am using this plugin with tremendous success:
https://www.assetstore.unity3d.com/en/#!/content/42388

4

Hi,
Thank you for your reply. Really sorry about making that misleading reply.

I think the main reason is because capturing a screenshot with Unity’s CaptureScreenshot API is very expensive because it writes a file. I would not do it that way if actually trying to achieve the Effect.
There are two ways:

  1. Simple way using grab pass. Grab the whole screen behind the panel and blur.
  2. More complex way using image effects. Create an extra camera to render the objects excluding the panel. Blur the screen texture in OnRenderImage. Apply this screen texture to an whole-screen image as background.

I dont know how the plugin you mentioned achieves that. Maybe more effective way. It’s very appreciated if you tell me.
And if what I say is not correct, feel free to point it out. :slight_smile:

5

The asset mentioned here uses your first solution, but is really not very performant in doing so (at least when I used it 2 years ago). An extra camera might not be necessary for your second solution. Screenspace camera canvases will be incluced in the imageeffect, screenspace overlays won’t.
Saving the render to a rendertexture is not that expensive, so I would argue your first solution might be the best one. Especially because you can disable the camera afterwards if you are using an overlay canvas :slight_smile:

1 Like
6

You can actually capture screenshots without writing to disk via ReadPixels(),

1 Like