In Spark AR Studio, you can use the Patch Editor to add colorful gradients to materials. This is a great technique for building backgrounds and colorful filters.
In this tutorial, we'll look at how gradients are created in the Patch Editor. We'll then add a gradient to the whole scene, and to a signed distance field shape.
Start by opening a new project in Spark AR Studio and adding a rectangle.
The rectangle will render the color gradient in the scene, and later be used to create a color filter that covers the whole scene. You can experiment with gradients using any other object, if you prefer. To add a rectangle:
Make a couple of edits to the rectangle's properties in the Inspector. These edits will make the rectangle cover the device screen. Set
Next create a material for the rectangle. You'll use the Patch Editor to add the gradient effect to this material. To create a material:
Opening the Patch Editor
Now it's time to open the Patch Editor, and create a patch to represent your material.
The patch representing your material will be connected to a series of gradient patches, rendering the gradient in the scene.
To create this patch:
This will open the Patch Editor and add a yellow patch representing the material:
You'll add 2 more patches to create a gradient with 2 colors - a Gradient patch and a Mix patch:
You'll now see 3 patches in the Patch Editor:
In the Mix patch, use the dropdown menu at the bottom of the patch to change the data type to Color:
Now connect the patches. Connect:
Setting the colors
Set colors for the gradient by adjusting the values in the Mix patch. The color set in the top of the patch will be the starting gradient. Below, we've added colors to the Mix patch:
Here's how the gradient appears:
Changing the gradient's shape
The shape of the gradient is Horizontal by default. You can adjust this to either a vertical or circular gradient by choosing an option from the dropdown menu inside the patch.
Use the Gradient Step patch to blend a series of more than 2 colors together.
The first Gradient Step patch in a graph creates a 2 color gradient. Each Gradient Step patch added after that adds another color.
To build a gradient with 4 colors, start by creating the patches. Right-click in the Patch Editor and select:
To build the graph, connect:
Here's how your graph will look:
Set colors for the gradient in the boxes next to Previous Step and New Color.
Adjusting the Start Range and End Range in each Gradient Step patch will define where each color starts and ends.
Easily add a colorful filter to your scene by adjusting the Opacity property of the material your gradient is applied to in the Inspector.
You could combine this technique with segmentation to show the gradient in the background of the effect only, or add different gradients to different parts of the scene.