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

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

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

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

22. Тайлы

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

27. Kothic JS
2011:

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

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

30. open source?

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

32. GL

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

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

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

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

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

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

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

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

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

52. WebGL — 3D API?

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

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

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

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

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

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

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

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

74. SDF
signed distance fields

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

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

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

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

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

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

85. R-tree

86. github.com/mourner/rbush

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

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

91. github.com/mapbox/geojson-vt

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

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

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

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

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

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

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

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

102. ESLint

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

105. continuous integration

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

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