Blur game when displaying UI

Unity Engine
1

Is it possible to do something like this in the new UI system ? Or do I have to use the Image Effects from Unity Pro ?

(click on the store button, for example, to see what i’m talking about)
https://dl.dropboxusercontent.com/u/29251764/gui%20demo/Simpleround/demo_simpleround.html

If anyone knows how it’s done, i would appreciate the help.

2

This is something I have been after as well. I tried a couple of solutions before but they just didnt work quite right.

3

I would like to know this as well for pausing a game pro or no pro

4

Watching for enlightenment.

5

I believe you will have to use image effects from pro in order to do this easily. Only other possible way I could think of doing this on free that could possibly function well wouldn’t use Unity’s GUI system but blur the texture of a 3d plane with transparency, so blur the texture rather than the scene.

6

this is what the user JTown achieved and it’s exactly what i’m looking for

You can see his work on the UI Screenshots topic.

998×562 397 KB

7

If you want the background to be just a simple static image:

  • Take screenshot (Texture2D.ReadPixels)
  • Assign screenshot to full screen quad, with some blur shader on that

If the background should remain “dynamic”, showing the game & moving objects, while blurred
then you need to keep taking screenshots constantly… as in this package:

8

Thank you very much, i’ll have a look into that.

If anyone else has ideas, feel free to share them.

9

There is a better way. Use a grab pass shader on the window and then offset the samples to do a blur. See the:
UI/Lit/Refraction (Pro Only) shader :slight_smile:

1 Like
10

Thanks Tim! I will check this out.

11

Could you be more specific? Is there a way for an artist to set this up without a programmer? And is this worth pursuing on mobile, relative to performance?

12

On mobile, you want to capture+blur the image one, when bringing up the UI, rather than every frame.

You can use a 2nd camera, or Camera.Render, to render the 3D content to a reduced-resolution RenderTexture, use a custom shader to blur it by blitting it to another RenderTexture, then display the result on a quad stretched to fill the screen.

Going a step further and blurring out UI canvases (e.g. UI behind a pop-up dialog) is problematic at the moment. There’s a known issue with Camera.Render, and UI scaling behaves quite undesirably if you try to render to a texture which is not precisely the resolution of the screen.