Blurred Background Image for UI Toolkit

Links: Asset Store, Manual

An easy way to make blurred backgrounds. Supports all render pipelines (URP, HDRP, BuiltIn).

 

Can other UI element draw on top of the blur have emessive and bloom?

 

Hi, the blurred image is rendered as part of the normal ui just like any other element, so in that regard there is nothing special about it. If whatever you want to do works with the default ui elements now then it will also work with the blurred background.

Here is a thread about how to render stuff in front of the ui in UI Toolkit (it's tricky):
https://forum.unity.com/threads/how-to-render-3d-object-in-front-of-ui-document.1236907/

Hope this helps

 

Hi,
here an request for different blur settings for
UGUI Canvas Blurred Background .
We would need min 2, better 3 different ones.

Is UGUI CBB working with the HDRP-UI-Camera-Stacking?
https://github.com/alelievr/HDRP-UI-Camera-Stacking

 

Hi, I don't know much about this stacking project but I just downloaded it an gave it a try.

The blur is "working" in their demo scene though it does not blur any UI. So if all you need is the blurred 3D scene then yes, I think it is working. If you need the UIs to be included in the blurred image blurred then no.

Please be aware that I can not give support for third party integrations.

Here is the screenshot of my test (I put the blurred image in front so it's clearly visible):



Hope this helps

 

Thanks for testing. Is it posible that the second window is blurred to. It has not take the blur from the underlying canvas into account.

The HDRP Camera Stacking is widely used and alelievr from Unity is working on an potential implementation in HDRP based on this one.

 

Hm, I am not sure. They use "RenderPipelineManager.endCameraRendering" while my approach hooks into "CustomPassInjectionPoint.AfterPostProcess".

I admit I do not have enough knowledge (yet) on how "RenderPipelineManager.endCameraRendering" interacts wit the custom injection points. In "default" HDRP the AfterPostProcess is enough to have the blurred image contain all UI. You see this in the test video here (notice how the blur also includes the UI behind). Though this is a speciality of HDRP. It does not work like that in URP or BuiltIn.

Stack/Layering multiple blurred UI images on top of each other and blurring the UI contents behind is not in list of official supported features. To keep the blur as performant as possible I do only copy it once from the render pass (it does not do it's own rendering, nor does it use a custom shader for the UI rendering). Whatever I get from the buffer at that injection point is in the blurred image.

I'll look into it if I get some time but I can't make any promises or give an ETA. Most likely (if I take a look) I'll do it AFTER any official releases come out. Otherwise it's just too many moving parts for me to support.

I am sorry, I know that's probably not the answer you wanted but it's the best I can do right now.