Let's Talk about Colors

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

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 —— — — — — — —— —
11. A CRT uses an electron gun fired at a phosphorescent screen
12. A CRT uses an electron gun fired at a phosphorescent screen
16. Gamma 2.2
17. Gamma 2.2
18. Gamma 2.2 Gamma Correction
20. what about LCD? >>>>>>>>>>>>> <<<<<<<<<<<<<
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
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
37. findViewById(R.id.root).setBackground(0xfff32272); Gamma encoded
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
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
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
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
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