Here are some examples of how you can use Signed Distance Field (SDF) patches to create shapes and textures in Spark AR Studio.
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:
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 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:
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:
For SDF Repeat we set:
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:
We simply added a Loop Animation and an SDF Circle Patch, connecting them both to an SDF Mix patch:
We entered the following values in the SDF Circle patch:
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:
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:
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:
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 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.
The edges of the star remain smooth even when zoomed in: