Everything you need to know to create an interactive augmented reality experience.
These are some examples of how visual shader patches can be used to change the appearance of materials.
Learn how to:
You can also use patches to create color gradients.
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.
You can use patches to apply more than one texture to the same material channel, using the Multiply patch.
You'll need to:
To create a Multiply patch, just right-click in the Patch Editor and select the **Multiply ** patch from the menu.
If you connected the RGBA output of one of the texture patches directly to the material, you’d apply the texture to the material.
Instead, connect the RGBA outputs of each texture patch to the inputs in the Multiply patch.
Then connect the output of the Multiply patch the input in the patch representing the material's property:
In the example below, we've combined a texture that looks like a wall pattern with a gold texture:
To finish the material, we’ve added a normal map and a specular texture, adding a rough surface texture and the appearance of 3 shiny gold bricks:
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.
You can use the 2D Transform Pack patch and the Texture Transform patch to rotate, scale, pivot and translate textures in your effects.
To transform at texture using patches, you'll need to:
To create the 2D Transform Pack patch and the Texture Transform patch, right-click anywhere in the Patch Editor and select them from the menu.
You’ll see the 2D Transform Pack has 4 input ports, each with values that can be edited. Edit:
Your graph should look like this:
Connecting these patches will apply the texture to your material. Here’s an example we’ve created using a texture that looks like a brick wall:
You’ll need to adjust the values in the 2D Transform Pack to actually transform the texture. For example, in the graph below we’ve:
As a result, the texture looks like this:
You can use the Patch Editor to add animation to textures in your scene.
Here, we’ll use the Loop Animation, Transition and Mix patches to create an effect that animates between two textures in one material:
To create this effect, you'll need to:
To create the Loop Animation and Transition patches, right-click in the Patch Editor and select them from the menu. Set the data type of the Progress patch to Number.
By default, operations are placed in the vertex stage where possible. In the vertex stage, pixel colors get computed only at the vertices and not at each pixel. The actual colors of the inner pixels are linearly interpolated as a result. This makes rendering more efficient, to improve the performance of your effects.
In the example below, we’ve applied two texture to two different planes.
In the top plane, the material has had its diffuse texture set using operations in the vertex stage. The plane at the bottom of the scene uses the fragment stage.
The colors of the four vertices in the top plane are computed - two pink vertices on the left side and two green vertices on the right side. The interior is then linearly interpolated, resulting in a smooth transition between them, which creates a gradient.
This is the graph we built to create this effect:
We’ve added the Step patch to this graph. The intention here is to make a sharp transition from pink to green at 0.5 in the X axis, instead of a gradient. To achieve this sharp transition need to compute the interior pixels too, by adding the Fragment Stage patch.
If we add the Fragment Stage patch between the Swizzle and Step patches, everything that comes after it will be computed per fragment (pixel) rather than being interpolated. This means we can see the sharp transition between colors in the second plane.
Here’s how the graph looks:
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community