Colour grading (also known as colour correction) (also known as color) is a pretty powerful effect used in games, as well as film. It basically involves mapping the full range of colours to other colours, for example darker shades could become blue tinted or dark yellow could become orange. A lookup table (LUT) is basically how this configuration is stored.

If you’re not fully across colour grading/colour correction, here are some links

With that said, in OpenGL we typically use a 3D texture for the LUT. If your version of OpenGL doesn’t allow 3D textures, such as WebGL, then there are other options.

Personally, I prefer this stylized look. Here are two examples:

Animated man

The texture looks like this:

These were rendered in Blender, with a shader setup like this

Blender nodes – Click to zoom

So what does it do?

  • Geometry
    • The UV coordinates are typically mapped to the centre column on the image. I could include lighter colours to the left, but I didn’t. The y-coordinate of the UV (or the v-coordinate) sets the colour. The things I make in this style basically look vertex painted
    • The normal is the normal
  • Separate RGB
    • This really separates the XYZ (z is ignored) of the UV into separate values. The Y stays the same, and the X is modified
  • Normal
    • Gets the dot product of the normal. 0.0 when pointing parallel to the screen, 1.0 when pointing directly into the screen, and -1.0 when pointing directly away. Basically dot(normal,vec3(0,0,1))
  • Multiply
    • Flip the values. faces we see have normals of 0 to 1, the output is now -1 to 0
  • Add
    • Add almost 1, so the range is almost 0 to almost 1. Using exactly 1 picks up colours from the other edge thanks to tiling. In OpenGL you could just set GL_TEXTURE_WRAP_* to GL_REPEAT
  • Add
    • Add the actual UV x co-ordinate (typically 0.5, but sometimes more). you could probably clamp this so you could use the full x-value range. Now we’re sampling textures to the right of the UV based on the normal
  • Combine RGB
    • Combine the UV coordinates, ignore B, it was blank
  • Texture
    • Finally, use this UV and the texture. you could add all sorts of gradients to the texture, even colours that start the same but fade to different dark colours (or ones that don’t fade and look glow in the dark)
  • Output
    • The End!

Here’s another few examples with more interesting geometry and colour gradients:

(model by Dosch Design)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *