Textures, Shaders, and Materials

This is an overview what Textures, Shaders, and Materials are, with some insight into how they can be used.

Textures / Texture Maps

A Texture or Texture Map refers to 2D picture. A Texture is often saved to an image file (like a .jpg or .png), but we can also have Procedural Textures that are generated in real-time.

Textures are used inside Shaders and Materials. A Shader can “sample” from a Texture to determine what color or value to use for a given pixel.

Textures can contain color data that is used to literally color a Mesh, or it might contain other data. For example, Normal Maps contain data describing a surface normal, and Roughness Maps contain data for how rough a surface is.

Shaders

A Shader is a piece of code that tells a computer how to render vertices and pixels to the screen.

For example, this is a snippet of code written in HLSL (“High Level Shading Language”):

v2p vertexShader(vertexInfo input)
{
    v2p output;
    output.position = mul(worldViewProjection, float4(input.position, 1.0));
    output.uv = input.uv * UVTile;
    output.color = input.color;
    return output;
}

float4 pixelShader(v2p input) : SV_TARGET
{
    return input.color;
}

You don’t need to be a programmer to use Shaders, but it’s good to understand a few fundamental concepts:

• Everything you see on-screen is the result of a Shader. No Shader, no visuals.
• Modern Shaders have 2 main pieces: the Vertex Shader and the Pixel Shader.

Vertex Shader

The Vertex Shader is the part of a Shader that determines where vertices in a Mesh are positioned on the screen.

Usually, a Vertex Shader performs simple math to make a Mesh appear how it should from a given angle. But it’s also possible to customize it to create special effects.

Here is an example of a typical Vertex Shader, and a special Vertex Shader offsetting verts:

One example of how Vertex Shader effects can be used on characters is to simulate loose clothing flapping in the wind.

Pixel Shader

The Pixel Shader is the part of a Shader that determines what color a pixel on the screen is.

This is the more complex part of a Shader, where things like lighting, specular, and reflections are calculated. Most of the examples of fancy shaders you’ll see are doing logic in the Pixel Shader, running calculations per-pixel.

Here is an example of 2 different Pixel Shaders on the same object in the same lighting conditions:

Materials

A Material is like a wrapper around a Shader, in which artists can customize the final look.

Materials let us reason about the look of an object in artist-friendly terms. One Material can bring together multiple Textures and feed them into a Shader, and we can treat this bundle as one thing.

These days, Materials are often authored in node-based editors. Here is an example of a brick sidewalk Material authored in Blender. The “Principled BSDF” node represents a physically-based Shader, and we pass Textures into it as parameters:

In Unreal, Materials are compiled into Shader code automatically after they are authored. If you've ever waited a long time for Unreal to "compile shaders", this is the result of all the Materials in your project!

In Unreal, the Material Editor does not present any distinction between Vertex and Pixel Shaders. But it's good to understand that behind the scenes, the final result is split between the two.