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.
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
- Smoother Motion
- Strength 0.0
- Strength 1.0
UI elements with fast motion appear smoother with motion blur.
Strength set to 0.0 to disable the effect.
Strength set to 1.0 for normal motion blur.
Compatibility
| Unity Version | 6.x | 2023.x | 2022.x | 2021.x | 2020.x | 2019.x | 2018.x | 2017.x |
|---|---|---|---|---|---|---|---|---|
| Supported | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ |
| Platform | Windows/UWP | macOS | Linux | Android | iOS / tvOS | WebGL | PS4 / PS5 | XBox One |
|---|---|---|---|---|---|---|---|---|
| Supported | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Render Pipeline | Built-in | URP | HDRP |
|---|---|---|---|
| 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:
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
| Feature | MotionBlurSimple | MotionBlurReal |
|---|---|---|
| Visual Quality | Medium | High |
| CPU Load | Low | Low |
| GPU Load | Low | Medium |
Supported Features
| UI Feature | MotionBlurSimple | MotionBlurReal | Notes |
|---|---|---|---|
| Components: | |||
| Text | ✓ | ✓ | |
| Image | ✓ | ✓ | |
| RawImage | ✓ | ✓ | |
| Mask | ✓ | ✓ | |
| Rect Mask 2D | ✓ | ✓ | |
| CanvasGroup | ✓ | ✓ | |
| TextMeshPro | ✓ | ✗ | See Notes for MotionBlurReal |
| Custom | ✓ | ✓ | See Notes for MotionBlurReal |
| Canvas Render Modes: | |||
| Screen-Space Overlay | ✓ | ✗ | Coming soon* |
| Screen-Space Camera | ✓ | ✓ | |
| World Space | ✓ | ✗ | Coming soon* |
| World Space Camera Types: | |||
| Orthographic | ✓ | ✓ | |
| Perspective | ✓ | ✗ | |
| Render Pipelines: | |||
| Built-in | ✓ | ✓ | |
| URP | ✓ | ✓ | |
| HDRP | ✓ | ✓ | |
| Effects: | |||
| Shadow | ✓ | ✓ | MotionBlurSimple may render with flickering if Shadow effect is applied first |
| Outline | ✓ | ✓ | MotionBlurSimple may render with flickering if Outline effect is applied first |
| Colorspaces: | |||
| Gamma | ✓ | ✓ | |
| Linear | ✓ | ✓ |
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.