SlideShare a Scribd company logo
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
100% моего кода
за время работы в
Mapbox — open source
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
карты
сейчас везде
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
традиционные
карты
Тайлы
«Как работают современные интерактивные карты на WebGL»​
векторные
карты
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
Kothic JS
2011:
платформа для
мобильных и
браузеров?
открытый API?
open source?
на основе
открытых данных?
GL
плавное
масштабирование
повороты карты
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
полный контроль
над отображением
данных в реальном
времени
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
визуальный
редактор карты
«Как работают современные интерактивные карты на WebGL»​
вид в перспективе,
3D-возможности
«Как работают современные интерактивные карты на WebGL»​
меньше трафика
видео на картах
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
почему так мало
применений WebGL?
делаем WebGL-приложение
WebGL — 3D API?
WebGL —
низкоуровневый
2D API
«Как работают современные интерактивные карты на WebGL»​
WebGL:
технология очень
быстрой отрисовки
треугольников
«Как работают современные интерактивные карты на WebGL»​
vertex shader
преобразовывает координаты
fragment shader
преобразовывает цвет пикселей
отрисовка линий
«Как работают современные интерактивные карты на WebGL»​
антиалиасинг
6 треугольников
«Как работают современные интерактивные карты на WebGL»​
атрибуты вершин
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
«Как работают современные интерактивные карты на WebGL»​
SDF
signed distance fields
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
обработка данных
UI JS
браузер залипает
на объемных вычислениях
UI
UI
Worker JS
браузер залипает на загрузке
и пересылке данных
загрузка
данных UI
UI
Worker JS
браузер залипает
на получении данных
загрузка
данных
UIUI
UI
Worker JS
браузер не залипает,
если данные в ArrayBuffer
загрузка
данных
UIUI
размещение
надписей
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​
R-tree
github.com/mourner/rbush
«Как работают современные интерактивные карты на WebGL»​
Ёханый
бабай
динамическая
загрузка сторонних
данных
«Как работают современные интерактивные карты на WebGL»​
github.com/mapbox/geojson-vt
язык стиля карты
github.com/mapbox/
vector-tile-spec
«Как работают современные интерактивные карты на WebGL»​
мобильные
устройства?
Mapbox GL Native
C++11
github.com/mapbox/
mapbox-gl-native
тесты для
рендеринга
«Как работают современные интерактивные карты на WebGL»​
github.com/mapbox/
mapbox-gl-test-suite
инструменты
browserify
watchify
transforms (glify, brfs, etc)
ESLint
тестирование:
Tape
Istanbul
«Как работают современные интерактивные карты на WebGL»​
continuous integration
а что там на
стороне сервера?
«Как работают современные интерактивные карты на WebGL»​
Вован,
а когда ты сделаешь
WebGL рендеринг в
Leaflet? ^___^
«Как работают современные интерактивные карты на WebGL»​
«Как работают современные интерактивные карты на WebGL»​

More Related Content

PDF
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...
PDF
Mapbox GL: как работают современные векторные карты
PDF
«Как перестать отлаживать асинхронные вызовы и начать жить»​
PPTX
Методологии верстки
PDF
"Как работают современные интерактивные карты на WebGL" Владимир Агафонкин
PPTX
Device Fingerprint — лекарство от мошенничества. Все дело в дозировке
PDF
Flash умер. Да здравствует Flash!
ODP
CBGTBT - Part 5 - Blockchains 102
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...
Mapbox GL: как работают современные векторные карты
«Как перестать отлаживать асинхронные вызовы и начать жить»​
Методологии верстки
"Как работают современные интерактивные карты на WebGL" Владимир Агафонкин
Device Fingerprint — лекарство от мошенничества. Все дело в дозировке
Flash умер. Да здравствует Flash!
CBGTBT - Part 5 - Blockchains 102

Viewers also liked (6)

ODP
CBGTBT - Part 6 - Transactions 102
ODP
CBGTBT - Part 4 - Mining
ODP
CBGTBT - Part 2 - Blockchains 101
ODP
CBGTBT - Part 3 - Transactions 101
ODP
CBGTBT - Part 1 - Workshop introduction & primer
PDF
CSS pattern libraries
CBGTBT - Part 6 - Transactions 102
CBGTBT - Part 4 - Mining
CBGTBT - Part 2 - Blockchains 101
CBGTBT - Part 3 - Transactions 101
CBGTBT - Part 1 - Workshop introduction & primer
CSS pattern libraries
Ad

Similar to «Как работают современные интерактивные карты на WebGL»​ (20)

