Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
как работают современные
векторные карты
Владимир Агафонкин
25.03.2017
GL
99% моего кода
за время работы в
Mapbox — open source
карты
сейчас везде
традиционные
карты
Тайлы
OpenLayers
векторные
карты
MAPS.ME
GL
open source
платформа для
мобильных и
браузеров
на основе
открытых данных
плавное
масштабирование и
поворот карты
~
полный контроль
над отображением
данных в реальном
времени
любой объект на
карте может быть
интерактивным
визуальный
редактор карты
mapbox.com/studio
вид в перспективе,
3D-возможности
меньше трафика
less bandwidth
видео на картах
почему так мало
применений WebGL?
делаем WebGL-приложение
WebGL — 3D API?
WebGL —
низкоуровневый
2D API
WebGL:
технология очень
быстрой отрисовки
треугольников
vertex shader
преобразовывает координаты
fragment shader
преобразовывает цвет пикселей
отрисовка линий
антиалиасинг
6 треугольников
атрибуты вершин
2 треугольника
соединения
отрисовка полигонов
триангуляция
github.com/mapbox/earcut (JS)
github.com/mapbox/earcut.hpp (C++)
отрисовка текста
шрифтовые текстуры
интервалы символов
/v4/fontstack/Arial Unicode MS Regular/0-255.pbf
/v4/fontstack/Arial Unicode MS Regular/256-511.pbf
/v4...
SDF
signed distance fields
mapbox/shelf-pack (JS)
mapbox/shelf-pack-cpp (C++)
icu4c
C + Emscripten = JS
github.com/mapbox/
mapbox-gl-rtl-text
загрузка и обработка
данных
Protocol Buffers
бинарный формат
компактной сериализации
данных
/mapbox/pbf (JS)
/mapbox/protozero (C++)
Protocol Buffers
в 3-4 раза компактнее
JSON (gzip)
в 6-7 раз быстрее
JSON.parse
github.com/mapbox/
vector-tile-spec
UI JS
браузер залипает
на объемных вычислениях
UI
UI
Worker JS
браузер залипает на загрузке
и пересылке данных
загрузка
данных UI
UI
Worker JS
браузер залипает
на получении данных
загрузка
данных
UIUI
UI
processing
браузер не залипает,
если данные в ArrayBuffer
loading data
UIUImain thread
web worker
размещение
надписей
R-tree
github.com/mapbox/grid-index
github.com/mourner/rbush
Ёханый
бабай
динамическая
загрузка сторонних
данных
~
mapbox/geojson-vt (JS)
mapbox/geojson-vt-cpp (C++)
кластеризация
точек
mapbox/supercluster (JS)
mapbox/supercluter-hpp (C++)
язык стиля карты
github.com/mapbox/
mapbox-gl-style-spec
mapbox.com/studio
мобильные
устройства?
Mapbox GL Native
C++11
Android, iOS, macOS, Qt, Node
github.com/mapbox/
mapbox-gl-native
тесты для
рендеринга
mapbox/pixelmatch (JS)
mapbox/pixelmatch-cpp (C++)
сравнение скриншотов
с учетом антиалиасинга
AppVeyor
инструменты
browserify
watchify
ES6 + Bublé
ESLint
тестирование:
Tape
Nyc
а что там на
стороне сервера?
Вован,
а когда ты сделаешь
WebGL рендеринг в
Leaflet? ^___^
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин
Upcoming SlideShare
Loading in …5
×

JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин

228 views

Published on

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

Все материалы: http://jslab.in.ua/2017

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир Агафонкин

  1. 1. как работают современные векторные карты Владимир Агафонкин 25.03.2017 GL
  2. 2. 99% моего кода за время работы в Mapbox — open source
  3. 3. карты сейчас везде
  4. 4. традиционные карты
  5. 5. Тайлы
  6. 6. OpenLayers
  7. 7. векторные карты
  8. 8. MAPS.ME
  9. 9. GL
  10. 10. open source
  11. 11. платформа для мобильных и браузеров
  12. 12. на основе открытых данных
  13. 13. плавное масштабирование и поворот карты
  14. 14. ~
  15. 15. полный контроль над отображением данных в реальном времени
  16. 16. любой объект на карте может быть интерактивным
  17. 17. визуальный редактор карты
  18. 18. mapbox.com/studio
  19. 19. вид в перспективе, 3D-возможности
  20. 20. меньше трафика
  21. 21. less bandwidth
  22. 22. видео на картах
  23. 23. почему так мало применений WebGL?
  24. 24. делаем WebGL-приложение
  25. 25. WebGL — 3D API?
  26. 26. WebGL — низкоуровневый 2D API
  27. 27. WebGL: технология очень быстрой отрисовки треугольников
  28. 28. vertex shader преобразовывает координаты
  29. 29. fragment shader преобразовывает цвет пикселей
  30. 30. отрисовка линий
  31. 31. антиалиасинг
  32. 32. 6 треугольников
  33. 33. атрибуты вершин
  34. 34. 2 треугольника
  35. 35. соединения
  36. 36. отрисовка полигонов
  37. 37. триангуляция
  38. 38. github.com/mapbox/earcut (JS) github.com/mapbox/earcut.hpp (C++)
  39. 39. отрисовка текста
  40. 40. шрифтовые текстуры
  41. 41. интервалы символов /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
  42. 42. SDF signed distance fields
  43. 43. mapbox/shelf-pack (JS) mapbox/shelf-pack-cpp (C++)
  44. 44. icu4c C + Emscripten = JS github.com/mapbox/ mapbox-gl-rtl-text
  45. 45. загрузка и обработка данных
  46. 46. Protocol Buffers бинарный формат компактной сериализации данных
  47. 47. /mapbox/pbf (JS) /mapbox/protozero (C++) Protocol Buffers
  48. 48. в 3-4 раза компактнее JSON (gzip) в 6-7 раз быстрее JSON.parse
  49. 49. github.com/mapbox/ vector-tile-spec
  50. 50. UI JS браузер залипает на объемных вычислениях UI
  51. 51. UI Worker JS браузер залипает на загрузке и пересылке данных загрузка данных UI
  52. 52. UI Worker JS браузер залипает на получении данных загрузка данных UIUI
  53. 53. UI processing браузер не залипает, если данные в ArrayBuffer loading data UIUImain thread web worker
  54. 54. размещение надписей
  55. 55. R-tree
  56. 56. github.com/mapbox/grid-index github.com/mourner/rbush
  57. 57. Ёханый бабай
  58. 58. динамическая загрузка сторонних данных
  59. 59. ~
  60. 60. mapbox/geojson-vt (JS) mapbox/geojson-vt-cpp (C++)
  61. 61. кластеризация точек
  62. 62. mapbox/supercluster (JS) mapbox/supercluter-hpp (C++)
  63. 63. язык стиля карты
  64. 64. github.com/mapbox/ mapbox-gl-style-spec
  65. 65. mapbox.com/studio
  66. 66. мобильные устройства?
  67. 67. Mapbox GL Native C++11 Android, iOS, macOS, Qt, Node github.com/mapbox/ mapbox-gl-native
  68. 68. тесты для рендеринга
  69. 69. mapbox/pixelmatch (JS) mapbox/pixelmatch-cpp (C++) сравнение скриншотов с учетом антиалиасинга
  70. 70. AppVeyor
  71. 71. инструменты
  72. 72. browserify watchify
  73. 73. ES6 + Bublé
  74. 74. ESLint
  75. 75. тестирование: Tape Nyc
  76. 76. а что там на стороне сервера?
  77. 77. Вован, а когда ты сделаешь WebGL рендеринг в Leaflet? ^___^

×