«Как работают современные интерактивные карты на webgl»

110

Upload: fdconf

Post on 16-Jul-2015

5.281 views

Category:

Presentations & Public Speaking


3 download

TRANSCRIPT

100% моего кода за время работы в

Mapbox — open source

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

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

Тайлы

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

Kothic JS2011:

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

открытый API?

open source?

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

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

обработка данных

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/ vector-tile-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? ^___^