Upload
fwdays
View
379
Download
1
Embed Size (px)
Citation preview
Как работают современные интерактивные карты на WebGL
Владимир Агафонкин, Mapbox
[email protected] github.com/mourner @mourner
100% моего кода за время работы в
Mapbox — open source
карты сейчас везде
традиционные карты
Тайлы
векторные карты
Kothic JS2011:
open source?
открытый API?
платформа для мобильных и браузеров?
на основе открытых данных?
GL
плавное масштабирование
повороты карты
полный контроль над отображением данных в реальном
времени
визуальный редактор карты
вид в перспективе, 3D-возможности
меньше трафика
видео на картах
почему так мало применений WebGL?
делаем WebGL-приложение
WebGL — 3D API?
WebGL — низкоуровневый
2D API
WebGL: технология очень быстрой отрисовки
треугольников
vertex shader преобразовывает координаты
fragment shader преобразовывает цвет пикселей
отрисовка линий
антиалиасинг
6 треугольников
атрибуты вершин
2 треугольника
соединения
отрисовка полигонов
триангуляция
github.com/mapbox/earcut
отрисовка текста
шрифтовые текстуры
интервалы символов/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
SDFsigned distance fields
загрузка и обработка данных
Protocol Buffersбинарный формат
компактной сериализации данных
github.com/mapbox/ vector-tile-spec
github.com/mapbox/pbf
быстрее, чем JSON.parse
в 3-4 раза меньше JSON
(gzip)
UI JS
браузер залипает на объемных вычислениях
UI
UI
Worker JS
браузер залипает на загрузке и пересылке данных
загрузка данных UI
UI
Worker JS
браузер залипает на получении данных
загрузка данных
UIUI
UI
Worker JS
браузер не залипает, если данные в ArrayBuffer
загрузка данных
UIUI
размещение надписей
R-tree
github.com/mourner/rbush
Ёханый бабай
динамическая загрузка сторонних
данных
github.com/mapbox/geojson-vt
язык стиля карты
github.com/mapbox/ mapbox-gl-style-spec
мобильные устройства?
Mapbox GL Native C++11
github.com/mapbox/ mapbox-gl-native
тесты для рендеринга
github.com/mapbox/ mapbox-gl-test-suite
инструменты
browserify watchify
transforms (glify, brfs, etc)
ESLint
тестирование: Tape
Istanbul
continuous integration
а что там на стороне сервера?
Вован, а когда ты сделаешь WebGL рендеринг в
Leaflet? ^___^