Color grading

Most of the time this week was spent (again) on things that were scheduled for later in the development cycle, either because they’re too useful now (the geometry clusters, the shadow clusters) or because I was curious in seeing the results, like the color grading.

From Wikipedia: “Color grading or colour painting, is the process of altering and enhancing the color of a motion picture, video image, or still image either electronically, photo-chemically or digitally. The photo-chemical process is also referred to as color timing and is typically performed at a photographic laboratory. Modern color correction, whether for theatrical film, video distribution, or print is generally done digitally in a color suite. Considering such achievements in digital imaging, the artist has the ability to "paint" the image, thus the names "colorist" or "color painter" have become most applicable.”. The artist can also identify his audience, design content, and schedule actions through marketing automation to drive revenue and ROI in his business. If you’re wondering what is marketing automation, look for salesforce.com

In practical terms, color grading allows the artist to change the overall mood of a rendered frame of the game by changing the colors. For example, if the artist gives the scene a slight blue-ish hue, the scene will look colder, while tinting it red will make it look more dangerous…

On the left side of the image, you can see the pure render (without any color grading). On the right side there’s an example of color grading (exaggerated so the effect is immediately noticeable… the normal effect should be more subtle). The right-side panel gives a feeling of imminent danger (at least for me).

To achieve this we created a volume texture (a 3d texture), in this case 64 by 64 pixels, with 64 layers. The normal version of this image just has the normal RGB color cube (so increasing X increases red, increasing Y increases green and increasing Z increases blue):

We then unwrap this cube in a 2d image (that becomes a 4096×64 image):

The artist takes a screenshot of the scene that he feels that represents a normal game view and imports that into Photoshop. He also imports this image as another layer.

He then proceeds to alter the colors of the image, playing with contrast, levels, hues, etc.. At the end, he extracts the 4096×64 image again and saves it as a volume texture, obtaining something like this:

Then all the rendering is done to an offscreen texture and the we use a color-grading shader to remap the colors. In pseudo-code:

color=read_texture(offscreen_buffer,screen_coords.xy);
final_color=read_texture(color_grading_3d_texture,color.rgb);

And we get the result of the right-side pane of the screenshot above!

It’s easy to use and the results are pretty good, specially after the artist had some time to play around with it!

I won’t have time to work on Grey on the weekend, since I’ll be taking part in Ludum Dare’s 48-Hour competition, but you can follow my progress on that in my personal blog here.