JS Lab 2017, 25 марта Mapbox GL: как работают современные интерактивные карты Владимир Агафонкин (Lead JavaScript Engineer at MapBox) Mapbox GL JS — открытая JS-библиотека для создания современных интерактивных карт на основе WebGL. В разработке более трех лет, она сочетает в себе множество удивительных технологий, сложных алгоритмов и идей для достижения плавной отрисовки тысяч векторных объектов с миллионами точек в реальном времени. В этом докладе вы узнаете, как работает библиотека внутри, и с какими сложностями сталкиваются разработчики современных WebGL-приложений. В докладе: отрисовка шрифтов, триангуляция линий и полигонов, пространственные индексы, определение коллизий, расстановка надписей, кластеризация точек, обрезка фигур, упрощение линий, упаковка спрайтов, компактные бинарные форматы, параллельная обработка данных в браузере, тестирование отрисовки и другие сложности. Все материалы: http://jslab.in.ua/2017

1. как работают современные
векторные карты
Владимир Агафонкин
25.03.2017
GL

4. 99% моего кода
за время работы в
Mapbox — open source

7. карты
сейчас везде

18. традиционные
карты

19. Тайлы

21. OpenLayers

22. векторные
карты

23. MAPS.ME

25. GL

26. open source

27. платформа для
мобильных и
браузеров

28. на основе
открытых данных

29. плавное
масштабирование и
поворот карты

30. ~

33. полный контроль
над отображением
данных в реальном
времени

36. любой объект на
карте может быть
интерактивным

40. визуальный
редактор карты

41. mapbox.com/studio

43. вид в перспективе,
3D-возможности

47. меньше трафика

48. less bandwidth

49. видео на картах

54. почему так мало
применений WebGL?

55. делаем WebGL-приложение

56. WebGL — 3D API?

57. WebGL —
низкоуровневый
2D API

59. WebGL:
технология очень
быстрой отрисовки
треугольников

61. vertex shader
преобразовывает координаты

62. fragment shader
преобразовывает цвет пикселей

63. отрисовка линий

65. антиалиасинг

66. 6 треугольников

67. атрибуты вершин

68. 2 треугольника

69. соединения

71. отрисовка полигонов

72. триангуляция

73. github.com/mapbox/earcut (JS)
github.com/mapbox/earcut.hpp (C++)

74. отрисовка текста

75. шрифтовые текстуры

76. интервалы символов
/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

78. SDF
signed distance fields

82. mapbox/shelf-pack (JS)
mapbox/shelf-pack-cpp (C++)

84. icu4c
C + Emscripten = JS
github.com/mapbox/
mapbox-gl-rtl-text

85. загрузка и обработка
данных

87. Protocol Buffers
бинарный формат
компактной сериализации
данных

88. /mapbox/pbf (JS)
/mapbox/protozero (C++)
Protocol Buffers

89. в 3-4 раза компактнее
JSON (gzip)
в 6-7 раз быстрее
JSON.parse

90. github.com/mapbox/
vector-tile-spec

92. UI JS
браузер залипает
на объемных вычислениях
UI

93. UI
Worker JS
браузер залипает на загрузке
и пересылке данных
загрузка
данных UI

94. UI
Worker JS
браузер залипает
на получении данных
загрузка
данных
UIUI

95. UI
processing
браузер не залипает,
если данные в ArrayBuffer
loading data
UIUImain thread
web worker

96. размещение
надписей

99. R-tree

100. github.com/mapbox/grid-index
github.com/mourner/rbush

102. Ёханый
бабай

103. динамическая
загрузка сторонних
данных

104. ~

105. mapbox/geojson-vt (JS)
mapbox/geojson-vt-cpp (C++)

106. кластеризация
точек

107. mapbox/supercluster (JS)
mapbox/supercluter-hpp (C++)

109. язык стиля карты

110. github.com/mapbox/
mapbox-gl-style-spec

111. mapbox.com/studio

116. мобильные
устройства?

117. Mapbox GL Native
C++11
Android, iOS, macOS, Qt, Node
github.com/mapbox/
mapbox-gl-native

118. тесты для
рендеринга

121. mapbox/pixelmatch (JS)
mapbox/pixelmatch-cpp (C++)
сравнение скриншотов
с учетом антиалиасинга

122. AppVeyor

123. инструменты

124. browserify
watchify

125. ES6 + Bublé

126. ESLint

127. тестирование:
Tape
Nyc

130. а что там на
стороне сервера?

132. Вован,
а когда ты сделаешь
WebGL рендеринг в
Leaflet? ^___^