Visual Shaders Overview
Visual Shaders Overview
Visual Shaders Overview

Visual Shaders Overview

Use visual shader patches with other patches in a graph to change the appearance of a material. This way, you can apply more complicated changes than you can using the shaders found in the Inspector.

Some visual shader patches use different data types to other patches in Spark AR Studio.

For more information on using visual shaders, see the Introduction to Visual Shaders tutorial.

Available Visual Shaders

PatchDescription

Consumer

Visually represents a property of a material, like its position or scale. Usually appears at the end of a graph to specify how the material appears in the effect.

Texture asset

A producer patch that applies a texture to the material.

Blend

Blends two colors or textures together.

Color Space

Outputs a texture’s RGB, HSV, and HSL color values. Useful for isolating the color values to change the texture's appearance.

Composition

Outputs two combined functions as a single data stream.

Fallback

Automatically outputs a fallback value when you disconnect the main value. For example, a color could be used as a fallback value for an image.

Fragment Stage

Processes each fragment in a texture individually instead of processing a texture at the vertices.

Function

Used as an identity function. It always returns the same value as its argument.

Gradient

Creates a grayscale gradient. Use with a Mix patch to create a color gradient.

Gradient Step

Defines each color you want to use in a color gradient. Use this patch multiple times to add multiple colors.

Render Target Size

Outputs the render target size. Useful for building effects using shaders requiring the exact pixel size, like pixel blurring.

Shader Derivative

Captures standard derivatives.

Texture Sampler

Samples a texture at the specified coordinates.

Texture Transform

Used with a 2D Transform Pack patch to scale, rotate, pivot and reposition a 2D texture on a 2D or 3D object.

Vertex Attribute

Provides the value of the selected vertex attribute among a selection of parameters.

Vertex Transform

Provides a vertex transformation matrix from a dropdown.

Previewing the output of a shader patch

When you build a graph with a visual or SDF shader patch, you can see a preview of the shader patch’s output at the bottom of the patch. This lets you see the result of adding and editing a shader patch in your graph, before completing your effect.

Enabling the preview

If you can’t see the preview section on your shader patch, or the section is blank, make sure:

  • Your patch graph contains a consumer patch representing the Device screen output and that it’s connected to a patch in your graph.
  • The preview section is expanded. The preview is collapsed by default, click the arrow on the bottom right of the patch to expand it.

Also keep in mind that the preview section only appears on the intermediary shader patches in your graph. These are the patches in the middle section of your graph that manipulate the information taken from a producer patch, such as a Texture Asset Patch or a Function Patch. There’s also no preview section in the Gradient Step Patch.

Example

In the example below, we’re previewing the result of connecting a Blend shader patch to the patch representing the Device screen output. The result changes depending on the Blend Mode selected.

To see the result of the Blend patch reflected in the Simulator we need to connect the output of the Shader Render Pass patch to the Device screen output patch.

Was this article helpful?