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.

237be48129b762b31847d6167597366d?s=128

Romain Guy

July 28, 2016
Tweet

Transcript

  1. let’s talk about… COLORS

  2. Color Spaces Gamma & Linear

  3. Gamma & Linear

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

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

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

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

    128, 128, 128 ? 186, 186, 186 ?
  8. You are doing it wrong

  9. You are doing it wrong —— — — — —

    — —— —
  10. None
  11. A CRT uses an electron gun fired at a phosphorescent

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

    screen
  13. None
  14. None
  15. None
  16. Gamma 2.2

  17. Gamma 2.2

  18. Gamma 2.2 Gamma Correction

  19. None
  20. what about LCD? >>>>>>>>>>>>> <<<<<<<<<<<<<

  21. None
  22. The eye’s response is non-linear

  23. Our visual system follows Steven’s power law The eye’s response

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

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

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

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

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

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

    curve It is made to look like a gamma curve with hardware processing
  31. We gamma-encode to optimize bandwidth and storage It is a

    compression scheme
  32. 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
  33. Gamma encoding is not necessary with high precision, linear formats

    Examples: OpenEXR, PNG 16 bit, Photoshop 16 & 32 bit, RAW files
  34. None
  35. None
  36. None
  37. findViewById(R.id.root).setBackground(0xfff32272); Gamma encoded

  38. None
  39. a=0

  40. a=0 b=1

  41. a=0 b=1 c=0.5

  42. c=0.5

  43. c=0.21 c=0.5

  44. None
  45. None
  46. This issue affects everything

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

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

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

    3D lighting → hue shifts This issue affects everything
  50. None
  51. >>>>>>>>>>>>>>linear space<<<<<<<<<<<<<< Do all the math in

  52. // 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);
  53. // Do not gamma-decode alpha // Alpha is *linear*!

  54. // OpenGL has extensions and APIs // for sRGB encoding/decoding

    and // correct, linear blending // Use them, it’s free
  55. None
  56. Color Spaces It’s more complicated

  57. What is a color?

  58. What is a color? For users, it’s a visual perception

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

    that can be described by hue, brightness and colorfulness
  60. 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
  61. 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)
  62. Visible Spectrum CIE 1931 Chromaticity Diagram

  63. sRGB AdobeRGB ProPhotoRGB Common RGB color spaces

  64. What is a color space?

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

  66. It has 3 primaries It has a white point What

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

    has conversion functions What is a color space?
  68. sRGB AdobeRGB ProPhotoRGB Common RGB color spaces

  69. Conversion functions

  70. Equivalent of the gamma functions Conversion functions

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

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

    conversion function (EOCF) Conversion functions
  73. Which color space?

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

  75. sRGB

  76. sRGB

  77. 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;
 }
  78. Easy to optimize

  79. Easy to optimize Use lookup tables, 8 bits for encoding,

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

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

    16 bits for decoding
  82. OECF

  83. Android TV

  84. HDTV, Rec.709 Android TV

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

    TV
  86. HDTV, Rec.709 →Same primaries & white point as sRGB →Different

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

    OECF/EOCF, ≈gamma 2.4 UHDTV, Rec.2020 Android TV
  88. 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
  89. None
  90. None
  91. You are doing it wrong

  92. You are doing it wrong —— — — — —

    — —— —
  93. Android is doing it wrong

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

  95. Let’s recap Color pipeline

  96. Let’s recap sRGB input Color pipeline

  97. Let’s recap sRGB input EOCF Color pipeline

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

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

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

    pipeline
  101. Let’s recap sRGB input EOCF Linear input Processing OECF Display

    Color pipeline
  102. Questions