Levels control shader

A little piece of code to reproduce the Levels control of Photoshop…

Input levels:

I already talked about the gamma correction (mid-tone slider), and I won’t explain what the shadows and highlights (black/white points) sliders are doing (excellent article here) but basically these can be used to remap the tonal range of the image. Here is how it’s calculated:

#define GammaCorrection(color, gamma)  pow(color, vec3(1.0 / gamma))
#define LevelsControlInputRange(color, minInput, maxInput) min(max(color – vec3(minInput), vec3(0.0)) / (vec3(maxInput) – vec3(minInput)), vec3(1.0))
#define LevelsControlInput(color, minInput, gamma, maxInput) GammaCorrection(LevelsControlInputRange(color, minInput, maxInput), gamma)

Example with values from the 1st screenshot (blackpoint = 90/255, gamma = 4, whitepoint = 150/255), red: original color, green: blackpoint & whitepoint modified, blue: same with gamma:

Output levels:

This is useful to shorten the tonal range meaning compressing it to reduce contrast and shift it, details here.

#define LevelsControlOutputRange(color, minOutput, maxOutput) mix(vec3(minOutput), vec3(maxOutput), color)

Example with values from the 1st screenshot (min output = 40/255, max output = 180/255), red: original color, green: output levels applied:

Putting it all together:

#define LevelsControl(color, minInput, gamma, maxInput, minOutput, maxOutput) LevelsControlOutputRange(LevelsControlInput(color, minInput, gamma, maxInput), minOutput, maxOutput)

Same example but both input and output levels taken into account, red: original color, green: final result:

So these macros make it quite easy to increase or reduce contrast, shift and clip tonal range, lighten or darken shadows and highlights. I added the (GLSL / HLSL) code to the Photoshop Math shaders.

Advertisement

CrossProcessing shader

Hi ! I’m doing a lot of image processing at work since a few weeks, and there a lots of things I wanna try, from post processes to dynamic geometry, but I would need another life for that. After having watched some (really nice) super cars videos (just check at the first one showing the Corvette to see what I mean), I’ve been talking with Nico about the Cross Processing effect, also called xpro, used in photography, and probably in the Corvette video.

After a quick talk (thanks) I made a simple pixel shader that post process a given scene with this nice effect 🙂

I followed this Photoshop tutorial to make it, here are the steps to work with the shader:

• Make a black-to-white gradient
• Add a New fill or adjustment layer, select Curves, and set the curves just like in the tutorial

• Save the 1D image, it’ll be used in the pixel shader just like a curve modifier
• Modify the final color of your pixels with this (GLSL) code:

vec3 curvesColor;

curvesColor.r = texture1D(curveTex, pixelColor.r ).r;
curvesColor.g = texture1D(curveTex, pixelColor.g).g;
curvesColor.b = texture1D(curveTex, pixelColor.b).b;

gl_FragColor.rgb = curvesColor;

And voila ! Here are some screenshots I took in Reverse (my end of studies project [team of 6 students]), maybe not the best example for this kind of effect but anyway:

Without

Without

With

With

With

With

In fact it makes me think about color temperature again, but this time the color is modifyed per channel and is dependent to the color components themselves instead of the luminance component of the pixel.

One more screen with all the effects combined during turbo (dolly zoom, desaturation, radial motion blur):

With

Well, I guess these are the first public screenshots of the final version of the game 🙂

Oh and by the way …