Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

Clear
Back

Visual Shaders - Examples

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.

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.

Applying multiple textures to one material channel

You can use patches to apply more than one texture to the same material channel, using the Multiply patch.

Creating the patches

You'll need to:

  • Add two textures to your project.
  • Create a material, and apply it to object in your scene.
  • Create a patch representing the the material channel that you want the texture sto be applied to, by clicking the arrow next to that property in the Inspector panel.
  • Create a patch to represent your textures, by dragging it from the Assets Panel, into the Patch Editor.

To create a Multiply patch, just right-click in the Patch Editor and select the **Multiply ** patch from the menu.

Connecting the patches

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:



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.

Transforming textures

You can use the 2D Transform Pack patch and the Texture Transform patch to rotate, scale, pivot and translate textures in your effects.

Creating the patches

To transform at texture using patches, you'll need to:

  • Add a texture to your project.
  • Create a material, and apply it to object in your scene.
  • Create a patch representing the the material channel that you want the texture to be applied to, by clicking the arrow next to that property in the Inspector.
  • Create a patch to represent your texture, by dragging it from the Assets Panel, into the Patch Editor.

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:

  • The Translation value to translate the texture.
  • The Scale value to make the texture bigger or smaller.
  • The Rotation value to rotate the texture.
  • The Pivot value to set where the texture transforms from. For example, setting this value to 0.5 would make the texture scale, rotate or translate from the center of the frame.

Connecting the patches

Connect the:

  1. RGBA output of the patch representing your texture, to the Texture input in the Texture Transform patch.
  2. Output of the 2D Transform Pack patch to the Transform input in the Texture Transform patch.
  3. The Texture Transform patch output to the patch representing your material.

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:

  1. Change each Scale value to 1.5 - to make the texture bigger.
  2. Set Rotation to 90, to rotate the texture 90 Degrees.
  3. Set the X and Y values to 0.5 next to Pivot, to rotate the texture from the center of the frame.


As a result, the texture looks like this:

Animating textures

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:

Creating the patches

To create this effect, you'll need to:

  • Add two textures to your project.
  • Create a material that's applied to an object in your scene.
  • Create a patch to represent the property of the material you want the texture to be applied to.
  • Create patches to represent the two textures, by dragging them from the Assets Panel, into the Patch Editor.

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.

Connecting the patches

Connect:

  1. The Progress output in the Loop Animation patch to the Progress input in the Transition patch.
  2. The output of the Transition patch to the Alpha input of a Mix patch.
  3. Connected two textures to the Mix patch.
  4. Connected the output of the Mix to the Diffuse Texture port of the material.

Using the Fragment Stage Patch

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.

Operations in the vertex stage

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.

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:

Learn more

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?