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

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

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

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