Alexander Burt - Inside of 2D-graphics

1,034 views
1,021 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,034
On SlideShare
0
From Embeds
0
Number of Embeds
753
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Я – Саша Бурт. Моё последнее место работы – Parallels, где я был главным дизайнером UX. Последние два с половиной года я делаю свой проект, в рамках которого я написал двухмерную графическую библиотеку. Эта презентация о том, из чего состоит такая библиотека и какие есть нюансы и подводные камни.
  • Пиксели нас окружали всегда.
  • и не только на земле
  • некоторые пиксели можно двигать
  • пиксели можно группировать
  • по мере того, как мы всё это понимали, наше воображение набирало скорость
  • (Ворота Иштар) мы заметили, что пиксели могут быть разной формы и разных размеров
  • в 1860 гг мы поставили этот принцип на конвейер
  • темнее там, где точки жирнееесли четыре цвета, то экраны повёрнуты, чтобы уменьшить повторения узора
  • темнее там, где точки жирнееесли четыре цвета, то экраны повёрнуты, чтобы уменьшить повторения узора
  • результат получается вот такой
  • папирус
  • прямоугольники
  • Преобразование координат
  • Преобразование координат
  • Преобразование координат
  • Перспективной проекции хватит для простого «айпадного» 3D
  • сканлинии позволяют наладить эффективное общение между логическим кодом (медленным) и рассчётным кодом (быстрым)
  • растеризация
  • в полтора раза медленнее
  • касательные должны быть горизонтальными
  • (привет от нашего друга :)
  • Как краска, только наоборот
  • Угол зрения; проблема с гаммой остаётся.
  • Угол зрения; проблема с гаммой остаётся.
  • Угол зрения; проблема с гаммой остаётся.
  • Alexander Burt - Inside of 2D-graphics

    1. 1. Двухмерная графикаИЗНУТРИ Александр Бурт
    2. 2. ПЕЧАТЬ
    3. 3. Полутоновый экран
    4. 4. Углы экранов CMYK
    5. 5. Центральная ямка
    6. 6. ?
    7. 7. Формы пикселей
    8. 8. Плюсы и минусы
    9. 9. Плюсы и минусы Y X
    10. 10. Плюсы и минусы Y Z X
    11. 11. Плюсы и минусы
    12. 12. ПрямоугольныеПИКСЕЛИ
    13. 13. Соотношение сторон Монитор 1.0 PAL 1.09 PAL Widescreen 1.46 NTSC 0.91 NTSC Widescreen 1.21 Anamorphic 2.0 Cinemascope 2.39
    14. 14. ЧТОТАКОЕПИКСЕЛЬ?
    15. 15. ко ор дина ты
    16. 16. Преобразование координат масштаб вращение перспективнаясмещение искажение проекция
    17. 17. смещение
    18. 18. масштаб
    19. 19. смещение
    20. 20. вращение
    21. 21. перспективная проекция
    22. 22. Р А С Т Е Р И З А Ц И Я
    23. 23. Сканлинии
    24. 24. Сканлинии
    25. 25. би н0с ь 1 1
    26. 26. byte b = 0xFF; // 8 битовushort w = 0xFFFF; // 16 битов
    27. 27. 0 1 2 3 4 5 6 7 8 9 A B C D E F ?00 10 10 20 20 30 30 40 40 50 50 6060 70 70 80 80 90 90 A0 A0 B0 B0C0 C0D0 E0 D0 F0 E0 F0 FF FF
    28. 28. 0 1 2 3 4 5 6 7 8 9 A B C D E F00 10 20 30 40 50 60 70 80 90 A0 B0 C0 D0 E0 F0 FF00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF000 111 222 333 444 555 #fff ≡ 666 777 #ffffff 888 999 AAA BBB CCC DDD EEE FFF0000 1111 2222 3333 4444 5555 6666 7777 8888 9999 AAAA BBBB CCCC DDDD EEEE FFFF
    29. 29. 8
    30. 30. byte b = 0x98;ushort w = b << 8; // 0x9800ushort w = (b << 8) | b; // 0x9898
    31. 31. 8
    32. 32. ushort w = 0x98FF;byte b = w >> 8; // 0x98byte b = (w + 0x80) >> 8; // 0x997F >> 8 = 0x99
    33. 33. 96 97 98 99 9A9666 96EE 9777 97FF 9888 9911 9999 9A22 9AAA 98FF
    34. 34. ushort w = 0x98FF;byte b = w >> 8; // 0x98byte b = (w + 0x80) >> 8; // 0x997F >> 8 = 0x99
    35. 35. ushort w = 0x9900;byte b = w >> 8; // 0x99byte b = (w + 0x80) >> 8; // 0x9980 >> 8 = 0x99
    36. 36. 96 97 98 99 9A9666 96EE 9777 97FF 9888 9911 9999 9A22 9AAA 9900
    37. 37. ushort w = 0x9900;byte b = w >> 8; // 0x99byte b = (w + 0x80) >> 8; // 0x9980 >> 8 = 0x99
    38. 38. 96 97 98 99 9A 111 889666 96EE 9777 97FF 9888 9911 9999 9A22 9AAA
    39. 39. ushort w = 0x9900;byte b = ((w & 0xF000) >> 8) | ((w & 0x0FFF) + 0x88) / 0x111; // 0x98
    40. 40. ushort w = 0x9900; byte b = w >> 8; byte b = (w + 0x80) >> 8;00 01 FF 0000..00FF ... FF00..FFFF
    41. 41. Image class Image { public: Image(uint width, uint height) : m_width(width) , m_height(height) { m_buffer = (pix8*)calloc(m_width * m_height, sizeof(pix8)); } ~Image() { free(m_buffer); } uint GetWidth() { return m_width; } uint GetHeight() { return m_height; } pix8* GetBuffer() const { return m_buffer; } private: uint m_width; uint m_height; pix8* m_buffer; };
    42. 42. Graphicsclass Graphics{public: Graphics(Image* image) : m_image(image) {} void FillRect(int x, int y, int width, int height, const Brush& brush); void DrawImage(int x, int y, Image* image, float opacity); /* * * * * ...etc... * * * */private: Image* m_image;};
    43. 43. Единичный отрезок
    44. 44. Интерполяция A B C
    45. 45. Целые числа
    46. 46. float a = … ; // [0..1]float b = … ; // [0..1]float c = a * b;
    47. 47. int a = … ; // [0..255]int b = … ; // [0..255]int c = a * b;
    48. 48. float fa = (float)a / 255.0;float fb = (float)b / 255.0;int c = (int)((fa * ft) * 255.0);
    49. 49. int MultInt(int a, int b){ return (a * b) / 255;}
    50. 50. int MultInt(int a, int b){ return (a * b) >> 8; // (a * b) / 256}
    51. 51. int MultInt(int a, int b){ return (a * b + 0x80) >> 8;}
    52. 52. int MultInt(int a, int b){ int temp = a * b + 0x80; return (temp + (temp >> 8)) >> 8;}
    53. 53. Многабукф
    54. 54. int a = … ; // [0..255]int b = … ; // [0..255]int t = … ; // [0..255]int c = a + IntMult(b – a, t);
    55. 55. int p1 = … ; // 0xAARRGGBBint p2 = … ; // 0xAARRGGBBint t = … ; // [0..255]int r1 = (p1 >> 16) & 0xFF;int g1 = (p1 >> 8) & 0xFF;int b1 = (p1 ) & 0xFF;int a1 = (p1 >> 24) & 0xFF;int r2 = (p2 >> 16) & 0xFF;int g2 = (p2 >> 8) & 0xFF;int b2 = (p2 ) & 0xFF;int a2 = (p2 >> 24) & 0xFF;int r3 = r1 + MultInt(r2 – r1, t);int g3 = g1 + MultInt(g2 – g1, t);int b3 = b1 + MultInt(b2 – b1, t);int a3 = a1 + MultInt(a2 – a1, t);int p3 = (r3 << 16) | (g3 << 8) | (b3 ) | (a3 << 24);
    56. 56. union pix8{ int RGBA; struct { byte R, G, B, A };};//// ...//pix8& p1 = (pix8&)… ; // 0xAARRGGBBpix8& p2 = (pix8&)… ; // 0xAARRGGBBint t = … ; // [0..255]pix8 p3;p3.R = p1.R + MultInt(p2.R – p1.R, t);p3.G = p1.G + MultInt(p2.G – p1.G, t);p3.B = p1.B + MultInt(p2.B – p1.B, t);p3.A = p1.A + MultInt(p2.A – p1.A, t);
    57. 57. Цветовые пространстваЦветовые пространства
    58. 58. компонентные хроматические концептуальные
    59. 59. Распределение конусов
    60. 60. CIE 1931 2° Стандартный наблюдатель
    61. 61. Гамут10.90.80.70.60.50.40.30.20.10 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    62. 62. Гамут10.90.80.70.60.50.40.30.20.10 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    63. 63. Гамут10.90.80.70.60.50.40.30.20.10 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    64. 64. Гамут10.9 спектральный локус0.80.70.60.50.40.30.20.10 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    65. 65. Гамут10.90.80.70.60.50.40.30.20.10 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 1 0.8 0.9 фиолетовый край
    66. 66. Гамут10.90.8 локус0.7 чѐрного тела0.60.50.40.30.20.10 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    67. 67. Гамут10.90.80.70.60.50.40.30.20.10 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    68. 68. Гамут10.90.80.70.60.50.40.30.20.10 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    69. 69. R RG GB B×0
    70. 70. H 1-HS SV V
    71. 71. Компоновка (compositing)
    72. 72. ПеремножениеЦвета неперемноженный (unpremultiplied) перемноженный (premultiplied)
    73. 73. Перемножение
    74. 74. Перемножение
    75. 75. Г р а д и е н т ы
    76. 76. 2 цвета
    77. 77. 4 цвета
    78. 78. линейный радиальный угловой t t t
    79. 79. smoothness = 100%
    80. 80. smoothness = 100%
    81. 81. smoothness = 100%
    82. 82. Изображения
    83. 83. Интерполяция
    84. 84. Нарочныйантиалиасинг
    85. 85. узоры
    86. 86. Шейдеры
    87. 87. class ColorBrush : Brush{public: ColorBrush(const Color& color) : m_color(color) {} // virtual void FillScanline(Image& img, int y, int[] edges) { assert(edges.Count % 2 == 0); for (int i = 0; i < edges.Count; i += 2) { for (int x = edges[i]; x < edges[i + 1]; x++) { pix8& pix = img.Buffer[y * img.Width + x]; pix = Over(pix8(m_color), pix); } } {private: Color m_color;};
    88. 88. Brush Color Brush Gradient Brush Linear Gradient Brush Radial Gradient Brush Angular Gradient Brush Pattern Brush Noise Brush ...
    89. 89. Векторнаяграфика
    90. 90. Полигоны
    91. 91. Чѐтное-нечѐтное
    92. 92. Чѐтное-нечѐтное
    93. 93. Ненулевая намотка
    94. 94. Толстые линии
    95. 95. Концы тупые квадратные круглые
    96. 96. Опять координаты void DrawLine(FPoint p1, FPoint p2, float width) { p1 += FPoint(0.5, 0.5); p2 += FPoint(0.5, 0.5); // ... } DrawLine(FPoint(3, 2), FPoint(12, 2), 1);
    97. 97. Опять координаты void DrawLine(FPoint p1, FPoint p2, float width) { p1 += FPoint(0.5, 0.5); p2 += FPoint(0.5, 0.5); // ... } DrawLine(FPoint(3, 2), FPoint(12, 2), 2);
    98. 98. Опять координаты void DrawLine(FPoint p1, FPoint p2, float width) { p1 += FPoint(0.5, 0.5); p2 += FPoint(0.5, 0.5); // ... } DrawLine(FPoint(3.5, 1.5), FPoint(11.5, 1.5), 2);
    99. 99. Опять координаты void DrawLine(FPoint p1, FPoint p2, float width) { // ... } DrawLine(FPoint(3, 2), FPoint(13, 2), 2);
    100. 100. Опять координаты void DrawLine(FPoint p1, FPoint p2, float width) { // ... } DrawLine(FPoint(3, 2), FPoint(13, 2), 1);
    101. 101. Опять координаты void DrawLine(FPoint p1, FPoint p2, float width) { // ... } DrawLine(FPoint(3, 2.5), FPoint(13, 2.5), 1);
    102. 102. Толстые полилинии
    103. 103. Стыки фасковый угольный круглый
    104. 104. Фасковый стык
    105. 105. Фасковый стык
    106. 106. Круглый стык
    107. 107. Круглый стык
    108. 108. Угольный стык
    109. 109. Угольный стык
    110. 110. Угольный стык
    111. 111. Угольный стык
    112. 112. Митровое соотношение
    113. 113. Митровый лимит
    114. 114. Митровый лимит
    115. 115. Митровое соотношение (WPF)
    116. 116. Митровый лимит (WPF)
    117. 117. Толстые полилинии
    118. 118. Толстые полилинии
    119. 119. Толстые полилинии
    120. 120. Толстые полилинии
    121. 121. Т о н к и е л и н и и
    122. 122. 1 px
    123. 123. <1 px 1 px
    124. 124. float _width = max(1, width);float _opacity = width < 1 ? opacity * width : opacity;DrawLine(..., _width, _opacity);
    125. 125. знаем t, какая P01?знаем P01, какой t?
    126. 126. // float tfloat _1mt = 1 – t;p01.X = _1mt * p0.X + t * p1.X;p01.Y = _1mt * p0.Y + t * p1.Y;
    127. 127. // float tfloat tm1 = t – 1;float t2 = t * t;float tm12 = tm1 * tm1;float _2ttm1 = 2 * t * tm1;p012.X = tm12 * p0.X – _2ttm1 * p1.X + t2 * p2.X;p012.Y = tm12 * p0.Y – _2ttm1 * p1.Y + t2 * p2.Y;
    128. 128. // float tfloat t2 = t * 2;float t3 = t2 * t;float _1mt = 1 – t;float _1mt2 = _1mt * _1mt;float _1mt3 = _1mt2 * _1mt;float _3t_1mt2 = 3 * t * _1mt2;float _3t2_1mt = 3 * t2 * _1mt;p0123.X = _1mt3 * p0.X – _3t_1mt2 * p1.X + _3t2_1mt * p2.X + t3 * p3.X;p0123.Y = _1mt3 * p0.Y – _3t_1mt2 * p1.Y + _3t2_1mt * p2.Y + t3 * p3.Y;
    129. 129. Метод Ньютона    
    130. 130. Метод Ньютона
    131. 131. Метод Ньютона
    132. 132. Геометрическиеформы
    133. 133. Круги/эллипсы
    134. 134. Арки
    135. 135. Закруглѐнные углы
    136. 136. Синусоиды
    137. 137. Сглаживание (antialiasing)
    138. 138. Аналитическое сглаживание %
    139. 139. Аналитическое сглаживание
    140. 140. Аналитическое сглаживание
    141. 141. СУБПИКСЕЛИ
    142. 142. Облом с прозрачностью
    143. 143. Расположение субпикселей
    144. 144. RGB (горизонтально)
    145. 145. RGB (вертикально)
    146. 146. RGB (TV)
    147. 147. Bayer
    148. 148. Hexagonal
    149. 149. PenTile RBG-GBR
    150. 150. PenTile RG-B-GR
    151. 151. Faux italic
    152. 152. Faux italic
    153. 153. Faux italic
    154. 154. ПРОТИВНАЯ ГАММАПРОТИВНАЯ ГАММАПРОТИВНАЯ ГАММАПРОТИВНАЯ ГАММАПРОТИВНАЯ ГАММАПРОТИВНАЯ ГАММАПРОТИВНАЯ ГАММАПРОТИВНАЯ ГАММА
    155. 155. Контрастность зрения 100:1** Вообще-то 1000:1, но типичные условия не позволяют
    156. 156. Порог различения Y Y+ΔY Y0 ΔY ≈ 0.01
    157. 157. Сколько нужно битов? 14 битов 9 битов** то есть 8 :)
    158. 158. Сколько нужно битов? 256 8 битов
    159. 159. Проблема кода 100 0 · · · · · · · · · · · · · · · · · · · · 255 лишние не хватает Δ ≈ 0.01
    160. 160. Проблема кода 100 лишние не хватает
    161. 161. C – CorrectedL – Linear
    162. 162. Путь света гамма гамма «гамма» камеры дегамма гамма монитора глаз ?свет 8-bit 16-bit 16-bit 8-bit свет зрение RGB RGB RGB RGB
    163. 163. C – CorrectedL – Linear
    164. 164. для наших глазсвет более светлый, светлыйчем темнота тѐмная
    165. 165. Калибрация 0.8
    166. 166. Калибрация 1.0
    167. 167. Калибрация 1.2
    168. 168. Калибрация 1.4
    169. 169. Калибрация 1.6
    170. 170. Калибрация 1.8
    171. 171. Калибрация 2.0
    172. 172. Калибрация 2.2
    173. 173. 10 R G B R G B R G B
    174. 174. Разброс(dithering)
    175. 175. порогслучайностьраспылениеполутонBayerFloyd-Steinberg
    176. 176. Оптимизация
    177. 177. Выбор языка С (недоС++)
    178. 178. MMX
    179. 179. Исключение как правило
    180. 180. GetPixel(int x, int y);SetPixel(int x, int y, int color);pix8* buffer = image->GetBuffer();int imageWidth = image->GetWidth();...buffer[y * imageWidth + x]...
    181. 181. if (...) { } else { }int c = min(a, b); // c = a < b ? a : bint c = a + (((b - a) >> 31) & (b - a));
    182. 182. int b = a / 3;int b = (int)(((__int64)a * 0x55555556) >> 32);
    183. 183. Устали? 

    ×