Extrude Filter Component

Overview

This component adds an 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 extrusion. In Perspective projection mode it doesn't correspond directly to pixels but is still approximately proportional.
Fill
Mode	Enum		Bi Color	The method to use to fill the extrusion 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 Delta Time	Enum		Normal	The time delta to use when updating scrolling. Options are: • Normal: Use Time.deltaTime. • Unscaled: Use Time.unscaledDeltaTime, but use Time.captureDeltaTime if it is set.
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 accommodate this filter overflowing the original bounds. Setting this to None can be useful when 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 - Text (UI) use the Filter Stack (TextMeshPro) component.

Examples

Perspective

Orthographic

Combine Filters

Scripting

Namespace

The namespace

using ChocDino.UIFX;

Adding the ExtrudeFilter Component

Add the ExtrudeFilter component to your GameObject

// Add the component to your GameObject and set default properties
var extrude = AddComponent<ExtrudeFilter>();

extrude.BeginPropertyChange();
extrude.Projection = ExtrudeProjection.Perspective;
extrude.Angle = 135f;
extrude.PerspectiveDistance = 0f;
extrude.Distance = 32f;
extrude.FillMode = ExtrudeFillMode.BiColor;
extrude.ColorFront = Color.grey;
extrude.ColorBack = Color.clear;
extrude.FillBlendMode = ExtrudeFillBlendMode.Multiply;
extrude.ScrollSpeed = 0f;
extrude.ReverseFill = false;
extrude.SourceAlpha = 1f;
extrude.CompositeMode = LongShadowCompositeMode.Normal;
extrude.Strength = 1f;
extrude.EndPropertyChange();

Adjusting gradient color in ExtrudeFilter Component

Adjusting gradient color

// Adjust the gradient color
// NOTE: That you have to assign the whole array (GradientColorKey[] or GradientAlphaKey[]) to Gradient.  You can't just adjust the values of  the individual keys without reassigning the entire array, otherwise it will not update.
var extrude = GetComponent<ExtrudeFilter>();
var gc = extrude.Gradient.colorKeys;
gc[0] = new GradientColorKey(new Color(Random.value, Random.value, Random.value, 1f), gc[0].time);
extrude.Gradient.colorKeys = gc;