Skip to main content

About UIFX - Motion Blur

Overview

What?

UIFX-MotionBlur is a new visual effect for adding motion blur to Unity's UI (uGUI) components, without using the Post Processing Stack package.

Screenshot

Why?

Adding motion blur can greatly improve the visual quality and professional appearance of fast moving UI components due to perceived smoother animation. This is especially true on large displays (eg video walls, digital signage) and text.

Unity's UI system currently doesn't have any option to render with motion blur.

At CHOCOLATE DINOSAUR we strive to create very smooth and professional motion, so we built this motion blur system to improve the quality of our UI animations and thought we'd make it available to others.

How?

Just add one of the UIFX-MotionBlur components to your UI component. That's it!

The component will track the full motion of the object (translation, rotation, scale) either at a transform level, or at a per-vertex level. A new mesh is then generated based on the motion and this is rendered in place of the original UI geometry. The effect is only applied when the object is in motion.

Features

  • Easy to use
  • Highly optimised
  • Cross-platform
  • Built-in/URP/HDRP
  • Source code included
  • Well documented
  • Well supported
  • API documentation
  • Supports TextMeshPro (TMP)
  • Doesn't require Post Processing Stack package

Usage

UI elements with fast motion appear smoother with motion blur.

Compatibility

Unity Version2023.x2022.x2021.x2020.x2019.x2018.x2017.x
Supported
PlatformWindows/UWPmacOSLinuxAndroidiOS / tvOSWebGLPS4 / PS5XBox One
Supported
Render PipelineBuilt-inURPHDRP
Supported

Dependencies

This plugin requires the Unity.UI package that is included with Unity by default.

The Asset Package

The asset package consists of the following files:

Screenshot

A demo scene is included. All scripts are grouped using Assembly Definition files.

Components

There are two components with different quality levels - MotionBlurSimple and MotionBlurReal.

While the MotionBlurSimple component is more performant, the MotionBlurReal component has much higher visual quality.

Additionally we include an extra components for TextMeshPro support: MotionBlurSimpleTMP.

General Comparison

FeatureMotionBlurSimpleMotionBlurReal
Visual QualityMediumHigh
CPU LoadLowLow
GPU LoadLowMedium

Supported Features

UI Feature        MotionBlurSimpleMotionBlurRealNotes
Components:
    Text
    Image
    RawImage
    Mask
    Rect Mask 2D
    CanvasGroup
    TextMeshProSee Notes for MotionBlurReal
    CustomSee Notes for MotionBlurReal
Canvas Render Modes:
    Screen-Space OverlayComing soon*
    Screen-Space Camera
    World SpaceComing soon*
World Space Camera Types:
    Orthographic
    Perspective
Render Pipelines:
    Built-in
    URP
    HDRP
Effects:
    ShadowMotionBlurSimple may render with flickering if Shadow effect is applied first
    OutlineMotionBlurSimple may render with flickering if Outline effect is applied first
Colorspaces:
    Gamma
    Linear
* We're working on these highly requested features.

Advanced Notes

Frame-rate Independent Notes

There is an property FrameRateIndependent which enables frame-rate independent motion blur. This option is enabled by default, and it causes scaling of the motion blur length based on the frame rate. This results in a consistent motion blur length regardless of the frame-rate. This is often desired if motion-blur is meant to be used artistically so that it looks the same at different frame-rates. With this option disabled, the motion-blur will behave more naturally - ie, when the frame-rate is low the motion blur trail will become longer, and when the frame-rate is higher it will become shorter.

UI Effects

Effects such as Shadow and Outline can be used with either motion blur effects, however for best results they should be applied after the motion blur effect.

Since MotionBlurSimple renders the motion blur quads directly to the UI, any effect (eg Shadow or Outline) that is applied will also be rendered multiple times. This can make using these effects more expensive than MotionBlurReal which only renders a single quad.

Performance

The UIFX-MotionBlur asset has had several optimisation passes, so we can say with confidence that it is highly performant for what it is doing. That said, there are some considerations that should be made. See the documented performance notes for each component.

Garbage Collection

Both components have been optimised to reduce garbage generation.

TextMeshPro (TMP) / Custom UI Components

See the notes for MotionBlurSimple.

See the notes for MotionBlurReal.