In response to COVID-19, we've temporarily suspended reviews and publishing of effects submitted to Facebook and Instagram. Learn more.

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.

Tutorial: Color Filter

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:

  • Making black and white effects.
  • Correcting and enhancing colors.

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.

You can also use gradient patches to make color filters, or combine the camera texture with a custom texture like in the Light Leak tutorial.

What are hue and saturation?

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.

What you’re going to build

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.

The starting point is the camera texture. This is a texture made from the live video taken by the camera when the effect is being used. A rectangle renders it in the scene.

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.

Add the camera texture, canvas and rectangle

To get started, add the objects that render the texture in the scene. Start with the rectangle:

  1. Click Add Object.
  2. Select 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:

  1. In the Inspector, change the two Size values to Fill Width and Fill Height, to make the rectangle fill the device screen.
  2. Set vertical and horizontal Flexibility, so the rectangle scales with the size of the device screen.
  3. Click + next to Materials, to create a material for the rectangle.

Then add the camera texture:

  1. In the Scene panel, select the Camera.
  2. In the Inspector, click + next to Texture.
  3. Select the material created in the Assets panel, it'll be listed as cameraTexture0.
  4. In the Inspector, set the Shader Type to Flat.
  5. Under Diffuse, click the dropdown and select cameraTexture0.

Here’s how your project will look:

Opening the Patch Editor

All the other steps you'll follow to complete this project use Patch Editor. To open the Patch Editor:

  1. In the menu bar, click View.
  2. Select Show/Hide Patch Editor.

Creating the patches

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:

  1. In the Assets panel, select cameraTexture0
  2. Drag it from the Assets panel into the Patch Editor.

You’ll see an orange patch, cameraTexture0:



It has 3 output ports:

  • RGBA - this port outputs Red, Green, Blue and Alpha - the colors that make up the image plus an alpha channel.
  • RGB - this port outputs Red, Green and Blue, and no alpha channel.
  • A - this port outputs the alpha channel, which represents transparency in the image.

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:

  1. In the Assets panel, select material0.
  2. In the Inspector, click the circle next to Diffuse.

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:

  • HSV - for hue, saturation and value.
  • HSL - for hue, saturation and lightness, which you’ll use for this tutorial.

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:

  1. Right-click in the Patch Editor.
  2. Select 2 Color Space patches from the menu.

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:

  • 2 Pack patches.
  • An Unpack patch.

Building the graph

Start with the beginning and end of the graph.

The beginning of the graph

Connect:

  1. The RGB output in the camera texture patch to the input in the Color Space patch.
  2. The output of the Color Space patch to the input in the Unpack patch.

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:

The end of the graph

First change the data type in one of the Pack patches to Vector 2. Then connect:

  1. The output of the Vector 3 Pack patch to the input in Color Space.
  2. The output of the Color Space patch to the top input in the Vector 2 Pack patch.

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:

The hue

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:

  • A Value patch - this is where you’ll input a number value to control the hue.
  • An Add patch - to combine the value in the Value patch with the hue data passed from the Color Space and Unpack patches.
  • A Modulo patch - to divide the input from the Add patch, and trim the whole number result to leave just the decimal. This will cause the hue value to return back to 0 when it exceeds 1.


Connect:

  • The bottom output of the Unpack patch to the bottom output in the Add patch.
  • The output of the Add patch to the input in the Modulo patch.
  • The Modulo output to the top input in a Pack patch.

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.

The saturation

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:



Now connect:

  • The second output of the Unpack patch to the bottom input in the Multiply patch.
  • The output of the Value patch to the top input in the Multiply patch.
  • The output of the Multiply patch to the second input in the Pack patch.

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:

Learn more