Как работают современные интерактивные карты на WebGL

WebGL — технология, позволяющая создавать потрясающие интерактивные веб-приложения и визуализации данных, о которых мы и не мечтали еще несколько лет назад. Но, несмотря на 80% поддержку браузерами, не так много разработчиков решаются ее использовать — это намного сложнее, чем может показаться на первый взгляд. И вместе с тем, невероятно интересно.

Mapbox GL JS — открытая JS-библиотека для создания современных интерактивных карт на основе WebGL, сочетающая в себе множество удивительных технологий, алгоритмов и идей, и разрабатываемая уже более двух лет. О том, как она работает изнутри, и пойдет речь в этом докладе.

Transcript

7. 100% моего кода за время работы в Mapbox — open source
10. карты сейчас везде
21. традиционные карты
22. Тайлы
24. векторные карты
27. Kothic JS 2011:
28. платформа для мобильных и браузеров?
29. открытый API?
30. open source?
31. на основе открытых данных?
32. GL
33. плавное масштабирование
34. повороты карты
37. полный контроль над отображением данных в реальном времени
40. визуальный редактор карты
42. вид в перспективе, 3D-возможности
44. меньше трафика
45. видео на картах
50. почему так мало применений WebGL?
51. делаем WebGL-приложение
52. WebGL — 3D API?
53. WebGL — низкоуровневый 2D API
55. WebGL: технология очень быстрой отрисовки треугольников
57. vertex shader преобразовывает координаты
58. fragment shader преобразовывает цвет пикселей
59. отрисовка линий
61. антиалиасинг
62. 6 треугольников
64. атрибуты вершин
65. 2 треугольника
66. соединения
67. отрисовка полигонов
68. триангуляция
69. github.com/mapbox/earcut
70. отрисовка текста
71. шрифтовые текстуры
72. интервалы символов /v4/fontstack/Arial Unicode MS Regular/0-255.pbf /v4/fontstack/Arial Unicode MS Regular/256-511.pbf /v4/fontstack/Arial Unicode MS Regular/512-767.pbf
74. SDF signed distance fields
77. обработка данных
78. UI JS браузер залипает
    на объемных вычислениях UI
79. UI Worker JS браузер залипает на загрузке
    и пересылке данных
    загрузка данных UI
80. UI Worker JS браузер залипает
    на получении данных
    загрузка данных UI UI
81. UI Worker JS браузер не залипает, если данные в ArrayBuffer
    загрузка данных UI UI
82. размещение надписей
85. R-tree
86. github.com/mourner/rbush
88. Ёханый бабай
89. динамическая загрузка сторонних данных
91. github.com/mapbox/geojson-vt
92. язык стиля карты
93. github.com/mapbox/ vector-tile-spec
95. мобильные устройства?
96. Mapbox GL Native C++11 github.com/mapbox/ mapbox-gl-native
97. тесты для рендеринга
99. github.com/mapbox/ mapbox-gl-test-suite
100. инструменты
101. browserify watchify transforms (glify, brfs, etc)
102. ESLint
103. тестирование: Tape Istanbul
105. continuous integration
106. а что там на стороне сервера?
108. Вован, а когда ты сделаешь WebGL рендеринг в Leaflet? ^___^