Blur Effects

Overview

The BlurEffect component included with Nova is the simplest way to add gaussian-style blur effects (as well as optional color filters) to your Nova-built UI. The single component can be used to create background blurs, layer blurs, frosted glass effects, and more!

Note

Any texture used as an InputTexture on a BlurEffect is not modified nor written to by the BlurEffect component. This means it's safe to use a given InputTexture object across multiple BlurEffects and in other stages of your render pipeline.

Background Blur

At a high level, achieving a blurred background effect simply requires:

Providing an InputTexture containing the content of the "background" you wish to blur to the BlurEffect
- Note that the InputTexture aspect ratio should match that of the camera rendering the UI (i.e., the camera that renders the UIBlock2D attached to the BlurEffect)
Setting the BlurMode on the BlurEffect component to BackgroundBlur
- This step tells the BlurEffect component to adjust the UVScale and CenterUV on the attached UIBlock2D to match its screen space coordinates within the camera's viewport, so that the UIBlock2D renders the correct section of the background

For scenarios where the desired blurred background content is dynamic (e.g. some animating characters or objects in the game), the content can be rendered by a camera into a RenderTexture, and then that RenderTexture can be used as the InputTexture on the BlurEffect component.

Background Blur Group

BackgroundBlurGroup is a utility component included in the asset aimed at simplifying the described camera + RenderTexture configuration. On each frame the background content should update, the BackgroundBlurGroup will:

Tell the BackgroundCamera to render the scene to a RenderTexture
Tell its BlurEffects to apply their blur and color filters to the newly rendered image.

Layer Blur

LayerBlur mode provides the option to utilize the same blur and color filters as BackgroundBlur in scenarios where it's unnecessary or undesired to crop and align the OutputTexture to the camera viewport.

While in LayerBlur mode, the UVScale and CenterUV on the attached UIBlock2D will not be changed by the BlurEffect component, allowing it to be used in conjunction with Envelope, Fit, and other image scale modes.

Performance

While Nova is pleased to deliver a high-fidelity blur solution capable of running smoothly across all Nova-supported platforms and devices, blurring is a computationally-expensive process (relatively speaking) any way you slice it. Using the feature excessively or without consideration could noticeably impact an application's framerate. For this reason, Nova exposes a number of parameters on both the BlurEffect and BackgroundBlurGroup users can tune to further optimize the effect for their project's target platforms.

Broadly speaking, some key ways to reduce work when using BlurEffects are:

Minimize the number of pixels and draw calls rendered by any background cameras (e.g. increase RenderDownscaleFactor on the BackgroundBlurGroup)
Minimize the number of pixels processed by any BlurEffect (e.g. reduce InputTexture resolution and/or increase BlurDownscaleFactor)
Minimize frequency of rendering any background cameras (e.g. increase RenderFrameInterval on the BackgroundBlurGroup)
Minimize frequency of reblurring an InputTexture (e.g. increase BlurFrameInterval on the BlurEffect)

Downscale Factor
Update Frequency

Each increment of a downscale factor on both BlurEffect and BackgroundBlurGroup will reduce the number of processed pixels by 75%.

For example:

Say the main camera renders at 1920x1080
BackgroundBlurGroup with a RenderDownscaleFactor of 1 will configure the BackgroundCamera to render at (1920/2)x(1080/2), which is 960x540 (1/4th the pixels of 1920x1080), and will assign that rendered texture as the InputTexture of BlurEffect
BlurEffect with a BlurDownscaleFactor of 1 will copy the InputTexture to a temporary texture with a resolution of (960/2)x(540/2), which is 480x270 (1/4th the pixels of 960x540 and 1/16th the pixels of 1920x1080), and then will use that temporary lower-res texture in the blur algorithm.

As the BlurRadius on the BlurEffect increases, the reduced resolution from the background camera and temporary blur textures will become nearly imperceptible in the final blurred image, so adjusting the downscale factors is a simple path to massive perf-savings.

BlurEffect and BackgroundBlurGroup both have a "manual only" update options, which provide the most control over when the update operations run. In scenarios where the InputTexture doesn't update dynamically (e.g. it's not actively being rendered to by a camera in the scene), best practice to reduce work is to set BlurFrequency to ManualOnly and call blurEffect.Reblur() from any custom scripts changing the BlurEffect's properties.

For example, one option to optimize a setup such as showing a popup over a paused game where the game content behind the popup is blurred:

Set the RenderFrequency on the BackgroundBlurGroup to ManualOnly
Set the BlurRadius on the BlurEffect to 0
On the frame the popup is enabled, call backgroundBlurGroup.UpdateEffects(), which will render the background content
Animate BlurRadius on BlurEffect from 0 to 64 over a desired duration and call blurEffect.Reblur() as the BlurRadius is animating

Let's say the animation time takes 10 frames, the total cost of the background blur effect is 1 rendered frame + 10 blurred frames. Using the fully automated approach, the total cost of the effect would be much higher because the background content would continue to be rendered and blurred until the popup is closed. While the result is not identical, many may deem the blur effect worthy of the "paused background animation" tradeoff.

Note

There are other ways of acquiring already-rendered scene content across Unity's various render pipelines (e.g. Built-In, URP, HDRP), some of which may be more optimal than using an additional camera within a given scene or project. BackgroundBlurGroup is not a required piece of the BlurEffect system, so users looking to bypass the Nova-provided component in order to squeeze even more performance out of their background blur setups are welcome to explore or implement such alternatives and can continue to leverage all the BlurEffect functionality!