Articles
Textures and Materials
Patch Asset Materials

Patch Asset Materials

 A blue and pink 3D heart is shown in the Viewport and Inspector.

In Meta Spark 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. Meta Spark Studio also includes a premade patch asset material that can be customized through the Inspector and Patch Editor.

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. In the Inspector, go to Shader Type.
  2. Select Shader Asset, then Create Patch Asset from the menu:

Create Patch Asset is being selected from the Shader Type 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 be visible in the scene:

The previously white heart is now blue and pink.

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

Patch assets is shown in the Assets panel, in the Patches folder.

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 the properties in the Inspector

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

The material's properties are shown.

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 material

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

The patch group is shown, after having been dragged from the assets panel.

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 patch asset

Expand the patch asset 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:

A patch graph containing five patches, as described above.

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:

A patch graph containing four patches, as described above.

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 asset.

To add an input or output:

  1. Right-click on the patch asset.
  2. Select Edit Properties.

Edit Properties has been selected.

The following options will appear:

A new window. You can rename the patch asset, or add additional inputs and outputs.

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 patch asset.

To create a new asset:

  1. Return to the Patch Editor.
  2. Right-click the patch asset.
  3. Select Convert to Patch Group.

Example

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

The 3D heart is seen exploding into pieces and then coming back together in the Viewport and Simulator.

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

  1. A second color input to the color graph - the two color inputs will be listed and can be edited in the Inspector.
  2. Two new inputs to the position graph, represented in the Inspector as Duration and Strength.

A patch graph containing six patches.

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

The position graph

A patch graph containing 13 patches.

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.