Signed Distance Fields - Patches

Use Signed Distance Field patches to create textures in Spark AR Studio.

Add them to your graph by right-clicking in the Patch Editor and selecting from the menu.

When you're creating a texture with SDF patches, you'll choose an SDF shape first. You can then transform the shape using SDF Operation patches.

SDF Shapes

These patches create a signed distance field for a particular shape.

SDF Circle

Creates a signed distance field for a circle shape.

Inputs:

  1. Centre - The X and Y position values for the center of the circle.
  2. Radius - The value of the radius of the circle.

Outputs

  1. The SDF circle.


SDF Rectangle

Creates a signed distance field for a rectangle shape.

Inputs:

  1. Center - the X and Y values for the centre of the rectangle.
  2. Half-size - the distance between the center point and the X and Y
  3. Variant - Exact can result in curved points for the SDF, whereas Sharp will result in sharp points.

Outputs:

  1. The SDF rectangle.


SDF Half Plane

Create a Signed Distance Field for a half plane. This dissects the screen into 2 areas divided by a line

Inputs:

  1. Offset - Sets the offset for the line that creates the half plane.
  2. Normal - Sets the normal for the line that creates the half plane.

Outputs:

  1. The SDF half plane.


SDF Polygon

Creates a signed distance field for a polygon.

Inputs:

  1. Center - the X and Y values for the centre of the polygon.
  2. Radius - the value of the radius of the polygon.
  3. Sides - the number of sides of the polygon.
  4. Variant - Exact can result in curved points for the SDF, whereas Sharp will result in sharp points.

Outputs:

  1. The SDF polygon.


SDF Star

Creates a signed distance field for a star.

Inputs:

  1. Center - The X and Y position values for the center of the star.
  2. Inner Radius - the inner radius of the star.
  3. Outer Radius - the outer radius of the star.
  4. Sides - the number of sides for the star.

Outputs:

  1. The SDF star.

SDF Operations

Use these patches to transform SDF shapes.

SDF Annular

Create a ring-like Signed Distance Field around an SDF shape. The Radius value sets the size of the 'ring'. Take a look at this example for how to use the SDF annular patch in your effects.

Inputs:

  1. SDF - the SDF you want to produce the annular for.
  2. Radius - the value of the radius of the annular.

Outputs:

  1. The annular SDF.


SDF Complement

Create the complement of a Signed Distance Field. The inside of the SDF shape will become the outside, and vice versa.

Inputs:

  1. The SDF that the complement will be created for.

Outputs:

  1. A single SDF made by switching the shape's inside with the outside.


SDF Difference

Create a single Signed Distance Field by removing one SDF shape from another. This outputs a single SDF. Take a look at this example of how to use the SDF Difference patch in an effect.

Inputs:

  1. The first SDF for the difference. This will be the 'outer' shape.
  2. The second SDF for the difference. This will be the 'inner' SDF shape that's removed from SDF 1.

Outputs:

  1. A single SDF made by removing SDF 2 from SDF 1.


SDF Flip

Flip a Signed Distance Field around a half plane. This will create a 'mirrored' SDF shape from the original.

Inputs:

  1. SDF - the SDF that will be flipped.
  2. Offset - sets the offset for the half plane that the SDF will be flipped around.
  3. Normal - sets the normal for the half plane that the SDF will be flipped around.

Outputs:

  1. SDF - The flipped SDF.


SDF Intersection

Connect 2 Signed Distance fields to create an single SDF shape with an intersection.

Inputs:

  1. The first SDF for the intersection.
  2. The second SDF for the intersection.

Outputs:

  1. A single SDF made from the intersection of SDF 1 and SDF 2.


SDF Mix

Linearly interpolates between two signed distance fields modulated by Alpha.

Inputs:

  1. The first SDF for the mix.
  2. The second SDF for the mix.
  3. Alpha - Sets the mix between the 2 SDFs - use values between 0.0 and 1.0. When set at 0.0, the SDF will take the shape of the first SDF. When set at 1.0, the SDF will take the shape of the second SDF.

Outputs:

  1. A single Signed Distance Field made by mixing SDF 1 and SDF 2.


SDF Repeat

Repeat a Signed Distance Field in a tiled formation around a pivot. Outputs a single SDF made from the repetitions. Take a look at this example for how to use the SDF Repeat patch in an effect.

