Use Signed Distance Field (SDF) patches to create procedural textures in Meta Spark Studio.
You'll start with a shape - for example a circle, star or polygon. You can then transform, add animation and perform operations on the shape to make lots of different visual effects. Take a look at these examples for more ideas.
SDF textures are useful for keeping the size of your effects low, because they can replace large custom textures. They can also overcome aliasing problems, like the appearance of jagged edges when a texture is scaled up.
In a signed distance field, the value of each pixel is how far that pixel is from the edge of the shape you've selected. Negative distances mean the pixel is inside the shape, positive distances mean the pixel is outside the shape. Zero means the pixel is exactly on the shape.
The output of an SDF shape is Texture2D_1ch, as the shape outputs the signed distance as a function of the UV coordinate.
In this example we've selected a Polygon. The positive values are rendered in green and the negative values in red. We've modulated the color by the magnitude so that points close to the boundary get dark, and those farther away get more bright.
Here's how to create a basic texture using SDF patches, and render it in the scene using a particle system. The finished effect will look like this.
To render the texture in the scene, you'll need a scene object with a material applied to it. You'll use the Patch Editor to apply the texture to the material.
For this effect:
At this point, the project should look like this:
Next we'll choose a color for the particles and apply the texture to the material. To do this, right-click in the Patch Editor and select a Step and Mix patch.
The Step patch is used to create a hard edge between the positive and negative values. Combined with the Mix patch, it will color all the positive values in one color - and the negative values in another color.
The Mix patch is where you'll set the color. To do this, you'll need to change the data type to Color, by clicking the dropdown menu at the bottom of the patch.
Your graph should look like this:
To add the color, click the colored box at the top of the **Mix** patch and choose a color from the menu.
Your project should look like this:
In the example below we've transformed the stars, using the SDF Rotation patch and the Loop Animation patch:
As a result, the stars will rotate slightly as they fall:
Meta Spark Studio has a selection of SDF Operation patches.
Below, we've added a second shape - SDF Circle. We've used the SDF Mix patch and the Loop Animation patch to animate between the two shapes:
The effect looks like this: