{"id":1746,"date":"2012-08-03T16:50:37","date_gmt":"2012-08-03T23:50:37","guid":{"rendered":"http:\/\/the-witness.net\/news\/?p=1746"},"modified":"2012-08-04T09:17:56","modified_gmt":"2012-08-04T16:17:56","slug":"fun-with-in-engine-color-grading","status":"publish","type":"post","link":"http:\/\/the-witness.net\/news\/2012\/08\/fun-with-in-engine-color-grading\/","title":{"rendered":"Fun with in-engine color grading"},"content":{"rendered":"<p>Quite some time ago, Ignacio put some color grading features into the engine, so that you could tell the postprocessor to tweak colors in particular ways. For a while these features were very experimental; we just had them on a debug menu and there wasn't a way to save the settings. We didn't really use the features (in part because we were pretty busy just getting the basic parts of the game together).<\/p>\n<p>Lately, Ignacio and Salvador took the features all the way so that we can use them easily in normal workflow. (This happened over some period of time, but the last parts came together this week). Now you can take a screenshot, screw around with the colors in Photoshop, and load it back into the game to control the grading. I am pretty sure this is not our idea, and we got it from the Uncharted guys or someone like that (Update: The idea was developed by Naty Hoffman and others; see the comments to this article).<\/p>\n<p>Here's how it goes. First, I find an area the look of which I would like to change:<\/p>\n<p><a href=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_13_n02.png\"><img src=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_13_n02-512x288.png\" alt=\"\" title=\"shot_2012.08.03__time_16_13_n02\" width=\"512\" height=\"288\" class=\"aligncenter size-large wp-image-1747\" \/><\/a><\/p>\n<p>Next I hold down the control key while taking the screenshot, causing it to be saved with a special color bar along the top of the image:<\/p>\n<p><a href=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_13_n03.png\"><img src=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_13_n03-512x288.png\" alt=\"\" title=\"shot_2012.08.03__time_16_13_n03\" width=\"512\" height=\"288\" class=\"aligncenter size-large wp-image-1748\" \/><\/a><\/p>\n<p>Then I go into Photoshop and screw around with the colors. Here I am using the Hue\/Saturation tool to shift the palette away from red:<\/p>\n<p><a href=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/lut_test_1.jpg\"><img src=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/lut_test_1-512x288.jpg\" alt=\"\" title=\"lut_test_1\" width=\"512\" height=\"288\" class=\"aligncenter size-large wp-image-1752\" \/><\/a><\/p>\n<p>Or, instead, I may wish to shape the histogram of the image:<\/p>\n<p><a href=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/lut_test_2.jpg\"><img src=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/lut_test_2-512x288.jpg\" alt=\"\" title=\"lut_test_2\" width=\"512\" height=\"288\" class=\"aligncenter size-large wp-image-1753\" \/><\/a><\/p>\n<p>That color bar at the top of the screen acts as a look-up table. The game doesn't need to understand what operations we have performed in Photoshop; it just knows what that color bar looked like when the screenshot was saved out, and, by comparing it to the colors in the result, knows how to transform any color in the rendered scene.<\/p>\n<p>In the game, you can now attach these grading operations to spatial markers, so that color grading kicks in when you are inside specific areas. Here I am setting up some markers in the editor (the marker is the big white box):<\/p>\n<p><a href=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_23_n01.png\"><img src=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_23_n01-512x288.png\" alt=\"\" title=\"shot_2012.08.03__time_16_23_n01\" width=\"512\" height=\"288\" class=\"aligncenter size-large wp-image-1749\" \/><\/a><\/p>\n<p>After setting up two of these boxes, one for each of the two weird color operations I created, then I can walk around in the game and have these operations apply to everything:<\/p>\n<p><a href=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_28_n04.png\"><img src=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_28_n04-512x288.png\" alt=\"\" title=\"shot_2012.08.03__time_16_28_n04\" width=\"512\" height=\"288\" class=\"aligncenter size-large wp-image-1751\" \/><\/a><\/p>\n<p><a href=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_27_n03.png\"><img src=\"http:\/\/the-witness.net\/news\/wp-content\/uploads\/2012\/08\/shot_2012.08.03__time_16_27_n03-512x288.png\" alt=\"\" title=\"shot_2012.08.03__time_16_27_n03\" width=\"512\" height=\"288\" class=\"aligncenter size-large wp-image-1750\" \/><\/a><\/p>\n<p>This gives us a really nice degree of control over how the game looks. We plan to use it to help with the color theming that will tie together specific areas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quite some time ago, Ignacio put some color grading features into the engine, so that you could tell the postprocessor to tweak colors in particular ways. For a while these features were very experimental; we just had them on a debug menu and there wasn&#8217;t a way to save the \u2026<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"http:\/\/the-witness.net\/news\/2012\/08\/fun-with-in-engine-color-grading\/\">Continue reading<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,8],"tags":[],"_links":{"self":[{"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/posts\/1746"}],"collection":[{"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/comments?post=1746"}],"version-history":[{"count":8,"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/posts\/1746\/revisions"}],"predecessor-version":[{"id":1761,"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/posts\/1746\/revisions\/1761"}],"wp:attachment":[{"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/media?parent=1746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/categories?post=1746"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/the-witness.net\/news\/wp-json\/wp\/v2\/tags?post=1746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}