Visual Shaders Overview
Visual Shaders Overview
Introduction to Visual Shaders

Introduction to Visual Shaders

A shader is a set of algorithms that determines the appearance of a 3D object's surface. They're particularly useful for applying complex changes to a material.

You don't need to know how to code to create a shader. You can use the Patch Editor to create and connect a group of patches called a visual shader.

Visual shaders can be used to determine the appearance of an object instead of applying Spark AR Studio's built-in shaders through the Inspector panel.

Like other patches in Spark AR Studio, there are different types of patch to choose from.

Shader patches can be connected to other visual programming patches - but you always need to connect the output port of a visual programming patch to the input of a shader patch.

Shader patches use some different data types to other patches in Spark AR Studio.


This is an example of a visual shader that has 3 types of patch - an asset patch, 2 intermediary patches and a consumer patch:

By connecting these patches, we've multiplied a color and a texture, and applied the result to a material.

The texture in this example is an asset we've imported to AR Studio. It's a 4-channel Texture, which means it contains both the color and alpha components of the texture asset. It's represented by a patch named wall1_diffuse. We made this patch by dragging the texture from the Assets panel, into the Patch Editor.

We then created a material by clicking + next to Assets in the Assets panel and selecting Create New Material.

Because we want to apply the texture to this material, we created a patch that represents the Diffuse property of the material. We did this by selecting the material defaultMaterial0 in the Assets panel, then clicking the circle next to Diffuse in the Inspector panel:

If we connected the RGBA port of the wall1_diffuse patch to the Diffuse Texture port in defaultMaterial0, we'd apply the texture to our material in it's original state. We'd connect the RGBA port because our texture has 4 channels.

In this example we've used 2 intermediary patches to easily change this - Value and Multiply.

Intermediary patches are inserted by right clicking anywhere in the Patch Editor, and selecting a patch from the menu.

You can change the data type and add values to the Value patch. In this example we've right-clicked on Input, and changed the Type to Color. We chose a color by clicking the circle next to Input.

  • Multiply is a math patch. That means it takes the information from the patches connected to its input port, and performs a math operation on this information.
  • In this case, we've connected:

    1. The Output port of the Value patch to the first input port of the Multiply patch.
    2. The RGBA port in our texture, wall1_diffuse, to the second input port of the Multiply patch.

    To see the effect, we've clicked Run in the Toolbar.

    As a result, we've multiplied the color from the Value patch, with the texture:

    Was this article helpful?