MotionBlurSimple Component

Overview

This component adds an approximate motion blur effect to UI objects that are in motion.

WebGL Demo

Properties

Property	Type	Details
Update Mode	Enum	Which vertex modifiers are used to calculate the motion blur. Which vertex modifiers are used to calculate the motion blur. Options are: • Transforms - Only use transform modifications (translation, rotation, scale), this is the simplest. (DEFAULT) • Vertices - Only use vertex modifications. • TransformsAndVertices - Use both of the above, this is the most expensive.
Sample Count	Int	The number of motion blur steps to calculate. The higher the number the more expensive the effect. Default is 16.
Blend Strength	Float	Controls how transparent the motion blur is. Default is 2.5.
Frame Rate Independent	Bool	Allows frame-rate independent blur length. This is unrealistic but may be more artistically pleasing as the visual appearance of the motion blur remains consistent across frame rates. Default is enabled.
Strength	Float	Controls how visible the motion blur effect is by scaling the motion blur length. Setting to zero disables the effect. Above 1.0 will exagerate the length. Default is 1.0.

Usage

Add this component to any GameObject that contains a UI Graphic component (eg Text, Image, RawImage, etc). The object will now render with motion blur when it moves.

Quality Notes

• This component has faster rendering than the MotionBlurReal however it is less accurate. For most cases this approximate is good enough.
• MotionBlurSimple is a great approximation for solid objects, but for transparency objects it is less accurate and the MotionBlurReal component should be considered. When using this component with transparent objects, the background color can affect this approximation, and so the BlendStrength property needs to be set based on the brightness of the object being rendered and the color of the background. The more transparent the object is, the lower the BlendStrength value needs to be.

Effects Notes

• When using the built-in Shadow component, it will cause problems due to dark transparent layer under opaque layer, which causes flickering. Therefore when using Shadow component it's better to put it after this component.

How it Works

Within the MotionBlurSimple component the following takes place each frame:

1. Store the mesh and transforms for a UI component for the previous and current frames.
2. Generate a new mesh containing multiple copies of the stored meshes interpolated from previous to current mesh.
3. Replace the UI component mesh with the new motion blur mesh with a reduced per-vertex alpha (BlendStrength property).
4. If no motion is detected then the effect is disabled.

TextMeshPro (TMP)

The component MotionBlurSimpleTMP supports TextMeshPro and is easy to use.

To use this component with TextMeshPro you first need to have the support for TextMeshPro enabled:

1. Make sure TextMeshPro package is added to your project
2. Go to the Edit > Project Preferences window and open the UIFX options, enabled TextMeshPro Support and press the Apply Changes button.
   
   
3. Wait for the scripts to reload
4. Close the Preferences window

Custom UI Components

Any custom UI component will work with MotionBlurSimple as long as it renders using the standard Graphic mesh.