Real-time image manipulation is always fascinating. With the power of the modern GPU, it is possible to achieve the postprocessing effects all in a single shader.

Remember that in GLSL, matrix are column major.

  • Brightness is a float between [-1, 1], directly adding to the RGB
  • Contrast is a float between [0, 1, ∞], directly
  • Saturation is based upon the grayscale of the image, adding the RGB values with the correspond luminance times (1 – saturation). According to the Wikipedia:

Saturation is one of three coordinates in the HSL and HSV color spaces. The saturation of a color is determined by a combination of light intensity and how much it is distributed across the spectrum of different wavelengths. The purest (most saturated) color is achieved by using just one wavelength at a high intensity, such as in laser light.

  • Hue is the color indicator which can be spherically rotated over the color space.

Hue is one of the main properties (called color appearance parameters) of a color, defined technically (in the CIECAM02 model), as “the degree to which a stimulus can be described as similar to or different from stimuli that are described as redgreenblue, and yellow

  • Vibrance is [0, 1, ∞], it is better than contrast and saturation for image enhancement

Vibrance is a smart-tool which cleverly increases the intensity of the more muted colors and leaves the already well-saturated colors alone. It’s sort of like fill light, but for colors. Vibrance also prevents skin tones from becoming overly saturated and unnatural.

Demo

 

 

Code