CLEAR

Visual Shaders - Examples

These are some examples of how visual shader patches can be used to change the appearance of materials.

Combining a Texture with a Color

This graph uses Visual Shaders to combine a texture with a color.

A single texture and a color are connected to a Multiply patch, then connected to the Diffuse Texture port of defaultMaterial0.



Using Multiple Textures

This graph uses 4 textures in a single material to create the appearance of gold bricks.

The 4 purple patches represent the different textures. We've:

  1. Combined the wall pattern with a gold texture using a Multiply patch, and connected it to the Diffuse Texture port of defaultMaterial0.
  2. Connected the wall1_normal texture to the Normal Texture port of the same material, to achieve better depth on the bricks.
  3. Connected the wall1_specular texture patch to the Specular Texture port, to create the appearance of 3 shiny bricks.


Applying an Alpha Channel Using a Pack

We've connected the RGB channel of the wall1_diffuse texture patch and the alpha channel of the wall1_mask texture patch to the Pack.

We've then connected the output of the Pack to the Diffuse Texture port of defaultMaterial0.

Before we connected the alpha channel the material appeared to be square, like in other examples on this page.



Creating a Simple Gradient

This graph shows how to use the Gradient and Mix patches to generate a color gradient.

We've created a Gradient patch, set it to Circular mode, then connected it to the Alpha input of a Mix patch. We entered colors into the Mix patch. The output port is connected to Diffuse Texture in the material patch.



Creating a Multi-colored Gradient

These graphs use the Gradient Step patch to create multi-colored gradients, where a series of colors blend together.

We've created two materials, one with a circular and one with a horizontal gradient.

For each we material we:

  1. Created a Gradient patch.
  2. Connected it to a series of Gradient Step patches.

The first step starts with 2 colors. After that, each step adds one other color. The final Gradient Step is connected to the Diffuse Texture port.



Transforming Textures

This example shows how to transform textures.

First, we created a 2D Transform Pack patch.

To stretch the texture vertically, we set the Y component of the Scale to 2.

To rotate the texture from the center, we set Pivot to 0.5 for both the X and Y values and the rotation angle to 90 degrees.

We then:

  1. Connected the 2D Transform output port to the Transform input port of a Texture Transform patch.
  2. Connected the Texture input of the Texture Transform patch to the texture patch.

Finally, we connected the Texture port in the Texture Transform patch to the Diffuse Texture port in the material patch.



Animating Textures

This graph uses a Loop Animation patch to animate the textures applied to a material.

First we connected a Loop Animation patch to a Transition patch.

We then:

  1. Connected a number Transition patch to the Alpha input of a Mix patch.
  2. Connected two textures to the Mix patch.
  3. Connected the output of the Mix patch to the Diffuse Texture port of the material.

As a result, the texture gradually changes from one texture to the other.



Using the Fragment Stage Patch

By default, operations are placed in the vertex stage where possible as the rendering is more efficient. This means that the pixel colors get computed only at the vertices, and not at each pixel. The actual colors of the inner pixels as a result are linearly interpolated.

We can see this happening in the top plane, whose material has had its diffuse texture set by only using operations in the vertex stage. The colors of the four vertices of the plane are computed, two blue vertices on the left side and two red vertices on the right side, and the interior then gets linearly interpolated resulting in a smooth transition between them with a blue to red gradient.

However, we used the Step patch with the intention of making a sharp transition from blue to red at 0.3 in the x-axis, instead of a gradient. To achieve this sharp transition we must compute the interior pixels too.

This is what the Fragment Stage patch achieves. It causes everything that comes after it to be computed per fragment (pixel) rather than simply being interpolated so we see the sharp transition on the bottom plane.