Антон Корзунов про WebGL. Стачка-2016, Ульяновск. Видео - https://www.youtube.com/watch?v=ZCN7m2nqf2s

2. Ренессанс графики на
клиенте
Антон Корзунов

3. В начале было слово
И слово было 2 байта.
Потом много чего придумали.
Например Яндекс.Карты.
3

4. Sim City Яндекс.Карты
4
И вроде было все окей

5. Развитие API Карт
2004 год – запуск Яндекс.Карт
API 1.0 – 13 ноября 2008
API 1.1 – 25 июня 2009
API 2.0 – 19 апреля 2012
API 2.1 – 4 октября 2013
5

6. Что мы делали
1. Делали клевый API
2. Для кленовых карт
3. И радости ваших
пользователей.
6

7. 7
Ах какой хайтек!

8. Но вообще-то – да
«DOM-Tile» engine
css2, css3, css3-3d
«Canvas-Tile» engine
+ Stepwise или Transition
animation
8

9. И графика!
VML
SVG
Canvas
+Simplification, geodesic, tiled-
rendering, heatmaps, unicorns,
pain
9

10. 10Nathan McCord, U.S. Marine Corps - http://www.defenseimagery.mil; VIRIN: 090812-M-7376M-073
Каменный век!

11. Немного о себе
В 1998 году появилась первая
видеокарта.
В 1999 - вторая.
Достаточно активный
пользователь gamedev.ru.
Потом женился и оброс.
В 2008 году заболел
фронтендом.
Последние 5 лет работаю в
Яндексе.
11

12. Как на картинах Босха
В целом-то вроде ничего, но
стоит приглядеться к деталям
и ты понимаешь…
Что-то тут не так!
12
Сад наслаждений, Босх

13. 13
Мышки продолжали жрать кактус..

14. 14https://www.shadertoy.com/view/Xds3zN
WebGL

15. Темные века закончились
WebGL – быстрее.
WebGL – умнее.
WebGL – вкуснее.
WebGL позволяет реализовать в
web то, что было на PC 10-15 лет
назад.
WebGL – старый добрый GL ES.
Назовем это эпохой ренессанса.
15
Капелла в нижней церкви Сан Франческо в Ассизи.
Погруженный в молитву святой Мартин. Симоне Мартини. Фрагмент.

16. Что такое WebGL?
Невиданное чудо, полное
волшебных пузырьков?
На ней можно сделать 3D
шутер с «корованами»?
Какая-то модная технология?
Очередной Canvas?
16
Dawn, фея лесов NVidia

17. 17
WebGL нужен этому кирпичу

18. WebGL – это возможность
Используйте с умом

19. WebGL – это:
API для отрисовки 2D графики.
Возможность рисовать 3D.
Специальная архитектура
«графического конвейера».
Немного уличной магии.
И скорость..
19

20. О чем будем говорить
1. Какие задачи WebGL делает
«хорошо».
2. Как все весело.
20

