UGTK / Toolkit / Ui Module / Blur System Completed

Blur System

Summary

The Blur System provides UI blur effects: a multi-mode shader blur for Image/RawImage/SpriteRenderer, a per-material _Size blur driver, a procedural outer halo mesh effect, and a screen-capture behind-blur that blurs whatever is rendered behind a RawImage.

Modules Dependencies

This module has no hard UGTK dependencies. It relies on Unity UI (UnityEngine.UI) and the blur shaders UGTK/Effects/UniversalBlurPro, UI/BehindBlur and Hidden/UIBehind/KawaseBlurBlit.

Setup

Drop the ImageBlur prefab under a Canvas (or ImageBlurShadow for the version with a drop shadow):

How To Use

Shader blur on a graphic: add Mn_ImageBlurPro to an object with an Image/RawImage or SpriteRenderer. Pick a BlurType (Gaussian, Box, Kawase, Directional) and tune radius, iterations, sampleScale (and angleDeg for Directional). With autoApply on, it swaps in a runtime material and restores the original on disable.
Material _Size blur: add Mn_UIBehindBlurValue to a Graphic using the UI/BehindBlur material. Drive blurSize from a Slider/UnityEvent via SetBlurSize(float), or enable animate to pulse between min/max.
Outer halo: add Mn_UIProceduralHalo (a BaseMeshEffect) to a Graphic to draw a soft procedural halo around it; control haloColor, gap, thickness, rings, directions and falloff.
Behind-screen blur: add Mn_UIScreenBehindBlur to a RawImage. It captures the screen region behind it and blurs it (Kawase). Choose updateMode (Once On Enable / Every Frame / Manual), downSample, blurIterations and blurSpread; call Refresh() to recapture.

Testing Scene

Open BlurScene in the module's folder and select Canvas > ImageBlur. The whole thing works with the editor stopped: change a value, press Apply(), and the Game view shows the result at once.

What to do, in order:

Set Radius to 2 and press Apply(). Raise it to 5, 12, 20, pressing Apply each time: the icon softens step by step.
Press Restore() to put the original material back.
Put the screen blur behind a moving object and press Refresh() in Play Mode.
Blur a very large texture.

Step 3 is where the cost shows: the screen blur captures through a camera, so refreshing it every frame is a different proposition from refreshing it when a panel opens. Step 4 is the other half — blur cost scales with resolution, and the down-sample setting is what keeps it affordable.

Technical Info

Mn_ImageBlurPro: swaps a runtime blur material onto a Graphic/SpriteRenderer and feeds shader keywords/params for the selected blur mode.
Mn_UIBehindBlurValue: writes the _Size float of the graphic's blur material at runtime/edit-time, with optional pulse animation.
Mn_UIProceduralHalo: mesh effect that appends offset, alpha-faded copies of the base geometry to form an outer halo.
Mn_UIScreenBehindBlur: reads the screen region under a RawImage and runs an iterative Kawase blur onto it via RenderTextures.