Inputs:

  1. SDF - The SDF that will be repeated.
  2. Pivot - The X and Y value for the pivot that the SDF will be repeated around.
  3. Size - The size of the repeated SDF. Set between 0 and 1.

Outputs:

  1. A single SDF.


SDF Rotation

Rotates a signed distance field around a pivot.

Inputs:

  1. SDF - the SDF shape you want to rotate.
  2. Pivot - the X and Y value for the center of the rotation.
  3. Angle - the angle of the rotation in radians.

Outputs:

  1. The rotated SDF.


SDF Rotational Repeat

Repeats a Signed Distance Field in a circle around a pivot. Outputs a single SDF made from the repetitions.

Inputs:

  1. SDF - the SDF that will be repeated
  2. Pivot - the X and Y value for the pivot point that the SDF will be repeated around.
  3. Radius - The size of the repeated SDF. Set between 0.0 and 1.0.
  4. Times - The number of times the SDF will be repeated around the pivot.


SDF Round

Round the shape of a Signed Distance Field. The radius value sets how round the shape will be - a larger Radius will produce a rounder shape.

Inputs:

  1. The SDF that will be rounded.
  2. Sets the radius of the rounding of the SDF shape. A larger radius will give a rounder SDF shape.

Outputs:

  1. The rounded SDF.


SDF Scale

Change the scale of a Signed Distance Field.

Inputs:

  1. SDF - The SDF that will be scaled.
  2. Pivot - The X and Y value for the pivot that the SDF will be scaled from.
  3. Scale - The values for scaling the X and Y axis of the SDF shape.

Outputs:

  1. The scaled SDF.


SDF Shear

Shear a Signed Distance Field. This slants, or skews, the SDF shape along the X or Y axis.

Inputs:

  1. SDF - The SDF that will be sheared.
  2. Pivot - The X and Y value for the pivot of the shear.
  3. Shear - The X and Y value for the shear of the SDF.

Outputs:

  1. The sheared SDF.


SDF Smooth Difference

Create a single Signed Distance Field by removing one SDF shape from another. The 2 SDFs will smoothly blend together, with the Smoothness value determining how smooth the blend is.

Inputs:

  1. The first SDF for the smooth difference. This will be the 'outer' shape
  2. The second SDF for the smooth difference. This will be the 'inner' SDF shape that's removed from SDF 1.
  3. K - Sets the smoothness of the difference. A value of 0.0 will result in a regular difference. Set between 0.0 and 1.0.

Outputs:

  1. A single SDF made by removing SDF 2 from SDF 1, with a smooth difference.


SDF Smooth Intersection

Connect 2 Signed Distance fields to create an single SDF shape with a smooth intersection. The Smoothness value determines how the smooth the intersection will be.

Inputs:

  1. The first SDF for the smooth intersection.
  2. The second SDF for the smooth intersection.
  3. K - Sets the smoothness of the intersection. A value of 0.0 will result in a regular intersection. Set between 0.0 and 1.0.

Outputs:

  1. A single SDF made from the smooth intersection of SDF 1 and SDF 2.


SDF Smooth Union

Combine two Signed Distance Fields to create a single SDF shape. The 2 SDFs will smoothly blend together, with the Smoothness value determining how smooth the union is.

Inputs:

  1. The first SDF for the smooth union.
  2. The second SDF for the smooth union.
  3. K - Sets the smoothness of the union. A value of 0.0 will result in a regular union. Set between 0.0 and 1.0.

Outputs:

  1. A single SDF made from the smooth union of SDF 1 and SDF 2.


SDF Translation

Translate a Signed Distance Field.

Inputs:

  1. SDF - the SDF that will be translated.
  2. Translation - the X and Y value for the translation.

Output:

  1. The translated SDF.


SDF Twist

Twists a Signed Distance Field around a pivot.

Inputs:

  1. SDF - the SDF that will be twisted around the Pivot.
  2. Pivot - the X and Y value for the pivot that the SDF will be twisted around.
  3. Twist - the value of the twist in radians. The amount of twist for a point is proportional to the distance between the point and the pivot.

Output:

  1. The twisted SDF.


SDF Union

Combine two Signed Distance Fields to make a single SDF shape.

Inputs:

  1. The first SDF for the union.
  2. The second SDF for the union.

Output:

  1. A single SDF made from the union of SDF 1 and SDF 2.