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. let’s talk about…
    COLORS

    View full-size slide

  2. Color Spaces
    Gamma & Linear

    View full-size slide

  3. Gamma & Linear

    View full-size slide

  4. 0, 0, 0 255, 255, 255

    View full-size slide

  5. 0, 0, 0 255, 255, 255
    127, 127, 127 ?

    View full-size slide

  6. 0, 0, 0 255, 255, 255
    127, 127, 127 ?
    128, 128, 128 ?

    View full-size slide

  7. 0, 0, 0 255, 255, 255
    127, 127, 127 ?
    128, 128, 128 ?
    186, 186, 186 ?

    View full-size slide

  8. You are doing it wrong

    View full-size slide

  9. You are doing it wrong
    —— —


    — —
    —— —

    View full-size slide

  10. A CRT uses an electron gun
    fired at a phosphorescent
    screen

    View full-size slide

  11. A CRT uses an electron gun
    fired at a phosphorescent
    screen

    View full-size slide

  12. Gamma 2.2
    Gamma
    Correction

    View full-size slide

  13. what about
    LCD?
    >>>>>>>>>>>>>
    <<<<<<<<<<<<<

    View full-size slide

  14. The eye’s response is non-linear

    View full-size slide

  15. Our visual system follows Steven’s power law
    The eye’s response is non-linear

    View full-size slide

  16. Our visual system follows Steven’s power law
    The eye’s response is non-linear

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. The response curve of an
    LCD is not a gamma curve

    View full-size slide

  21. The response curve of an
    LCD is not a gamma curve
    It is made to look like a gamma curve
    with hardware processing

    View full-size slide

  22. We gamma-encode to optimize
    bandwidth and storage
    It is a compression scheme

    View full-size slide

  23. 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

    View full-size slide

  24. Gamma encoding is not necessary
    with high precision, linear formats
    Examples: OpenEXR, PNG 16 bit,
    Photoshop 16 & 32 bit, RAW files

    View full-size slide

  25. findViewById(R.id.root).setBackground(0xfff32272);
    Gamma encoded

    View full-size slide

  26. This issue affects everything

    View full-size slide

  27. Blurs & resizes → darker image
    This issue affects everything

    View full-size slide

  28. Blurs & resizes → darker image
    Animations → brightness shifts
    This issue affects everything

    View full-size slide

  29. Blurs & resizes → darker image
    Animations → brightness shifts
    3D lighting → hue shifts
    This issue affects everything

    View full-size slide

  30. >>>>>>>>>>>>>>linear space<<<<<<<<<<<<<<
    Do all the math in

    View full-size slide

  31. // 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);

    View full-size slide

  32. // Do not gamma-decode alpha
    // Alpha is *linear*!

    View full-size slide

  33. // OpenGL has extensions and APIs
    // for sRGB encoding/decoding and
    // correct, linear blending
    // Use them, it’s free

    View full-size slide

  34. Color Spaces
    It’s more
    complicated

    View full-size slide

  35. What is a color?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 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

    View full-size slide

  39. 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)

    View full-size slide

  40. Visible
    Spectrum
    CIE 1931 Chromaticity Diagram

    View full-size slide

  41. sRGB
    AdobeRGB
    ProPhotoRGB
    Common RGB color spaces

    View full-size slide

  42. What is a color space?

    View full-size slide

  43. It has 3 primaries
    What is a color space?

    View full-size slide

  44. It has 3 primaries
    It has a white point
    What is a color space?

    View full-size slide

  45. It has 3 primaries
    It has a white point
    It has conversion functions
    What is a color space?

    View full-size slide

  46. sRGB
    AdobeRGB
    ProPhotoRGB
    Common RGB color spaces

    View full-size slide

  47. Conversion functions

    View full-size slide

  48. Equivalent of the gamma functions
    Conversion functions

    View full-size slide

  49. Equivalent of the gamma functions
    Opto-electronic conversion function (OECF)
    Conversion functions

    View full-size slide

  50. Equivalent of the gamma functions
    Opto-electronic conversion function (OECF)
    Electro-optical conversion function (EOCF)
    Conversion functions

    View full-size slide

  51. Which color space?

    View full-size slide

  52. Which color space?
    Unless you know otherwise,
    always assume sRGB

    View full-size slide

  53. 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;

    }

    View full-size slide

  54. Easy to optimize

    View full-size slide

  55. Easy to optimize
    Use lookup tables, 8 bits for encoding, 16 bits for decoding

    View full-size slide

  56. Easy to optimize
    Use lookup tables, 8 bits for encoding, 16 bits for decoding

    View full-size slide

  57. Easy to optimize
    Use lookup tables, 8 bits for encoding, 16 bits for decoding

    View full-size slide

  58. HDTV, Rec.709
    Android TV

    View full-size slide

  59. HDTV, Rec.709
    →Same primaries & white point as sRGB
    Android TV

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. 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

    View full-size slide

  63. You are doing it wrong

    View full-size slide

  64. You are doing it wrong
    —— —


    — —
    —— —

    View full-size slide

  65. Android is doing it wrong

    View full-size slide

  66. Gradients
    Animations (fixed in N)
    Bitmap resize
    Blending
    Anti-aliasing
    Etc…

    View full-size slide

  67. Let’s recap
    Color pipeline

    View full-size slide

  68. Let’s recap
    sRGB input
    Color pipeline

    View full-size slide

  69. Let’s recap
    sRGB input EOCF
    Color pipeline

    View full-size slide

  70. Let’s recap
    sRGB input EOCF Linear input
    Color pipeline

    View full-size slide

  71. Let’s recap
    sRGB input EOCF Linear input Processing
    Color pipeline

    View full-size slide

  72. Let’s recap
    sRGB input EOCF Linear input Processing OECF
    Color pipeline

    View full-size slide

  73. Let’s recap
    sRGB input EOCF Linear input Processing OECF

    Display
    Color pipeline

    View full-size slide