CodeFest 2019. Мстислав Живодков (2ГИС) — WebGL на карте. Карта на WebGL

Недавно мы запустили обновленную версию 2gis.ru с новой 3D-картой работающей на WebGL. Заходя на сайт, вы видите готовую картинку. Но карта — сложный механизм, в котором скрыто множество интересных деталей, о существовании которых можно даже и не подозревать. Обсудим, какой путь проходят данные, чтобы в итоге отобразиться на экране. Выясним, что сложнее нарисовать — дом, улицу или надпись — и как сделать это быстро. Поговорим о сильных и слабых сторонах WebGL, которые мы обнаружили. Доклад будет полезен и тем, кто уже использует WebGL, так и тем, кто хочет расширить свой кругозор.

Transcript

1. WebGL на карте Карта на WebGL Мстислав Живодков TeamLead 2GIS
4. WebGL
10. Типы объектов: 1. Дороги 2. Площадники 3. Дома 4. Текст 5. Иконки
12. Дороги
14. gl.LINES
15. gl.LINES gl.lineWidth(x)
16. gl.LINES gl.lineWidth(x)
22. Aliasing
23. Aliasing — лесенка
24. Aliasing — лесенка
25. Antialiasing — сглаживание
26. MSAA + Встроенное + Качественное – Дорогое – Местами х8
27. + Дешёвое – Мыльное FXAA
31. Интерполяция
32. Интерполяция
39. Площадники
43. Aliasing
44. Сглаживание
45. Сглаживание
49. Дома
57. екст Текст Текс
64. Линейный текст
68. А что иконки?
69. Схема работы
71. Данные
73. 1200_2425.png
74. 1200_2425 [{ type: 'house', geometry: [[25, 25], [25, 50], [50, 50], [25, 25]] }, { type: 'point', geometry: [25, 25], text: 'Дом №6' }, { type: 'street', geometry: [[25, 20], [125, 20]], text: 'Ватутина' }]
76. Взаимодействие
80. Заключение
81. @Trufid Мстислав Живодков TeamLead 2GIS Вопросы? @Trufi github.com/trufi