There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.
In this tutorial you'll create a color filter by using the Patch Editor to change the hue and saturation of a texture in your AR effect:
Adjusting hue and saturation is also useful for:
This effect uses objects, assets and textures already included in Spark AR Studio. You can also apply this technique to your own custom textures.
Download the sample content to take a look at the finished project. To build this effect from scratch, just open a new project.
Hue is essentially the color itself, defined by a position on the color spectrum. Below is an image of the spectrum, showing all the different hues:
Saturation is how strong the colour is, from fully vibrant to grayscale. In the image below there are 5 squares with the same hue but different amounts of saturation. The first square on the left is the least saturated, and the last square on the right is the most:
A texture with no saturation at all would be black and white.
Before you start building, open the finished project. It’s included in the sample content folder.
We’ll go through every part of the project step-by-step later in this tutorial, but it’s worth understanding how the final effect was created first.
Everything else happens in the Patch Editor. To open the Patch Editor and see the finished graph, click View in the menu bar, then Show/Hide Patch Editor. Here’s what you’ll see in the Patch Editor at the bottom of the interface:
The graph starts with an orange asset patch representing the camera texture. It’s connected to the Color Space patch which takes the RGB information from the image and outputs the hue, saturation and lightness. The Unpack patch splits this into 3 channels that can be manipulated individually.
The patches between the Unpack and Pack patch can be edited to manipulate the hue and saturation. The lightness value is passed straight to the Pack patch, as it's not edited it in this effect.
The Pack and final Color Space patch convert the 3 values back into a single data stream that can be connected to the material, completing the graph.
To get started, add the objects that render the texture in the scene. Start with the rectangle:
The rectangle will automatically be added as a child of the canvas. This means it can be set to resize in sync with the device screen. Find out about how rectangles and the canvas work together in this tutorial.
Make a couple of edits to the rectangle:
Then add the camera texture:
Here’s how your project will look:
All the other steps you'll follow to complete this project use Patch Editor. To open the Patch Editor:
Start by creating the patches you’ll need to build the start and end of the graph. You’ll add the patches that control the hue and saturation to the middle of the graph later.
To create this patch:
You’ll see an orange patch, cameraTexture0:
It has 3 output ports:
You’re going to use the RGB port, because the image should stay opaque. This means you don't need to manipulate the Alpha value.
At the end of the graph will be a patch representing the material. All the information added to the graph will be passed to this patch, changing the appearance of the material and texture in the scene.
To create this patch:
You’ll see a yellow patch, material0:
This patch takes the RGB information from the camera texture and outputs a variation on it that can be easier to manipulate, known as a color space or color model. There are 2 outputs to choose from:
You’ll use 2 color space patches - one to output the HSL values, and the other to convert them back to RGB. To add them to your project:
These patches will separate the hue, saturation and lightness outputs into their individual channels, then bring them back together at the end of the graph. In the Patch Editor, select:
Start with the beginning and end of the graph.
Change the value in the Color Space patch from RGB to HSL, to output the hue and saturation channels.
The section of the graph will look like this:
First change the data type in one of the Pack patches to Vector 2. Then connect:
In the Color Space patch, change the Input Color Space value to HSL. Here’s how to section of the graph will look:
Because the graph is incomplete, you’ll notice there’s no video in the Simulator:
Connecting all 3 of the Unpack outputs to the 3 Pack inputs would show the original video in the Simulator, because the camera texture would be sent directly to the material without changing the hue or saturation.
For now connect 2 of the Unpack outputs, to show the effect in the Simulator as you’re building it. Connect the bottom 2 Unpack outputs, representing saturation and lightness, to the bottom 2 Pack inputs:
Now you're ready to add patches to the middle of the graph. These patches will add the hue to the end result and let you edit it.
Right-click in the Patch Editor and select:
Here’s how the new section of the graph will look, highlighted in blue:
In the Simulator and Viewport you’ll see the colors in the effect have changed back to normal:
This is because all 3 values are being sent through the graph and to the material without any manipulation. Adding the Value patch will let you edit this. So, connect the output of the Value patch to the top input in the Add patch
The graph will look like this:
You can now edit the input value in the Value patch. Anything between 0 and 1 will work:
Right now the color is very bold. Editing the saturation will make it more subtle.
Break the connection you’ve made between the second output in the Unpack patch and the second input in the Pack patch. Just click on the connection, and press delete on your keyboard.
To edit the saturation, you’ll use the Multiply and Value patches. Create them using the menu in the Patch Editor:
Here’s how the section of the graph will look:
Just edit the value in the Value patch to make the effect more or less saturated: