$30 off During Our Annual Pro Sale. View Details »

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

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

WebGL — технология, позволяющая создавать потрясающие интерактивные веб-приложения и визуализации данных, о которых мы и не мечтали еще несколько лет назад. Но, несмотря на 80% поддержку браузерами, не так много разработчиков решаются ее использовать — это намного сложнее, чем может показаться на первый взгляд. И вместе с тем, невероятно интересно.

Mapbox GL JS — открытая JS-библиотека для создания современных интерактивных карт на основе WebGL, сочетающая в себе множество удивительных технологий, алгоритмов и идей, и разрабатываемая уже более двух лет. О том, как она работает изнутри, и пойдет речь в этом докладе.

Vladimir Agafonkin

April 18, 2015
Tweet

More Decks by Vladimir Agafonkin

Other Decks in Technology

Transcript

  1. View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. 100% моего кода
    за время работы в
    Mapbox — open source

    View Slide

  8. View Slide

  9. View Slide

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

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

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

    View Slide

  22. Тайлы

    View Slide

  23. View Slide

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

    View Slide

  25. View Slide

  26. View Slide

  27. Kothic JS
    2011:

    View Slide

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

    View Slide

  29. открытый API?

    View Slide

  30. open source?

    View Slide

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

    View Slide

  32. GL

    View Slide

  33. плавное
    масштабирование

    View Slide

  34. повороты карты

    View Slide

  35. View Slide

  36. View Slide

  37. полный контроль
    над отображением
    данных в реальном
    времени

    View Slide

  38. View Slide

  39. View Slide

  40. визуальный
    редактор карты

    View Slide

  41. View Slide

  42. вид в перспективе,
    3D-возможности

    View Slide

  43. View Slide

  44. меньше трафика

    View Slide

  45. видео на картах

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. почему так мало
    применений WebGL?

    View Slide

  51. делаем WebGL-приложение

    View Slide

  52. WebGL — 3D API?

    View Slide

  53. WebGL —
    низкоуровневый
    2D API

    View Slide

  54. View Slide

  55. WebGL:
    технология очень
    быстрой отрисовки
    треугольников

    View Slide

  56. View Slide

  57. vertex shader
    преобразовывает координаты

    View Slide

  58. fragment shader
    преобразовывает цвет пикселей

    View Slide

  59. отрисовка линий

    View Slide

  60. View Slide

  61. антиалиасинг

    View Slide

  62. 6 треугольников

    View Slide

  63. View Slide

  64. атрибуты вершин

    View Slide

  65. 2 треугольника

    View Slide

  66. соединения

    View Slide

  67. отрисовка полигонов

    View Slide

  68. триангуляция

    View Slide

  69. github.com/mapbox/earcut

    View Slide

  70. отрисовка текста

    View Slide

  71. шрифтовые текстуры

    View Slide

  72. интервалы символов
    /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

    View Slide

  73. View Slide

  74. SDF
    signed distance fields

    View Slide

  75. View Slide

  76. View Slide

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

    View Slide

  78. UI JS
    браузер залипает
    на объемных вычислениях
    UI

    View Slide

  79. UI
    Worker JS
    браузер залипает на загрузке
    и пересылке данных
    загрузка
    данных UI

    View Slide

  80. UI
    Worker JS
    браузер залипает
    на получении данных
    загрузка
    данных
    UI
    UI

    View Slide

  81. UI
    Worker JS
    браузер не залипает,
    если данные в ArrayBuffer
    загрузка
    данных
    UI
    UI

    View Slide

  82. размещение
    надписей

    View Slide

  83. View Slide

  84. View Slide

  85. R-tree

    View Slide

  86. github.com/mourner/rbush

    View Slide

  87. View Slide

  88. Ёханый
    бабай

    View Slide

  89. динамическая
    загрузка сторонних
    данных

    View Slide

  90. View Slide

  91. github.com/mapbox/geojson-vt

    View Slide

  92. язык стиля карты

    View Slide

  93. github.com/mapbox/
    vector-tile-spec

    View Slide

  94. View Slide

  95. мобильные
    устройства?

    View Slide

  96. Mapbox GL Native
    C++11
    github.com/mapbox/
    mapbox-gl-native

    View Slide

  97. тесты для
    рендеринга

    View Slide

  98. View Slide

  99. github.com/mapbox/
    mapbox-gl-test-suite

    View Slide

  100. инструменты

    View Slide

  101. browserify
    watchify
    transforms (glify, brfs, etc)

    View Slide

  102. ESLint

    View Slide

  103. тестирование:
    Tape
    Istanbul

    View Slide

  104. View Slide

  105. continuous integration

    View Slide

  106. а что там на
    стороне сервера?

    View Slide

  107. View Slide

  108. Вован,
    а когда ты сделаешь
    WebGL рендеринг в
    Leaflet? ^___^

    View Slide

  109. View Slide

  110. View Slide