Extrude Filter Component

Overview

This component adds a extrusion effect to the UI object it is applied to.

WebGL Demo

Properties

Property	Type	Range	Default	Description
Extrude
Projection	Enum		Perspective	Which projection method to use. Options are: • Perspective - Gives a perspective illusion of 3D depth by extruding towards a focal point. • Orthographic - The extrusion is based only on an angle and direction. This option is less computationally expensive than Perspective.
Angle	Float	[0..360]	135.0	The angle of extrusion in degrees. In Perspective projection mode this indicates the angle to the focal point from the center of the source Graphic.
Perspective Distance	Float	[0..512]	0.0	In Perspective projection mode this indicates the distance along the angle to the focal point from the center of the source Graphic.
Distance	Float	[0..512]	32.0	The length in pixels of the extruson. In Perspective projection mode it doesn't correspond directly to pixels but is still approxiamtely proportional.
Fill
Mode	Enum		Bi Color	The method to use to fill the extruion with color. Options are: • Color - Fill with a single color. • Bi Color - Fill with a color interpolated between two colors based on the distance along the extrusion. • Gradient - Fill with a Gradient based on the distance along the extrusion. • Texture - Fill with a 2D horizontal gradient texture based on the distance long the extrusion.
Color	Color		Grey	The main color to fill with.
Back Color	Color		Clear	The second color to fill with in Bi Color mode.
Scroll Speed	Float	[-inf..inf]	0.0	The speed at which to animate the fill mode.
Reverse	Bool		False	In Bi Color, Gradient and Texture fill modes, this creates reverses the gradient.
Blend Mode	Enum		Multiply	The color blending mode to use for blending the fill mode with the source Graphic colors. Options are: .• Replace - Ignore the source Graphic color and just use the fill color. • Multiply Multiply the source Graphic color by the fill color.
Apply
Source Alpha	Float	[0..1]	1.0	Fades the source Graphic.
Composite Mode	Enum		Normal	Which mode to use when compositing the extrusion. Options are: • Normal - Extrusion is composited behind the source graphic. • Cutout - Extrusion is rendered with the source graphic cut out from it. • Shadow - Only the extrusion is rendered.
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.
Expand	Enum		Expand	Whether to expand the Graphic area to accomodate this filter overflowing the original bounds. Setting this to None can be useful whhen applying effects to content you want to enclose in a frame using something like the FrameFilter component.

Usage

Add this component to any GameObject that contains a UI Graphic component (eg Text, Image, RawImage, etc). The object will now render with an extrusion effect.

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 filter is rendered 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 pixel-perfect 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.
• 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)

RenderSpace Rotation Example

In the above example you can see that Canvas RenderSpace renders the filters before the transforms are applied, so the drop shadow offset rotates with text and it is only rendered once which is good for performance. In the Screen RenderSpace the filter is rendered after the transform is applies, so the drop shadow offset is not affected by the transform (both situations are valid depending on the use-case), however each time the transform is updated the filter must render which is more expensive.

RenderSpace Scaling Example

Again in this example we can see that transform affects how often the filters are rendered. This example also shows how scaling looks in the two RenderSpace modes. In Canvas mode the scaling transform is applied after the filter, so the drop shadow distance appears to scale naturally. In the Screen mode, the scaling transform is applied before the filter, so the filter is using unscaled distance values so the drop shadow offset appears incorrect when scaled as the properties are in screen-space. This is also why the FilterStackTextMeshPro component has the Relative To Transform Scale property.

RenderSpace Canvas Example

In Unity it is common to use the Canvas Scaler component to allow the UI to scale to fit different device resolutions. UIFX supports this, but there are some subtle differences depending on the RenderSpace mode used. If you don't use the Canvas Scaler component, or your device resolution is the same as the Canvas Scaler reference resolution, then UIFX will render the filters at the same resolution in both Canvas and Screen RenderSpace modes. If however your device resolution is lower than the reference resolution (eg reference is 1080p but your device is 720p), then Canvas mode will still render the filter at the same resolution before, but Screen mode will render it at half the resolution. This means Screen mode will use less texture memory and will be faster. If your device resolkution is higher than the reference resolution (eg reference is 1080p but your device is 4K), then Canvas mode will still render the filter at the same resolution as before, but Screen mode will render at double the resolution. This means Screen mode will use double the texture memory compared to Canvas, however it also means that Screen will give slightly better quality results.

For example if you have reference resolution on the Canvas Scaler set to 1920x1080 and you have a UI text object is 400x200 on the screen with a filter applied to it:

• if your output resolution is 1920x1080, UIFX will render the filters at 400x200.
• if your output resolution is 3840x2160, UIFX will render the filter at 400x200 if it's in Canvas mode because the object is still 400x200 relative to the renference resolution - but in Screen mode it will render it at 800x400 because that is the size it will be on the screen.
• if your output resolution is 1280x720, UIFX will render the filter at 400x200 if it's in Canvas mode because the object is still 400x200 relative to the renference resolution - but in Screen mode it will render it at 266x133 because that is the size it will be on the screen.

Summary

A summary of the differences:

Feature	Canvas	Screen
Adjusting local/parent transforms causes filter re-render	No (unless Canvas has pixel-perfect mode enabled)	Yes
In WorldSpace Canvas adjusting camera transform causes filter re-render	No	Yes
Best performance when using ScrollRect	Yes	No
Filter offset/direction properties affected by rotation	Yes	No
Filter offset/direction properties affected by scale	Yes	No
Filter rendering resolution scales with screen resolution	No	Yes

In general, Canvas is usually the best option in terms of balance between performance, memory usage and functionlity. If you need higher quality rendering because you are targeting higher resolution devices than your reference resolution (on Canvas Scaler component), then use Screen mode. If you need the filter offset/direction properties to always run in screen-space (ie not be affected by rotation or other transforms), then use Screen mode.