Articles
Textures and Materials
Color LUT Textures

Color LUTs

Two identical images of a parrot. Each has had a different LUT applied to it.

Color LUTs (Lookup Textures) are tables of RGB color values. In Spark AR, you can use color LUTs to quickly create color-graded effects across the whole scene. Try this tutorial to create a color LUT effect yourself!

Finding Color LUTs

When you’re starting out it’s a good option to download a color LUT from AR Library. You can also import your own pre-made color LUT PNG files. Spark AR Studio supports 2D color LUTs in square and row image formats.

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

A 1x32 color lut.

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

An 8x8 color lut.

How color LUTs work

To create a color-graded filter effect in Spark AR you need a color LUT plus another input texture, such as the camera texture.

The color values of the camera texture are mapped to the x, y and z coordinates of a location in the color LUT. This location contains a corresponding output color that is rendered over the scene to produce the color-grading effect.

Below we’ve added a yellow-tinted effect to the scene on the right by mapping the color values of the camera texture to a new color based on an amber color LUT.

Two views of the simulator. The one on the right has had a color LUT applied.

Example — applying a color LUT to the whole scene

First, to add a color LUT to your project:

  1. In the Assets panel, click Add Asset.
  2. Select Import, then Color LUT and choose your file from your computer.

When you import a color LUT, the compression is always set to None, and filtering is set to Low by default.

Next:

  1. In the Assets panel, right-click the color LUT.
  2. Select Actions and then Apply to Camera.

A patch graph is set up automatically that will apply the color LUT across the whole scene.

After adding the LUT to the Asset panel, it is applied to the scene. A patch graph appears in the project.

The color LUT patch graph

The patch graph that renders the color-grading effect looks like this:

A patch graph that applies a LUT to the scene.

To create the effect:

  • The Scene Render Pass patch renders cameraTexture0 and any objects in the scene that are children of the Device. This creates an output Texture.
  • The colorLUTShader looks up the RGBA values of this Texture in the Tension color LUT patch and translates them into a new green-tinted color. This alters the Texture and creates the color-grading effect.
  • Finally the Screen Output patch renders the green-tinted color.

A green tint has been applied to the effect, as seen through the simulator.
Was this article helpful?