21. О чем говорить не будем
1. Про Tree.js, любых .js.
2. Про API WebGL.
3. Про профайлинг :(
(я бы с радостью, но время)
21

22. 22О! Это Пиранези!
Пора выпустить тьму Египетскую!

23. DEMO TIME
Оценка скорости Canvas – 1
3 – http://
www.goodboydigital.com/pixijs/
bunnymark/
4 – http://dmikis.github.io/
subbotnik-msk-20151017/
(требует Chrome Canary)
5 – http://toji.github.io/webgl2-
particles/
(требует активации WebGL2)
23

24. 24
Давайте определимся

25. 25
Начнем с простого
2D 3D +Magic
http://www.thingiverse.com/thing:16559

26. 1. Передаем 3 вершины треугольника
На вход идут «непрерывные»
куски данных.
[xyxyxyxyxyxy]
[xxxxxxx] + [yyyyyyy]
[xyxyxyxy] + [zzzz] + [wwww]
но нельзя передать
[[x,y],[x,y],[x,y]]
26

27. 2. Всегда найдется место магии
gl_Position = (point+magic)*magic
gl_Position = unpack(point.x)
gl_Position = sin(point.x)
но обычно
gl_Position = MVP_matrix * point
gl_Position - 4D координаты.
x,y - 2D clipping space coords
z - «depth» space coords
w = «magic»
27

28. 28
Графический конвейер (pipeline)
Vertex shader
Fragment shader
Attribute
VaryingsUniforms
Framebuffer
Buffers

29. 4. Теперь работает PixelShader
Получаем интерполированные
значения для конкретного
пикселя.
1. Делаем что хотим
return magicColor +
sin(gl_FragCoord.y)+
sin(gl_FragCoord.x+ gl_FragCoord.y)
2. Отдаем цвет конкретного
пикселя.
http://jsfiddle.net/XLnVW/4/ 29

30. We need to go deeper
1. Color-buffer
2. Depth-buffer
3. Stencil-buffer
4. Normal-buffer
5. Super-buffer
6. Puper-buffer
7. ….
30

31. We need to go to Depth
Он же Z-buffer.
Хранит «глубину» пикселя.
Обеспечивает «Hidden surface
removal»
Имеет множество оптимизаций
31

32. 32Vector by Vector Open Stock
Front-to-back

33. Front-to-back rendering
По-разному работает на
«тайловых» и «стримовых»
видеокартах.
Обеспечивает супер скорость.
Ломается от одного чиха.
Не дружит с прозрачностью.
33
Pawel Wozniak - freestocktextures.com

34. DEMO TIME
early-z – OFF
early-z – ON
http://kashey.ru/maps/webgl/earlyz.html
(требует Chrome Canary)
34

35. Back-to-front
1. Нативный для canvas, html.
2. Высокий overdraw.
3. Низкая скорость.
4. Зачем он вообще нужен?
35

36. 36Vector by Vector Open Stock
Blending

37. Прозрачность
Target = Source1*A + Source2*B
Source1 - новый пиксель
Source2 - уже записанный,
который надо будет «обратно»
прочитать.
Их нельзя менять местами.
37

38. Настройка блендинга
gl.enable( gl.BLEND );
gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
gl.blendFuncSeparate(
gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA,
gl.ONE, gl.ONE_MINUS_SRC_ALPHA
);
PS: + premultiplied alpha
PPS: + EXT_blend_minmax
http://mrdoob.github.io/webgl-blendfunctions/blendfuncseparate.html 38

39. back-to-front (OVER) front-to-back (UNDER)
39
Два главных режима блендинга

40. 40

41. Но у нас 3D!
Плоскость может быть
и ЗА и ПЕРЕД
Одновременно!
Есть Deep Peeling и другой
Order Independent Rendering,
но..
Image Source: TU Wien and Stack Overflow 41

42. Первый слой Второй слой
42
Блендинг в пробках

43. Overdraw + Alpha-Test
Многие пиксели никак не
меняют изображение.
Их можно «убить», прервав
растеризацию.
Заодно умрет early-z и TBDR.
43

44. …герои всегда идут в обход
Многие эффекты, в частности
«пробки», лучше рисовать сразу.
В один проход – «целиком»
color1 = texture2D(t1, ts);
color2 = texture2D(t2, ts);
gl_FragColor = mix(color1, color2, color2.a);
44

45. 45webglstats.com
100% девайсов имеют 8+ TMU

46. 46webglstats.com
99% девайсов держат текстуры 4096

47. 47
http://axis-of-devil.deviantart.com/art/Everybody-lies-159130967

48. Всегда есть ньюансы!
100% андроидов
поддерживают текстуры 4к.
95% андроидов создают их по
3-4 секунды.
PS: 4K*4K*RGBA = 64Mb.
PS: Samsung/AndroidBrowser
просто блэклистим.
48

49. ПРИВЫКАЙТЕ

50. Так что webgl умеет?
1. Рисовать 2д треугольники.
2. Как угодно их раскрашивать.
3. Смешивать разные слои.
4. Смешивать разные
реальности.
5. Делать это быстро.
50

51. 51
Может так

52. 52plague inc
Может так

53. 53Simcity 5
Может так

54. 54
И что он умеет быстро?
Текст Растр Геометрия

55. Почему он это умеет?
1. Immutable данные(WORM)
2. Vertex Shader
3. Pixel Shader
4. Extensions
5. MAGIC!
55

56. Extensions
Удобный механизм
опционального добавления
«фич».
WEBGL_, OES_, EXT_, ANGLE_
56

57. 57Вам ARB, EXT, ENV, WEBKIT, ANGLE или WEBGL? Cплошной 34!
If it exists, there is extension for it – no exceptions.
Правило 34*

58. 58
На каждый болт найдется своя гайка.
Или грязный хак.
Или серьезная научная статья.
Правило 34а

59. Extensions
В среднем по палата - 8
расширений.
Всего в WebGL - 31
+ WEBKIT_, MOZ_ и так далее
Всего в OpenGL – 482
(webglreport.com about://gpu)
59

60. 60
Если расширения нет, его скоро сделают
Правило 35

61. 61
Нужных расширений никогда нет.
Правило 37 (иногда 16)

62. DEMO TIME!
http://media.tojicode.com/q3bsp/
http://tangrams.github.io/shaders-demo/
http://playcanv.as/p/SA7hVBLt
https://www.shadertoy.com/view/XsX3RB
Обязательно прочитайте https://mapzen.com/
blog/mapping-mountains/ и покрутите http://
cartography.oregonstate.edu/tiles/
PlanObliqueEurope/
62

63. 63https://events.yandex.ru/lib/talks/3344/
Отображение текста
SDF Atlas Vector

64. 64https://events.yandex.ru/lib/talks/3344/
Отображение графики
2D-line 2D-polygon 3D

65. Ничего кроме треугольников!
Рендеринг линии - через
треугольники.
Рендеринг полигона - через
треугольники.
Рендеринг квадрата - через
треугольники.
65

66. Линия
Линия это данные для
создания треугольников.
Линия это правила сочленения.
Линия это набор векторов.
66

67. 67
Формирование элемента линии

68. Заполнение цветом Интерполяция «длины»
68
Заполнение

69. Проблема кривого пунктира
Длина левого сегмента больше
длины центрального и не равна
длине правого сегмента.
69

70. 70
Ужас, а не зебра

71. Причины и следствия
L1 меньше L2 на «квадратик»
Какой размер квадратика?
strokeWidth * (cos | sin | 1/tg | πcos)
Храним в точке:
L - основную длину
La - левую компенсацию
Lb - правую компенсацию
71

72. 72
Line-join
Mitter Bevel Round

73. Полигон
Состоит из треугольников.
Может быть с дырками, с
самопересечениями, convex и
не-convex, большой и
маленький…
73

74. Триангуляция
Разбиение полигона на
треугольники.
1. Через монотоны.
2. Алгоритм Зейделя (pnltri).
3. Ушной алгоритм (earcut).
- Подготовка занимает много
времени.
+ Быстро работает.
74

75. Логические операции
gl.stencilOp(fail, zfail, zpass);
gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,1);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.INVERT);
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.EQUAL, 1, 1);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
+ Не требует подготовки
вообще.
- Жуткий overdraw.
75

