Документ описывает оптимизацию приложения на основе WebGL, в частности улучшение производительности за счёт объединения геометрий, что позволило увеличить FPS с 20 до 50. Также упоминаются инструменты и библиотеки, такие как three.js и rbush, которые использовались для облегчения зависимости и данных. Важные аспекты, включая профилирование и проблемы z-fighting, также рассматриваются.

1. Как мы ускоряли WebGL
Мстислав Живодков

4. Что ждать

5. Наше приложение

6. Наше приложение

7. Наше приложение

8. Наше приложение
20 fps

9. Объединяем геометрии

10. Было
300 геометрий
20 fps
Стало
1 геометрия
50 fps
Объединяем геометрии

11. Маркеры

16. Было
150-1000 элементов
50 fps
Стало
1 геометрия
60 fps

17. • object.addEventListener("click")
Интерактив

18. Интерактив
• Raycaster из three.js

19. • Маркеры
github.com/mourner/rbush
Интерактив

20. Интерактив

21. Облегчаем приложение

22. [CELLRANG
E]
наш код
18%
[CELLRANG
E]
three.js
82%
Облегчаем зависимости
• Размер three.js 507kB

23. Облегчаем зависимости
• Размер three.js 507kB
• Размер 2gl 103kB
github.com/2gis/2gl [CELLRANG
E]
наш код
53%
[CELLRANG
E]
2gl
47%

24. Облегчаем данные

25. Облегчаем данные
• Триангуляция

26. Облегчаем данные
• Триангуляция
 Увеличивает количество данных
 Требует больших вычислений
 github.com/mapbox/earcut

27. Облегчаем данные
• Триангуляция
 Увеличивает количество данных
 Требует больших вычислений
 github.com/mapbox/earcut
• Бинарный формат
 github.com/google/protobuf

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

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

30. • TypedArray
• Параллельность
• Профилирование
Важные детали

31. Незнакомые проблемы

32. Z-fighting

33. C WebGL нужно по-другому думать

34. Что было

35. Спасибо за
внимание!
@Trufid
github.com/Trufi