Translucent Image - Fast UI Background Blur

Translucent Image brings iOS/MacOS style blur behind UI to your game at minimal cost in performance.



Features:
- Fastest blur algorithm available on the Asset Store, while still provide smooth and beautiful effect
- Adjustable vibrancy and brightness
- Customizable blur and color
- Controllable refresh rate to improve performance and save battery
- Work as you expect: masking, sliced sprite, canvas group,... are fully supported
- Source code included, with both inline XML and online documentation.
- Tight editor integration

Screenshot:




Available now on the Asset Store

WebGL/Android Demo | Doc

Support: support@letai.freshdesk.com

 

What if you have two frames with blur, and they overlap each other.

Will I still be able to see the lower frame in the frame on top (but blurred)?

 

In order to optimize for high performance, the effect is per camera. So if we want multiple layer of blur, we can use multiple camera.

As you can see in the image above, the blurred UI can blur other UI elements (the pictures). You can just set up those UI the same way as the UI on top.

Be aware that this will affect performance negatively on mobile, on PC it pretty negligible.

 

Hi, your shader looks good! I'm curious will it work fine on the consoles, and how about multiple cameras in scene (splitscreen)?

 

Hi!

I did not tested on console, but there shouldn't be any reason it wouldn't work.

Multiple camera is supported on Standard render pipeline, but split screen using the camera XYWH property is not.
What you can do is render the views onto a quad, and then render that quad using a final camera that is the source for the blur effect. This also allow a lot more customization for your split view, as it is not limited to rectangular view.

 

The asset is 50% off for the Cyber Week!

 

Any chance of world space canvas support soon?

 

At the moment world space canvas work correctly if you only need them to be on top of everything. This is can already satisfy a lot of use case.

Doing world space ui where each UI can be behind any object is certainly detrimental to performance, as each of them will need their own background to be blurred.
This go against the principle of the asset - to be fast, so unfortunately it is unlikely to be implemented.

 

I'm trying to make it work in your sample scene for the LWRP.

Placed the translucent image infront of the particle emitter:


Still gets a weird result.




Any tips on how to solve this? Thank you

 

@learningbank_al In standard RP you would do this by using a separated Camera to render the worldspace UIs (by using culling mask). In LWRP it is not possible until Unity implement stacked Camera. They said it would be sometime after 19.3 release.

Not sure why the slider knob look like that though , worked on my machine™, probably some import setting issue.

 

Just bought the asset, the blur looks really good!

In my team, we have a common setup where UI and gameplay are separated into two different scenes. This means, that I have the TranslucentImageSource on the main camera in the gameplay source and the Translucent Image within the canvas hierarchy of the UI scene. This setup generally works at runtime, but Unity is complaining that "Cross scene references are not supported" in edit mode.

@Le_Tai What would you recommend in my situation?

 

@Xarbrough Thanks!

You can read more about this issue here: https://docs.unity3d.com/ScriptRefe...SceneManager-preventCrossSceneReferences.html

This also look interesting: https://github.com/Unity-Technologies/guid-based-reference

 

Just bought this asset, but my project is setting for URP with the 2D Renderer , can you support it?

 

The 2D Renderer can't be supported at the moment due to this bug:https://issuetracker.unity3d.com/issues/urp-custom-render-pass-does-not-work-when-using-2d-renderer