Skip to content

UI background blur shader for Unity 2020 URP/LWRP/2D Renderer (usable for all Render Modes)

License

Notifications You must be signed in to change notification settings

zephyo/UI-Blur-LWRP-2020

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UI Blur Shader 2020

Lightweight shader giving UI the glassy 'background blur' effect in any project with a camera that can render to RenderTexture. Screenshot1 Screenshot2 Screenshot3

Pros

  • Compatible with URP, 2D Renderer, LWRP, and Unity 2020.1 (and previous versions)
  • Performant
    • No Grab Pass/Graphics.Blit
    • Perform all math in the shader code which contains two nested for-loops of max O(Max Radius / Min Steps * 5) = 106 operations; get good results with radius = 30, step = 4, of 37 operations
  • Customizable - Play with the sliders on the UIBlur material
  • Maskable, Clippable, Tintable - Based on UI/Default shader

Cons

  • Needs camera to output to RenderTexture
  • Will only blur the background scene, not other UI

Advice

For better results but slower perf, increase radius and decrease jump size.


FAQ

How to use?

See Examples folder. All examples are the same except for the Canvas's Render Mode.

  1. Set your Camera Stack or Camera's output Texture/target Texture property to a renderTexture
  2. The screen is black now. Display the screen by:
  • Adding another camera that doesn't output to a renderTexture and culls only to UI
  • Set your UI canvas to "UI" layer; at the root (or wherever) add a Raw Image (or other renderer) that renders the renderTexture
  1. Set the "Blurred Texture" property of the UIBlur material to the render texture
  2. Set your UI component's material to the UIBlur material

Play with the properties to get the best results!

Which render modes is this for?

All of them: Overlay, Screen Space-Camera, World Space.

How to increase a parameter beyond the range slider?

Modify the Range(a, b) in UIBlur.shader of the parameter.


References

Referenced this Unity post, this Unity forums thread, and SuperBlur by PavelDoGreat in making this.


License

See LICENSE.md. Note that I removed the part about selling - if this gets on the Asset store, I'll find you 👀

About

UI background blur shader for Unity 2020 URP/LWRP/2D Renderer (usable for all Render Modes)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published