Adding a LUT to your effect

Now it’s time to start applying the color LUTs to your scene. This is done using patches and the Patch Editor. In the Assets panel:

1. Right click one of your color LUTS. We chose Chrome.
2. Click Actions, then Apply to Camera.

This automatically opens the Patch Editor and creates a patch graph, made of the following 6 patches:

• Device. This producer patch, usually colored purple, represents the device being used to view the effect.
• cameraTexture0. This represents the live video being captured by the camera.
• Scene Render Pass. This patch gives you more flexibility over how the objects in your scene are rendered on a user’s screen.
• colorLUTShader. This patch represents your shader, which you can see in the Assets panel.
• Device. This yellow patch represents the output of the user’s screen.

The sixth patch, titled Chrome in the below example, represents your chosen LUT. In the next section, we’ll be replacing this patch with a Picker UI that allows users to switch between the four different LUTs.

Adding the picker UI

To add the Picker UI, you'll need to delete the patch that represents the color LUT (Chrome, in our example). To do this, in the Patch Editor:

1. Click the patch.
2. Press delete or backspace on your keyboard.

You’ll notice that you can no longer see a person in the Simulator. This is because the colorLUTShader patch is expecting to receive a LUT to combine with the camera texture. Without this, the render pipeline is broken and no image is displayed.

Next, add the Picker UI patch from the Patch Editor menu. To open the menu:

1. Double click the Patch Editor.
2. Under User Interface, select Picker UI.
3. Click Add patch.

You now need to make the UI picker control which LUT is applied to the scene. To do this:

1. In the Picker UI patch, connect the Selected Texture output to the ColorLUT input of the colorLUTShader patch.
2. In the PickerUI patch, to the right of Visible, select the box.

Your patch graph will look like this:

Finishing the effect

At this point, the Simulator will still be blank. All that’s left to do is to add your four color LUTs to the Picker UI patch. To do this, go the Patch Editor and:

• In the Picker UI patch, click the dropdown to the right of the Texture 1 input.
• Select one of your color LUTs.
• Repeat this for Texture 2, Texture 3 and Texture 4

Finally, click the Restart icon in the toolbar to display the circle buttons in the Simulator. As you click each button, a different LUT will be applied to the effect. Your finished effect will look like this:

Extra credit: custom icons and face retouching

The buttons in the effect above use the chosen color LUT textures as icons. To make sure people using your effect understand the seasons theme, you can apply themed textures to the buttons instead.

To get started, download the sample content and open the unfinished project. In the unfinished project, you'll see we've already imported the four different textures you'll use as icons. They're listed in the Assets panel as Spring, Summer, Autumn, Winter.

Changing the compression settings

Next, you need to set each icon's compression to None. This is because the Picker UI only supports uncompressed textures. To edit the compression:

1. In the Assets panel, select all four textures (hold down the Shift key on your keyboard and click the texture).
2. Go to the Inspector. Under Compression and to the right of each device type, select None from the dropdown.

The Compression section will then look like this:

Adding the icon textures to the Picker UI patch

Next, you need to replace the LUT textures in the Picker UI patch with the new icon textures. When you're done, the Picker UI patch will look like this:

In the Simulator, you'll also notice that the new icon textures are applied to both the buttons and the whole scene, instead of to the buttons only. To correct this, we need to connect each icon texture (Spring, Summer, Autumn, Winter) with the corresponding Color LUT texture (Lavendertone, Chrome, Western, Blu). In the next section, we'll show you how to do this, using an Option Picker patch.

Adding the Option Picker patch

Finally, you'll add an Options Picker patch. This patch contains your LUTs and connects them to the right buttons in your effect. To add this patch, double click the Patch Editor – you’ll find the Option Picker patch under Utility.

Once this patch is added, all that’s left is to add our LUTs and connect them to the right inputs of the Picker UI patch:

1. Start by changing the data type listed at the bottom of the Options Picker to Texture (it will be Number by default).
2. Next, add your four LUTs to the dropdowns in the Options Picker patch.
3. Connect the output of the Option Picker patch to the ColorLUT input of the colorLUTShader patch. Doing this will replace the connection with the Picker UI patch that was previously using this input.
4. Finally connect the Selected Option Index output of the Picker UI patch to the Option input of the Option Picker patch.

When you are done, your patch graph will look like this:

Click the Restart icon in the toolbar to try out the new buttons in the Simulator.

Your final effect will look like this:

Adding the Face Retouching patch group

As a finishing touch, we'll add retouching to our project with the Face Retouching patch group. This patch group can only be used in projects using render pass patches.

To add retouching:

1. Select Device in the Scene Panel
2. In the Inspector click Create to the right of Retouching

You'll see a warning. This is because the colorLUTShader is already connected to the Device Screen Output.

Click OK to remove the warning. We'll fix this in the next two steps. The faceMesh0 and Face Retouching patches will be added to your graph.

Now connect:

• The output of the Face Retouching patch to the Texture input of the colorLUTShader patch.
• The ouput of the colorLUTShader patch to the Device Screen Output patch.

Your graph will look like this:

You'll see that color LUTs are working in the Simulator and retouching is also applied to the face.

Removing unnecessary patches

The correct render pipeline to render the face mesh and retouching to the scene was added automatically when we added the Face Retouching patch group. This means we no longer need the Device or the Scene Render Pass patches. Delete these two patches from your graph:

Your final graph will look like this:

Troubleshooting LUTs

Using the correct LUT format for your effect

Spark AR Studio supports 2D color LUTs in square and row PNG image formats. JPG files aren't supported.

An 8 x 8 square-format color LUT (8 squares x 8 rows):

A 1 x 32 row-format color LUT (32 squares x one row):

For this tutorial, we used the colorLUTShader patch with a row-format color LUT. If you'd like to use square LUT textures, make sure to update the gridSize input of the colorLUTShader patch to match the new format.

Please note that the fastColorLUT patch (not used above) only supports square-format LUTs.

If you follow the method used in this tutorial (import your LUT to the Assets panel and click Apply to Camera), the correct patch for your LUT format will be created automatically.