Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

Clear
Back

Signed Distance Fields - Examples

Here are some examples of how you can use Signed Distance Field (SDF) patches to create shapes and textures in Spark AR Studio.

Learn how to:

Adding a Color Gradient

Below, we've added a gradient effect to a star that's been applied to a particle system. We created this particle effect in the introduction to signed distance fields guide.

We added the gradient using a Gradient patch, and a second Mix patch. We added the colors for the gradient to the Mix patch, and connected it to the first input in the other Mix patch - to connect the gradient to the stars:

Tiling SDF Shapes using SDF Repeat

Below, we've taken the same stars and used the SDF Repeat patch to tile them in the background of the scene:

First, we used segmentation to separate the user in the foreground, from the background.

We created a new background using 2 rectangles. One rectangle - darkBackground - simply has a material applied to it. In the material, we've set the color to black.

The other rectangle - stars - has the texture we've created using the SDF Stars applied. We made a couple of changes to the rectangle before applying the texture. In the Inspector panel, we:

  1. Set Flexibility, so the stars scale up or down with the device screen.
  2. Changed the shape to a square, so the stars always stay the same shape even if the device screen changes. (improve).

To create the tiling effect, we added an SDF Mix and SDF Repeat patch.

We made some adjustments to the values in the SDF Star and SDF Repeat. To find the right values, we experimented by adjusting the values in the patches until we found something we were happy with.

For SDF Star we set:

  1. The X and Y values next to Centre to 0.05, because...
  2. The first Radius value to 0.04, and the second to 0.02, to set the shape of the star.

For SDF Repeat we set:

  1. Pivot to 0.05 - to set the pivot around which the star is repeated.
  2. Size to 0.09 - to set the size of the area in which the star is repeated.

Adding Animation

It's really easy to add animation to effects made with SDF shaders, using the Loop Animation patch.

Taking the tiled stars example above, we used the Loop Animation patch to make the background animate between two different SDF shapes:



We simply added a Loop Animation and SDF Circle Patch, connecting them both to the SDF Mix patch:

Combining SDF Shapes

You can combine multiple SDF shapes, using the SDF Difference patch. This patch creates a single Signed Distance Field by removing one SDF shape from another.

To render the SDF shape in the scene, we first inserted a plane, and applied a material to it. We created a patch to represent the Diffuse Texture property of the plane.

We then connected an SDF Rectangle and SDF Circle to the SDF Difference patch. We adjusted the values in the SDF Rectangle and SDF Circle patches to set the size and shape of the new shape we've created.

We chose a color for the interior of the shape, by adding a color to the second port in the Mix patch. We left the first port empty - making the exterior of the shape transparent. Finally, we connected the Mix patch to the material:

We can use the SDF Union patch to add another shape to the effect. Below we've added a star, with the SDF Star patch:



Using the SDF Twist Patch to Transform SDF Shapes

You can use SDF patches to transform SDF shapes.

Here we've used the SDF Twist patch to transform an SDF Star:



Then added the SDF Annular patch to make the shape into a ring:

Using SDF Smooth Step

In this example we use the Smooth Step patch rather than the Step patch to create a shape that maintains smooth edge - even when the camera zooms in.

We've used a Mix patch to choose 2 colors for the material - the regions of the material inside the star are orange and outside are green.

The Smooth Step patch interpolates the output value between the Edge Min and Edge Max input values. We set small values around zero, to create a small edge.

This is how the graph looks:



One problem with this approach is that the interpolation across the edge becomes apparent when you zoom in on the material:



To avoid this we can used the Shader Derivative patch to determine the size of the edge.

The Shader Derivative patch takes the SDF as an input with its derivative function set to fwidth. This samples the gradient, or the change in the SDF, in each direction. This is then used to scale the Smooth Step, meaning that the closer we zoom in on the shape, the smaller the value of the Smooth Step becomes. This creates a smooth edge no matter how close we zoom in.



The edges of the star remain smooth even when zoomed in:



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?