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:
In the scene panel, click Add Object.
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.
The camera texture patch
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.
The material patch
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:
The Color Space patch
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:
The Pack and Unpack patches
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:
The beginning of the graph
To build the beginning of the patch graph, connect:
Change Output Color Space 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:
The end of the graph
Before you can start to build the end of the graph, change the data type in one of the Pack patches to Vector 2 by selecting the dropdown menu at the bottom of the patch. Then connect:
In the Color Space patch, change the Input Color Space value to HSL.
In the Vector 3 Pack patch change the bottom two values to 1. In the Vector 2 Pack patch, change the second value to 1.
Here’s how this 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 Z and YUnpack 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:
In the Simulator and Viewport you’ll see the colors in the effect have changed back to normal:
This is because the graph passes all 3 values to the material without manipulation. To change this, add the Hue Value patch. Connect the output of the Value patch to the First Value 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:
Editing the saturation makes the color more subtle. Break the connection you’ve made between the Y output in the Unpack patch and the second input in the Vector 2 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 and double click the Value patch to rename it Saturation
Here’s how the section of the graph will look:
Just edit the value in the SaturationValue patch to make the effect more or less saturated: