CodeFest 2019. Мстислав Живодков (2ГИС) — WebGL на карте. Карта на WebGL

16b6c87229eaf58768d25ed7b2bbbf52?s=47 CodeFest
April 05, 2019

CodeFest 2019. Мстислав Живодков (2ГИС) — WebGL на карте. Карта на WebGL

Недавно мы запустили обновленную версию 2gis.ru с новой 3D-картой работающей на WebGL. Заходя на сайт, вы видите готовую картинку. Но карта — сложный механизм, в котором скрыто множество интересных деталей, о существовании которых можно даже и не подозревать. Обсудим, какой путь проходят данные, чтобы в итоге отобразиться на экране. Выясним, что сложнее нарисовать — дом, улицу или надпись — и как сделать это быстро. Поговорим о сильных и слабых сторонах WebGL, которые мы обнаружили. Доклад будет полезен и тем, кто уже использует WebGL, так и тем, кто хочет расширить свой кругозор.

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 05, 2019
Tweet

Transcript

  1. WebGL на карте Карта на WebGL Мстислав Живодков TeamLead 2GIS

  2. None
  3. None
  4. WebGL

  5. None
  6. None
  7. None
  8. None
  9. None
  10. Типы объектов: 1. Дороги 2. Площадники 3. Дома 4. Текст

    5. Иконки
  11. None
  12. Дороги

  13. None
  14. gl.LINES

  15. gl.LINES gl.lineWidth(x)

  16. gl.LINES gl.lineWidth(x)

  17. None
  18. None
  19. None
  20. None
  21. None
  22. Aliasing

  23. Aliasing — лесенка

  24. Aliasing — лесенка

  25. Antialiasing — сглаживание

  26. MSAA + Встроенное + Качественное – Дорогое – Местами х8

  27. + Дешёвое – Мыльное FXAA

  28. None
  29. None
  30. None
  31. Интерполяция

  32. Интерполяция

  33. None
  34. None
  35. 6

  36. 2

  37. None
  38. None
  39. Площадники

  40. None
  41. None
  42. None
  43. Aliasing

  44. Сглаживание

  45. Сглаживание

  46. None
  47. None
  48. None
  49. Дома

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. екст Текст Текс

  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. Линейный текст

  65. None
  66. None
  67. None
  68. А что иконки?

  69. Схема работы

  70. None
  71. Данные

  72. None
  73. 1200_2425.png

  74. 1200_2425 [{ type: 'house', geometry: [[25, 25], [25, 50], [50,

    50], [25, 25]] }, { type: 'point', geometry: [25, 25], text: 'Дом №6' }, { type: 'street', geometry: [[25, 20], [125, 20]], text: 'Ватутина' }]
  75. None
  76. Взаимодействие

  77. None
  78. None
  79. None
  80. Заключение

  81. @Trufid Мстислав Живодков TeamLead 2GIS Вопросы? @Trufi github.com/trufi