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.

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.

Example

This is an example of a visual shader that has three types of patch — an asset patch (the orange patch) representing a wall texture, two intermediary patches (a multiply and value patch) and a consumer patch (the yellow patch):

a group of patches creating a visual shader

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 wall-diffuse-texture. We made this patch by dragging the texture from the Assets panel, into the Patch Editor.

We then created a material by clicking Add Asset at the bottom of the Assets panel and selecting Material.

Because we want to apply the texture to this material, we created a patch that represents the Diffuse property of the material. To do this:

  1. In the Assets panel, we selected the material, Material0.
  2. In the Inpsector, under Diffuse, to the left of Texture, we clicked the circle.

Inspector showing arrow to the left of Texture clicked to create a patch

If we connected the RGBA port of the wall-diffuse-texture patch to the Diffuse Texture port in Material0, 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.

Two patches connected applying the wall texture to the material

In this example, we've instead used two intermediary patches to easily alter the texture before applying it to the material. These patches are a Value and Multiply patch.

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 clicked the patch to reveal the menu at the bottom, and changed the type from Number to Color. We chose a color by clicking the square to the right of 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 Second Value port of the Multiply patch.
  2. The RGBA port in our texture, wall-diffuse-texture, to the First Value port of the Multiply patch.

To see the effect, we clicked restart icon in the Toolbar.

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

 Final patch graph showing group of patches that create the shader and apply it to the material, with result in the Simulator