UDN
Search public documentation:

MaterialMasks
日本語訳
中国翻译
한국어

Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 Home > Materials & Textures > Material Masks

Material Masks


Overview


This tutorial covers a method for creating masks, edges and gradients using Material expressions instead of textures.

While there are advantages to using textures, such as a wider variety of possible mask shapes and usually fewer Material instructions, algorithmically designed expression masks also have a few benefits of their own.
The advantages to using algorithmically designed expression masks includes: smaller package size due to the absence of textures; the ability to quickly modify the mask in the Unreal Editor; animated masks using various Material expressions including Panner, Rotator, Sine, Time, etc.; and Kismet control over various mask properties.

These algorithmic masks can be used in standard texture-based Materials to provide opacity/transparency masks; to mask off a specific area of a texture to change its specular amount or specular power; as a mask for a LinearInterpolate expression to mix multiple textures together; or even just to create a Material that is a gradient color set for effects.

The Basic Building Blocks


The algorithmic masks are constructed using a small set of various building blocks. Each of these will be explained in detail including an image of the Material expressions.

The main source for the mask is created using a DotProduct expression connected to provide a basic grayscale gradient.
The DotProduct expression requires two inputs both with the same number of "channels", which is two channels per input in this specific case, using a TexCoord providing U and V and a Constant2Vector providing R and G.
The DotProduct operation takes these two sets of values and returns a scalar quantity, which generates a sequence of values resembling a gradient when appropriate input values are used.

The TexCoord expression connected to the DotProduct's A node defaults to UV values of 1.0, which provide a smooth gradient when combined with the B node values of 0 and 1.

GradientSource.gif

Changing the TexCoord UV values will change the gradient. However, this is better accomplished by changing the values of the Constant2Vector expression connected to the B node instead.

GradientSourceU2.gif

The Constant2Vector expression connected to the DotProduct's B node provides the second pair of values used to compute the scalar quantity. By using values in the range of 0 to 1, the DotProduct expression will produce a gradient whose gray value ranges from 0 to 1.
Setting the Constant2Vector values to R=0 G=1 will create a vertical gradient. R=1 G=0 values will create a horizontal gradient. R=1 G=1 values will create an angular gradient. Using -1 values will create additional variations but are usually less useful.

GradientDirections.gif

For Materials, a value of 0.0 is black and a value of 1.0 is white. Values higher than 1.0 "push" the color into bloom. This feature can be utilized in algorithmic masks in order to change the percentage of gradient versus solid, providing smaller gradient ramps or soft feathered gradient edges.
Setting either of the Constant2Vector's RG properties to a value greater than 1 will modify the amount of gradient range from black to white, decreasing the gradient percentage and increasing the white percentage. A ConstantClamp expression can be added to the output to clamp the range back to 0 to 1.

GradientMultiplier.gif

In order to create masks with a solid edge instead of a gradient, a Subtract expression is used to set the amount of solid black area, and a Multiply expression is used to drive the output to a solid black and white transition.

SolidEdge.gif

Putting It All Together


By combining a number of the building blocks together, a wide variety of mask and gradient styles can be created. The following example algorithmic mask Materials are only a few of what can be achieved.

Keep in mind that many of the expressions used in these algorithmic mask Materials can be ScalarParameter or VectorParameter expressions to allow for Material Instancing and Kismet control.
Animation of values can also be accomplished with various Material expressions including Panner, Rotator, Sine, Time, etc.

Horizontal Gradient

GradHorz01Thumb.gif

GradHorz01.gif

Horizontal Gradient

GradHorz02Thumb.gif

GradHorz02.gif

Horizontal Gradient Pushed 50%

GradHorzPush01Thumb.gif

GradHorzPush01.gif

Vertical Gradient

GradVert01Thumb.gif

GradVert01.gif

Vertical Gradient

GradVert02Thumb.gif

GradVert02.gif

Angle Gradient

GradAngle01Thumb.gif

GradAngle01.gif

Angle Gradient

GradAngle02Thumb.gif

GradAngle02.gif

Color Gradient

GradColor01Thumb.gif

GradColor01.gif

Color Feathered Gradient

GradColorFeather01Thumb.gif

GradColorFeather01.gif

Color Multiband Gradient

GradColorMulti01Thumb.gif

GradColorMulti01.gif

Three Point Gradient

GradThreePoint01Thumb.gif

GradThreePoint01.gif

Solid Top

SolidTop01Thumb.gif

SolidTop01.gif

Solid Bottom

SolidBottom01Thumb.gif

SolidBottom01.gif

Solid Left

SolidLeft01Thumb.gif

SolidLeft01.gif

Solid Right

SolidRight01Thumb.gif

SolidRight01.gif

Solid Border

SolidBorder01Thumb.gif

SolidBorder01.gif

Example Animated Masks


This example Material setup produces a solid mask that sweeps from side to side. The Constant for the mask percentage is replaced by a Sine expression in order to provide a mask percentage value that sweeps from 0 to 1.

SweepingMask.gif