Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Как мы ускоряли WebGL / Мстислав Живодков (2GIS)

185 views

Published on

Если вы захотите сделать веб-приложение с использованием технологии WebGL, скорее всего, вы захотите также, чтобы это приложение было отзывчивым и быстро работало даже на медленных компьютерах.

Но если вы простой фронтендер, занимаетесь js, html и css, то 3D-графика для вас покажется совершенно иным миром со своими законами. Так это случилось с нами во время разработки нашего продукта.

Поэтому в докладе я хочу рассказать:
1. О новых проблемах, с которыми мы столкнулись по вине WebGL;
2. О различных методах оптимизации, которые мы успешно и не очень опробовали на проекте, а также наглядно показать их действие на рабочих примерах;
3. Приведу другие способы ускорения, до которых у нас пока ещё просто не добрались руки.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Как мы ускоряли WebGL / Мстислав Живодков (2GIS)

  1. 1. Как мы ускоряли WebGL Мстислав Живодков
  2. 2. Что ждать
  3. 3. Наше приложение
  4. 4. Наше приложение
  5. 5. Наше приложение
  6. 6. Наше приложение 20 fps
  7. 7. Объединяем геометрии
  8. 8. Было 300 геометрий 20 fps Стало 1 геометрия 50 fps Объединяем геометрии
  9. 9. Маркеры
  10. 10. Было 150-1000 элементов 50 fps Стало 1 геометрия 60 fps
  11. 11. • object.addEventListener("click") Интерактив
  12. 12. Интерактив • Raycaster из three.js
  13. 13. • Маркеры github.com/mourner/rbush Интерактив
  14. 14. Интерактив
  15. 15. Облегчаем приложение
  16. 16. [CELLRANG E] наш код 18% [CELLRANG E] three.js 82% Облегчаем зависимости • Размер three.js 507kB
  17. 17. Облегчаем зависимости • Размер three.js 507kB • Размер 2gl 103kB github.com/2gis/2gl [CELLRANG E] наш код 53% [CELLRANG E] 2gl 47%
  18. 18. Облегчаем данные
  19. 19. Облегчаем данные • Триангуляция
  20. 20. Облегчаем данные • Триангуляция  Увеличивает количество данных  Требует больших вычислений  github.com/mapbox/earcut
  21. 21. Облегчаем данные • Триангуляция  Увеличивает количество данных  Требует больших вычислений  github.com/mapbox/earcut • Бинарный формат  github.com/google/protobuf
  22. 22. Сглаживание
  23. 23. Сглаживание
  24. 24. • TypedArray • Параллельность • Профилирование Важные детали
  25. 25. Незнакомые проблемы
  26. 26. Z-fighting
  27. 27. C WebGL нужно по-другому думать
  28. 28. Что было
  29. 29. Спасибо за внимание! @Trufid github.com/Trufi

×