76. Какой выбрать?
Зависит от текущего болта и
текущей гайки, наличия
обводки, времени на
препроцессинг, фазы луны, и
состоянии левой пятки
императора.
PS: см. «стенсильные тени»
76

77. Рано радуетесь
1. Синхронные операции.
2. Зоопарк устройств.
3. Мыло и другие нежданчики.
3. Алисинг.
5. Жрет батарейку
6. Не понимает CSS
(и человеческий язык)
77

78. Пускай весь мир подождет
1. Обновление буферов.
2. Загрузка текстур.
3. Синхронизации.
78

79. Пускай весь мир подождет
1. Immutable или Dynamic
данные.
2. Загружайте текстуры в
фоне, верьте в ImageBitmap.
3. Меняйте алгоритмы.
79

80. Зоопарк
Hi-end, Lo-end PC
iOS
Android
Angle, Native, Sandboxed..
80

81. PixelPerfect
Он же «тютелька в тютельку».
Linear фильтрация часто
создает «мыло».
Очень сложно отобразить
картинку по пиксельной сетке.
А вот геометрию - легко.
81

82. Алгоритм рисования линии
Алгоритм Брезенхэма
генерирует «лесенку».
Но можно (врубив Blend)
отрисовать линию «мягче».
PS: На Hi-DPI экранах можно
не врубать.
82

83. Антикто?

84. MSAA - on off
84
Анти-алиасинг

85. FXAA – off
85https://github.com/mattdesl/glsl-fxaa/
Fast ApproXimate Anti-Aliasing
FXAA – on

86. DEMO TIME (4D)
https://www.shadertoy.com/view/
4dsGD7
https://www.shadertoy.com/view/
4ds3WS
86

87. 87Daggerfall

88. Что осталось за кадром?
Смысл
Детали реализации
100500 вариантов исполнения
WebGL 2.0
Нюансы
88

89. Но стоит ли мне верить?
C некой точки зрения браузеры
аналогичны tree.js и компании.
И пишут их очень хитрые люди.
Далеко не факт, что именно у
тебя получится выше быстрее.
PS:Особенно в человеко-часах.
89

90. 90
И самый главный вопрос…

91. Антон Корзунов
Разработчик интерфейсов АПИ карт.
Контакты
@twitter
thekasheykashey@yandex-team.ru
На фоне https://www.shadertoy.com/view/4tjGRh