Blurring other UI elements

To achieve the best possible performance, Translucent Image does not support blurring UI elements in arbitrary order. However, UIs in a Canvas can blur UIs in different Canvas, by using additional Cameras.

The best way to learn is by example! Check out the scene at Demo/Render Pipeline Name/00_Scenes/Demo UI Blur.unity

The idea

To understand the setup, it's useful to understand how Translucent Image works.

Translucent Images do not blur things by themselves. Instead, the Translucent Image Source component blurs the entire screen at once, then shares the result with multiple Translucent Images. This massively reduces the number of pixels that have to be blurred. It's one reason why Translucent Image is so fast.

The Translucent Image Source component "see" and blurs what the Camera they attached to render. If the Source "sees" the Translucent Images, these Images will appear in their own background, causing a feedback loop and making the Images turn opaque over time. It's important to make sure Translucent Images are not "seen" by their own Source.

So, to blur UIs, you need at least 2 Canvases: a lower one containing the UIs to be blurred, and an upper one for the Translucent Images. Then, set the Camera with the Translucent Image Source to only render the lower Canvas.

An example setup

A common use of UI blurring is for pop-up panels. The following setup lets the Translucent Images in the Main Canvas blur the scene geometries. Those in the Popup Canvas will blur both the scene geometries, as well as UIs in the Main Canvas.

An example setup. What a Camera render can be controlled using its Culling Mask property

For reference, these are the important objects and settings:

├── Popup Canvas
│   ├─ Layer: UI
│   └─ Render Mode: Screen Space - Overlay
│
├── Main Canvas
│   ├─ Layer: UI
│   ├─ Render Mode: Screen Space - Camera
│   └─ Render Camera: UI Camera
│
├── UI Camera
│   ├─ Clear Flags: Depth only
│   ├─ Culling Mask: UI
│   └─ Depth: 2
│
└── Main Camera
    ├─ Clear Flags: any
    ├─ Culling Mask: Everything but UI
    └─ Depth: 1

Performance implication

You can stack as many cameras and canvases as you like. However, with each extra Translucent Image Source you use, the GPU will have to do more work. A workaround is to disable the Source that is not the top-most. In fact, both Windows 10 and macOS do this:

Windows 10 only uses blur on the top-most UI