Adding a 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.

To create filters you can also use gradient patches or combine custom textures with the camera texture.

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.

Adding the camera texture, canvas and rectangle

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

  1. In the scene panel, 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, click the box next to Width and click Fill Width and the box next to Height and click Fill Height. This will make the rectangle fill the device screen.
  2. 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 Extraction.
  3. Select the material created in the Assets panel, it'll be listed as Material0.
  4. In the Inspector, set the Shader Type to Flat.
  5. Under Diffuse, to the right of Texture 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 the right of Texture.

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 Patch Graph

The beginning of the graph

To build the beginning of the patch graph, connect:

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

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:

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

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:

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. Double click to rename the patch 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 X output of the Unpack patch to the Second Value output in the Add patch.
  • The output of the Add patch to the input in the First Value input in the Modulo patch.
  • The Modulo output to the top input in the Vector 3 Pack patch.

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:

The saturation

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

Now connect:

  • The Y output of the Unpack patch to the Second Value input in the Multiply patch.
  • The output of the SaturationValue patch to the First Value input in the Multiply patch.
  • The output of the Multiply patch to the second input in the Vector 3 Pack patch.

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:

Was this article helpful?