Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's Talk about Colors

Let's Talk about Colors

This talk explains the importance of processing colors in linear space instead of gamma space.

Romain Guy

July 28, 2016
Tweet

More Decks by Romain Guy

Other Decks in Programming

Transcript

  1. 0, 0, 0 255, 255, 255 127, 127, 127 ?

    128, 128, 128 ? 186, 186, 186 ?
  2. Our visual system follows Steven’s power law The eye’s response

    is non-linear Subjective magnitude of sensation Magnitude of stimulus
  3. Our visual system follows Steven’s power law The eye’s response

    is non-linear Gamma! Subjective magnitude of sensation Magnitude of stimulus
  4. The response curve of an LCD is not a gamma

    curve It is made to look like a gamma curve with hardware processing
  5. Linear Gamma Input quantized over 5 bits for visualization 50%

    of the precision allocated to the darkest 50% intensities 70% of the precision allocated to the darkest 50% intensities 11~12 bits needed 8 bits are sufficient
  6. Gamma encoding is not necessary with high precision, linear formats

    Examples: OpenEXR, PNG 16 bit, Photoshop 16 & 32 bit, RAW files
  7. a=0

  8. Blurs & resizes → darker image Animations → brightness shifts

    3D lighting → hue shifts This issue affects everything
  9. // Gamma encoded colors
 int color1 = getColor1();
 int color2

    = getColor2();
 
 // Extract red and convert to linear
 float r1 = ((color2 >> 16) & 0xff) / 255.0f;
 r1 = (float) Math.pow(r1, 2.2); float r2 = // …
 
 // Do the math and gamma-encode
 float r = r1 * 0.5f + r2 * 0.5f;
 r = (float) Math.pow(r, 1.0 / 2.2);
  10. // OpenGL has extensions and APIs // for sRGB encoding/decoding

    and // correct, linear blending // Use them, it’s free
  11. What is a color? For users, it’s a visual perception

    that can be described by hue, brightness and colorfulness
  12. What is a color? For users, it’s a visual perception

    that can be described by hue, brightness and colorfulness
  13. What is a color? For users, it’s a visual perception

    that can be described by hue, brightness and colorfulness For developers, it’s a tuple of numbers, in a color model associated with a color space
  14. What is a color? For users, it’s a visual perception

    that can be described by hue, brightness and colorfulness For developers, it’s a tuple of numbers, in a color model associated with a color space RGB(0.92,0.91,0.86) CMYK(0.5,0.3,0.6,0)
  15. It has 3 primaries It has a white point It

    has conversion functions What is a color space?
  16. float OECF_sRGB(float linear) {
 float low = linear * 12.92f;


    float high = (pow(linear, 1.0f / 2.4f) * 1.055f) - 0.055f;
 return linear <= 0.0031308f ? low : high;
 }
  17. HDTV, Rec.709 →Same primaries & white point as sRGB →Different

    OECF/EOCF, ≈gamma 2.4 UHDTV, Rec.2020 Android TV
  18. HDTV, Rec.709 →Same primaries & white point as sRGB →Different

    OECF/EOCF, ≈gamma 2.4 UHDTV, Rec.2020 →Similar OECF/EOCF to Rec.709 Android TV