In this tutorial, you’ll learn how to import color LUTs (lookup textures) from AR Library and apply them across the scene. You’ll also work with the native UI picker, adding buttons to your effect that give users a choice between four different colour LUTs.
We'll start with a blank project, but you can download the example project to see the finished effect, complete with custom icons for the buttons.
To get started, open Spark AR Studio. In the Welcome Screen, select Blank project.
Next, choose four colour LUTs from AR Library. You can open AR Library from the toolbar, or by clicking AR Library in the Assets panel.
In the AR library window, click Color LUTs then View All to see a list of all the color LUTs that you can import to your project.
We're creating a seasons-themed effect, so we've picked four LUTs from AR Library that we think best represent the four seasons. To add the LUTs to your project:
To follow our example, pick:
When you're done, the Assets panel will look like this:
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:
This automatically opens the Patch Editor and creates a patch graph, made of the following 6 patches:
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.
If you are using a square color LUT texture, make sure to update the GridSize input of the colorLUTShader patch. Square LUTs are commonly 8 x 8. LUTs provided by the AR library are 32 x 1. Read the troubleshooting section of this page to find out more.
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:
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:
You now need to make the UI picker control which LUT is applied to the scene. To do this:
Your patch graph will look like this:
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:
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:
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:
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:
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
To add 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.
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:
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.
Combine custom textures with visual shader patches to make light shine across the face.
Use Signed Distance Field patches to create patterns and shapes.