Clear
Back

As a result of the coronavirus (COVID-19) outbreak, we have a reduced capacity to review effects and delays in publishing are expected. Learn more.

Patch Asset Materials

In Spark AR Studio, patch asset materials are visual shaders created in the Patch Editor then set as a Shader Type for a material in the Inspector.

They can be saved and reused, which means they’re helpful for quickly creating and reusing visual shaders.

You can use any patch group with an RGBA Color output as a patch asset material. Spark AR Studio also includes a premade patch asset material that can be customized through the Inspector and Patch Editor. Here's how it looks applied to an object:

Patch asset materials can have multiple inputs. They must always have an RGBA Color output. They can also output a vector4 Position to set the vertex position in the material. For example, for vertex displacement.

Creating the premade patch asset material

To create a premade patch asset material:

  1. Create a material.
  2. In the Inspector, go to Shader Type.
  3. Select Patch Asset, then Create New Patch Asset from the menu:

Any patch groups you've added to your project with Color outputs will also be available to select from the dropdown list.

A material defined by the patch asset material will visible in the scene:



A new patch group will be listed in the Assets panel:



To change the appearance of the material, either:

  • Adjust the material’s properties in the Inspector.
  • Drag the patch group into the Patch Editor and edit the graph.

Adjusting properties in the Inspector

Use the options in the Inspector to make small changes to the material.

Parameters

Under Parameters the premade patch asset material has one color Input that can be edited.

When more inputs have been added to a patch asset material in the Patch Editor they will also be listed here.

Input

Any Color outputs the patch asset material has will be listed here.

Render Options

Blend mode

Sets the blend mode of the material. Choose from:

  • Add
  • Alpha
  • Subtract
  • Multiply
  • Replace
  • Screen

Cull Mode

  • Back - Discard pieces of the mesh that are facing away from the viewer. Most effects use this mode to improve performance.
  • Front - Discard pieces of the mesh that are facing the viewer.

Opacity

Sets the transparency of the material on an individual map level.

Double Sided

Displays both sides of a face normal.

Advanced Render Options

Use the Write to Depth Buffer and Use Depth Test checkboxes to control certain order parameters for the object the material is applied to.

Customizing the premade patch asset

Drag the patch group into the Patch Editor to edit it:

The Input

The group has one Input port on the left of the patch. This is a color defined by connecting other patches to it to create a more complex visual shader, or by adjusting the Input value in the Inspector.

Outputs

It has 2 output ports:

  • Color outputs an RGBA color.
  • Position outputs a vector4 position.

Expanding the group

Expand the group to edit and customize it. You’ll see it’s made of 2 graphs. One graph affects the Color output, and the other can be used to set a vertex position.

The color graph

This graph uses a Vertex Attribute and Swizzle patch to convert the local normal XYZ values to RGB color. A Mix patch combines this with the input color by the amount specified in the Alpha value:



The vertex position graph

This graph conforms the object's local vertex positions to the screen space of the camera, outputting a matrix signal that controls the object’s vertex positions:



Edit this by adding your own offsets to these signals either uniformly through vectors or through additional matrices.

Adding inputs and outputs

To make patch asset materials customizable through the Inspector, add inputs to the patch group.

To add an input or output:

  1. Right-click on the Patch Group.
  2. Select Group Properties.


The following options will appear:



To add inputs or outputs, either:

  • Click + next to Outputs to add outputs.
  • Click + next to Inputs to add inputs.

When you’ve added the inputs and outputs you need, create a new asset from the group. To create a new asset:

  1. Return to the Patch Editor.
  2. Right-click on the patch group.
  3. Select Create Asset from Group.

Example

In this project we’ve added a second color and animation by editing the premade patch asset material:



We did this by editing both the color and position graphs. We added:

  • A second color input to the color graph - the two inputs are called Color 1 and Color 2 in the Inspector.
  • Two new inputs to the position graph, represented by the Duration and Strength options in the Inspector.

The color graph



The Color 2 input adds a second color. We changed the Vertex Attribute patch to output Texture Coordinates.

The position graph



The Duration inputs allows us to set the Duration value in the Loop Animation patch to set the speed of the animation.

The Strength input lets us edit the strength of the vertex displacement by defining how much the normals should be multiplied by and adding this to the position.

Join the Spark AR Creator's community

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

Join Community

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?