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

Владимир Агафонкин, Mapbox

agafonkin@gmail.com 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? ^___^