The Patch Editor
Shader Patches
Introduction to SDF Patches

Introduction to Signed Distance Fields

Use Signed Distance Field (SDF) patches to create procedural textures in Spark AR Studio.

You'll start with a shape - for example a circle, star or polygon. You can then transform, add animation and perform operations on the shape to make lots of different visual effects. Take a look at these examples for more ideas.

SDF textures are useful for keeping the size of your effects low, because they can replace large custom textures. They can also overcome aliasing problems, like the appearance of jagged edges when a texture is scaled up.

What are Signed Distance Fields?

In a signed distance field, the value of each pixel is how far that pixel is from the edge of the shape you've selected. Negative distances mean the pixel is inside the shape, positive distances mean the pixel is outside the shape. Zero means the pixel is exactly on the shape.

The output of an SDF shape is Texture2D_1ch, as the shape outputs the signed distance as a function of the UV coordinate.

In this example we've selected a Polygon. The positive values are rendered in green and the negative values in red. We've modulated the color by the magnitude so that points close to the boundary get dark, and those farther away get more bright.

Creating an Effect with SDF Patches

Here's how to create a basic texture using SDF patches, and render it in the scene using a particle system. The finished effect will look like this.

Choose a shape

  1. Right-click in the Patch Editor.
  2. Select an SDF shape from the menu - for this example we chose an SDF Star patch, which will create a star shape.

Add an object and material

To render the texture in the scene, you'll need a scene object with a material applied to it. You'll use the Patch Editor to apply the texture to the material.

For this effect:

  1. Insert a particle system - you could use another object, like a plane or rectangle, if you wanted.
  2. In the Inspector, click + next to Materials to create a new material.
  3. Select the material in the Assets panel.
  4. In the Inspector, change the Shader Type to Flat.
  5. Click the arrow next to Diffuse Texture - to create a patch for the diffuse property of the material.

At this point, the project should look like this:

Apply the SDF texture to the material

Next we'll choose a color for the particles and apply the texture to the material. To do this, right-click in the Patch Editor and select a Step and Mix patch.

The Step patch is used to create a hard edge between the positive and negative values. Combined with the Mix patch, it will color all the positive values in one color - and the negative values in another color.

The Mix patch is where you'll set the color. To do this, you'll need to change the data type to Color, by clicking the dropdown menu at the bottom of the patch.

Connect:

  1. The output of the SDF Star to first input in the Step patch.
  2. The Step patch to the Alpha input in the Mix patch.
  3. The Mix patch to the Diffuse Texture port in defaultMaterial0.

Your graph should look like this:

To add the color, click the colored box at the top of the **Mix** patch and choose a color from the menu.

Your project should look like this:

Applying Transformations

In the example below we've transformed the stars, using the SDF Rotation patch and the Loop Animation patch:

As a result, the stars will rotate slightly as they fall:

Using Operations

Spark AR Studio has a selection of SDF Operation patches.

Below, we've added a second shape - SDF Circle. We've used the SDF Mix patch and the Loop Animation patch to animate between the two shapes:

The effect looks like this: