Clear
Back

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.

In this guide you'll learn:

  1. What a signed distance field is.
  2. How to make a simple effect using SDF patches.
  3. About applying transformations and animations, and basic operations to SDF shapes.

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

Start with an SDF 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.


You could choose a different shape instead. Take a look at this guide for a full list of SDF shapes in Spark AR Studio.

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.

You'll need to make some changes to the particle system:

  1. Next to Position, set the Y value to 0.24. It should move to the top of the scene.
  2. Next to Rotation set the X value to 180. The particles should move downwards.
  3. Change the Type to Line, and the Length of the the emitter to 0.4.
  4. Set the first value next to Lifespan to 2.

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:

Next Steps

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?