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.

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

Creates a signed distance field for a circle shape.

Inputs:

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

Outputs

- The SDF circle.

Creates a signed distance field for a rectangle shape.

Inputs:

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

Outputs:

- The SDF rectangle.

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

Inputs:

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

Outputs:

- The SDF half plane.

Creates a signed distance field for a polygon.

Inputs:

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

Outputs:

- The SDF polygon.

Creates a signed distance field for a star.

Inputs:

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

Outputs:

- The SDF star.

Use these patches to transform SDF shapes.

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:

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

Outputs:

- The annular SDF.

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

Inputs:

- The SDF that the complement will be created for.

Outputs:

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

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:

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

Outputs:

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

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

Inputs:

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

Outputs:

**SDF**- The flipped SDF.

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

Inputs:

- The first SDF for the intersection.
- The second SDF for the intersection.

Outputs:

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

Linearly interpolates between two signed distance fields modulated by Alpha.

Inputs:

- The first SDF for the mix.
- The second SDF for the mix.
**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:

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

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:

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

Outputs:

- A single SDF.

Rotates a signed distance field around a pivot.

Inputs:

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

Outputs:

- The rotated SDF.

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

Inputs:

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

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:

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

Outputs:

- The rounded SDF.

Change the scale of a Signed Distance Field.

Inputs:

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

Outputs:

- The scaled SDF.

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

Inputs:

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

Outputs:

- The sheared SDF.

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:

- The first SDF for the smooth difference. This will be the 'outer' shape
- The second SDF for the smooth difference. This will be the 'inner' SDF shape that's removed from SDF 1.
**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:

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

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

Inputs:

- The first SDF for the smooth intersection.
- The second SDF for the smooth intersection.
**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:

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

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:

- The first SDF for the smooth union.
- The second SDF for the smooth union.
**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:

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

Translate a Signed Distance Field.

Inputs:

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

Output:

- The translated SDF.

Twists a Signed Distance Field around a pivot.

Inputs:

**SDF**- the SDF that will be twisted around the Pivot.**Pivot**- the X and Y value for the pivot that the SDF will be twisted around.**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:

- The twisted SDF.

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

Inputs:

- The first SDF for the union.
- The second SDF for the union.

Output:

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

Find inspiration, see examples, get support, and share your work with a network of creators.

Join CommunityFind inspiration, see examples, get support, and share your work with a network of creators.

Join Community