HDRP Full screen blur in UI?

[dgoyette]

Short version: Has anyone found a way to put up a full screen blur, to blur their game, while placing some UI on top of it?

I was using a gaussian blur shader in the built-in renderer to put a full-screen blur overlay on the screen, for example when pausing the game. I would then put some UI elements on top of it in their own canvas. So, the game was blurred, but the UI was crisp on top. Unfortunately, that shader relies on GrabPass, and doesn’t work in HDRP.

It’s pretty easy to create a blur material from the HD Unlit.

This works well for 3D objects, but it behaves strangely for UI elements. Specifically, it doesn’t seem to honor depth when used in the UI. Here’s an example. You can see an image using the Blur shader as its material. In front of it, I have another image. This other image is in front of the blue image (lower Z position), but it ends up getting blurred.

Maybe the shader just doesn’t quite work right for UI yet with respect to depth. Even putting the two images in separate canvases and adjusting the Order In Layer doesn’t cause the Photo to be drawn on top:

[system]

Just random ideas:

Where do you want to use this? Only kind of menu-like thing? Because if it is, you can utilize two cameras, one rendering “the game”, put blur on it (post processing stack), the other one renders the UI without any effects (or only what you want).

Or in HDRP you can put a translucent object in the viewport of camera and render the UI on the top of it. On this way you can make all sorts of cool effects, like if the UI was engraved into the glass or ice or whatever.

[dgoyette]

Thanks for the two good suggestions. I’m going with the second approach, and I can confirm that UI appears properly on top of the blur material as long as the blur object is a physical object in the scene, and not a UI Image. Thanks again.

[Jick87]

Just tried out this and it seems to work correctly for me in HDRP. Might be something to check out.