PDF
Владимир Гриненко "Верстка для touch-устройст (webkit)"
PPTX
Локализация - как делать глобальный проект?
PPTX
Go Mobile! Windows Phone 7 for all
PDF
Кир Белевич, Сергей Горобцов: "Touch it: новое мобильное направление веб-разр...
PPTX
разработка Metro style приложений
PPT
OpenGL ES 1.1 и 2.0 для разработки iPhone игр
PPTX
Как делать глобальный проект
PPTX
Presentation zwcad2011
PPTX
Microsoft и облако Azure для разработчиков на Android – сервисы для бэкенда, ...
PDF
Видеозвонки и шаринг экрана в мобильном приложении
PPTX
Расчетная работа
PDF
Интерактивные карты планировок на сайтах торговых центров
PPTX
Михаил Черномордиков Ie9
PDF
Cocaine: погружение в облака — Евгений Сафронов
PPT
С.Лалов "Corona SDK для разработки кроссплатформенных приложений", DUMP-2014
PPTX
HTML5 WebSockets and WebWorkers
PDF
100 % самоучитель Macromedia Flash MX
PPTX
настоящий нейронет сталь
PPTX
METRO. Дизайн для Windows Phone
PDF
Технология предметно ориентированного программирования гетерогенных многоядер...
Владимир Гриненко "Верстка для touch-устройст (webkit)"
Локализация - как делать глобальный проект?
Go Mobile! Windows Phone 7 for all
Кир Белевич, Сергей Горобцов: "Touch it: новое мобильное направление веб-разр...
разработка Metro style приложений
OpenGL ES 1.1 и 2.0 для разработки iPhone игр
Как делать глобальный проект
Presentation zwcad2011
Microsoft и облако Azure для разработчиков на Android – сервисы для бэкенда, ...
Видеозвонки и шаринг экрана в мобильном приложении
Расчетная работа
Интерактивные карты планировок на сайтах торговых центров
Михаил Черномордиков Ie9
Cocaine: погружение в облака — Евгений Сафронов
С.Лалов "Corona SDK для разработки кроссплатформенных приложений", DUMP-2014
HTML5 WebSockets and WebWorkers
100 % самоучитель Macromedia Flash MX
настоящий нейронет сталь
METRO. Дизайн для Windows Phone
Технология предметно ориентированного программирования гетерогенных многоядер...
Ad

More from FDConf (20)

PPT
Антон Киршанов - «Квант изменения. Реактивные реакции на React.
PDF
Игорь Еростенко - Создаем виртуальный тур
PDF
Илья Климов - Reason: маргиналы против хайпа
PDF
Максим Щепелин - Доставляя веб-контент в игру
PDF
Александр Черноокий - Как правило "победитель получает все" работает и не раб...
PDF
Михаил Волчек - Что такое Цифровая мастерская?
PDF
Radoslav Stankov - Handling GraphQL with React and Apollo
PDF
Виктор Русакович - Выборы, выборы, все фреймворки… приторны
PDF
Slobodan Stojanovic - 8 1/2 things about serverless
PPTX
Тимофей Лавренюк - Почему мне зашел PWA?
PDF
В погоне за производительностью
PPTX
Если у вас нету тестов...
PPTX
Migrate your React.js application from (m)Observable to Redux
PPTX
Dart: питание и сила для вашего проекта
PDF
Scalable Angular 2 Application Architecture
PPTX
JavaScript: прошлое, настоящее и будущее.
PDF
CSSO — сжимаем CSS
PDF
Redux. From twitter hype to production
PDF
Будь первым
PDF
"Service Worker: Let Your Web App Feel Like a Native "
Антон Киршанов - «Квант изменения. Реактивные реакции на React.
Игорь Еростенко - Создаем виртуальный тур
Илья Климов - Reason: маргиналы против хайпа
Максим Щепелин - Доставляя веб-контент в игру
Александр Черноокий - Как правило "победитель получает все" работает и не раб...
Михаил Волчек - Что такое Цифровая мастерская?
Radoslav Stankov - Handling GraphQL with React and Apollo
Виктор Русакович - Выборы, выборы, все фреймворки… приторны
Slobodan Stojanovic - 8 1/2 things about serverless
Тимофей Лавренюк - Почему мне зашел PWA?
В погоне за производительностью
Если у вас нету тестов...
Migrate your React.js application from (m)Observable to Redux
Dart: питание и сила для вашего проекта
Scalable Angular 2 Application Architecture
JavaScript: прошлое, настоящее и будущее.
CSSO — сжимаем CSS
Redux. From twitter hype to production
Будь первым
"Service Worker: Let Your Web App Feel Like a Native "

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