Shaders, Part 4 – Image Post Processing

As I wrote before in a much earlier blog post, Shaders can be used to post-processing images like putting a filter on a image file in Photoshop, only in real time. The color and hue of the pixels can be changed to different values, thus changing the look and feel of the rendered product greatly, today we’re going to talk about some of them.

Mainly, post-processing of the image is done in the fragment shader. By changing the values of color in the pixels, we could change the overall tune of the rendered product or give the result a drastically makeover. By changing the values of the hues in the color of the pixels, we could apply different filter effects such like sepia, contrast and other neat effects. By changing the positions of the pixels, we could do…. nothing on its own, but we’ll get to it later when talking about blurring in later weeks.

Last time I posted a video on the video game Sonic Generations, which utilize a unique result as a storytelling gimmick, in the hub screen when selecting an act, the entire entrance of the act is in a white color, all the models and other effects are there if not just stopped, the only thing that’s changed is the color of the surface. Though by the looks of it, a single post-processing won’t be enough, but using shaders, there is a way of making all pixels of a certain object white.

Another example is from Valve’s own Counter-Strike series, in their newest work Global Offensive, when you spawn at the beginning of a match, the entire screen is of a reduced hue for no apparent reason (no, seriously I don’t know why they do that) for several seconds before the screen light up, as can be seen in this screenshot.

The reduced hue effect can be easily recreated in GLSL using the following kind of fragment shaders.

uniform sampler2D Image;
uniform sampler3D RGB2HSI;
uniform sampler3D HSI2RGB;
uniform float hueShift;
uniform float satBoost;
varying vec2 texCoord;
void main(){
// Sample the image
vec3 rgb = texture2D(Image, texCoord).rgb;
// Look up the corresponding HSI value
vec3 hsi = texture3D(RGB2HSI, rgb).xyz;
// Manipulate hue and saturation
hsi.x = fract(hsi.x + hueShift);
hsi.y *= satBoost;
// Look up the corresponding RGB value
gl_FragColor = texture3D(HSI2RGB, hsi);
}

Then we can hook it onto the scene that we need to render, then write additional c++ code to actually detect the change of the hue and how much the hue should be changed. This should create an effect that most definitely looks like the new Counter-Strike game.

The reading week is coming, I heard in the tutorials HDR Bloom would be covered, The first screenshot of this blog, which comes from “Dream”, has really good HDR Bloom effects. Until then…

(*Update: One of my friend tell me that the reduced hue is an indication that you cannot move during the first 5 seconds of the match, okay then.)