Gooey Filter Component

Overview

This component softens the edges of the UI object it is applied to by expanding and bluring the alpha channel and then applying a cutoff. This gives the appearance of the pixels melting together. Also commonly known as "blob" effect.

WebGL Demo

Properties

Property	Type	Range	Default	Description
Gooey
Size	Float	[0..32]	2.0	The radius size in pixels to expand the graphic.
Blur	Float	[0..12]	12.0	The radius in pixels of the blur.
Threshold	Float	[0..1]	0.35	The minimum alpha value at which to discard pixels.
Threshold Falloff	Float	[0..1]	0.5	How hard or soft the threshold value is.
Apply
Strength	Float	[0..1]	1.0	Strength of the effect.
Render Space	Enum		Canvas	Which coordinate system use when rendering this filter. Options are: • Canvas: Render the filter before any transforms (scale/rotation/translation etc) are applied. • Screen: Render the filter after transforms have been applied. Read more about this property here.

Usage

Add this component to any GameObject that contains a UI Graphic component (eg Text, Image, RawImage, etc).

Usage with TextMeshPro

To use this filter effect with TextMeshPro use the Filter Stack (TextMeshPro) component.

Render Space

The RenderSpace property effectively controls whether the Graphic filter is applied before or after the Transform is applied. There are two options:

• Canvas - This is the default mode for all filters. In this mode the filter is rendered to the Graphic before it is transformed into screen-space by the local Transform and by the Canvas. This means that any changes or animations to the transform (or it's parents) will not cause the filter to re-render (unless Canvas has per-pixel mode enabled), which is a performance benefit! This also means that when the Graphic is rotated, the filter will not be aware of this, so the filter will rotate as well. Imagine as drop-shadow effect.
• Screen - This was the default mode before version 1.8.0 was released. In this mode the filter is rendered to the Graphic after it is transformed into screne-space. This means that any changes or animations to the transform (or it's parents) will cause the filter to re-render which can become expensive. It has the advantage that it is possible to do some screen-aware options, such as clamping the filter to the edges of the screen, or extending an edge to the edge of the screen (for example in the Frame Filter component)

A summary of the differences:

Feature	Canvas	Screen
Adjusting transform causes filter re-render	No (unless Canvas has per-pixel mode enabled)	Yes