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

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

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

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

6d07e6d95a43357254698ce9723350e6?s=128

Vladimir Agafonkin

April 18, 2015
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. 100% моего кода за время работы в Mapbox — open

    source
  8. None
  9. None
  10. карты сейчас везде

  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. традиционные карты

  22. Тайлы

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

  25. None
  26. None
  27. Kothic JS 2011:

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

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

  30. open source?

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

  32. GL

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

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

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

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

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

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

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

  46. None
  47. None
  48. None
  49. None
  50. почему так мало применений WebGL?

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

  52. WebGL — 3D API?

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

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

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

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

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

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

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

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

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

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

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

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

  69. github.com/mapbox/earcut

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

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

  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
  73. None
  74. SDF signed distance fields

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

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

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

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

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

    загрузка данных UI UI
  82. размещение надписей

  83. None
  84. None
  85. R-tree

  86. github.com/mourner/rbush

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

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

  90. None
  91. github.com/mapbox/geojson-vt

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

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

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

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

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

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

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

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

  102. ESLint

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

  104. None
  105. continuous integration

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

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

  109. None
  110. None