Patch Editor: Creating Patterns with SDF Patches

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

Adding a Color Gradient

Below, we've added a gradient effect to a star that's been applied to a particle system.

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:

A patch graph is shown alongside the Simulator and Viewport, where stars with a orange gradient can be seen.

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:

The stars with a gradient now form a background for the scene.

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

We created a new background using 2 rectangles instead of 1. One rectangle — background — 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 also created three layers for this project and assigned a rectangle to each layer:

  • user: layer0.
  • stars: layer1.
  • background: layer2.

We adjusted the order of the layers in the Layers tab, to make sure the user is rendered in front of the background and stars:

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 to the right of Centre to 0.5.
  2. The Radius Outer value to 0.04, and the Radius Inner value to 0.02, to set the shape of the star.

For SDF Repeat we set:

  1. Pivot x and y values to 0.5 — to set the pivot around which the star is repeated.
  2. Size x and y values to 0.12 — to set the size of the area in which the star is repeated.

Adding Animation

It's simple 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:

The stars warp and change into circles.

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

A patch graph containing 10atches.

We entered the following values in the SDF Circle patch:

  • Center x and y: 0.5
  • Radius: 0.04

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:

A patch graph containing 6 patches.

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:

A star has been added 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:

The star shape has been changed.

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

The middle of the twisted shape has been removed.

Using SDF Smooth Step

In this example we use the Smooth Step patch rather than the Step patch to create a shape that maintains a 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 what the graph looks like:

A patch graph containing four patches.

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

An orange star on a green background.

To avoid this we can use 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.

A patch graph containing six patches.

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

An orange star on a green background.
Was this article helpful?