Производительность WebGL-приложений / Дмитренко Кирилл (Яндекс)
1 like1,102 views
Документ содержит рекомендации по оптимизации производительности WebGL приложений, описывая методы измерения FPS и использования профайлеров для анализа узких мест. Обсуждаются важные аспекты асинхронности вызовов и минимизации операций, таких как избегание get* и read*, а также группировка объектов для сокращения вызовов. Также предлагаются стратегии снижения переотрисовки и загрузки ресурсов для повышения эффективности работы с состоянием и уменьшения общего объема операций.
Производительность WebGL-приложений / Дмитренко Кирилл (Яндекс)
- 2. План • Что такое WebGL? • Измерение производительности • Оптимизации
- 3. WebGL?
- 4. WebGL – API к GPU
- 6. Приложение
- 11. Измерение
- 12. FPS
- 13. Профайлер
- 15. Асинхронность • Некоторые вызовы асинхронные. • Некоторые – синхронные.
- 16. Асинхронность • Некоторые вызовы асинхронные. • Некоторые – синхронные. • Некоторые синхронизируют весь контекст.
- 18. EXT_disjoint_timer_query + Измеряет время исполнения на GPU. + Асинхронно.
- 19. EXT_disjoint_timer_query + Измеряет время исполнения на GPU. + Асинхронно. - Надо писать код.
- 20. EXT_disjoint_timer_query • Время исполнения группы вызовов.
- 21. EXT_disjoint_timer_query • Время исполнения группы вызовов. • Временные метки.
- 22. Demo time!
- 23. Измерение: выводы • FPS как качественная характеристика.
- 24. Измерение: выводы • FPS как качественная характеристика. • Профайлер для поиска узких мест на CPU.
- 25. Измерение: выводы • FPS как качественная характеристика. • Профайлер для поиска узких мест на CPU. • EXT_disjoint_timer_query – на GPU.
- 26. Оптимизации
- 27. Работа с состоянием • Не вызываем get* и read*.
- 28. Работа с состоянием • Не вызываем get* и read*. • getError() – только в разработке.
- 29. Работа с состоянием • Не вызываем get* и read*. • getError() – только в разработке. • Минимизировать переключения.
- 30. foreach (framebuffer) foreach (state) foreach (program) foreach (texture set) foreach (vertex buffer) foreach (object) draw();
- 31. Less calls, more work! • Несколько объектов в один буфер.
- 32. Less calls, more work! • Несколько объектов в один буфер. • Текстуры – в атлас.
- 33. Less calls, more work! • Несколько объектов в один буфер. • Текстуры – в атлас. • Instancing.
- 34. Demo time!
- 35. В панорамах • Получили бесплатно ☺
- 36. В панорамах • Получили бесплатно ☺ • Instancing для маркеров.
- 37. В панорамах • Получили бесплатно ☺ • Instancing для маркеров. • Вытеснение невидимых секторов панорамы.
- 38. В панорамах
- 39. В панорамах
- 40. В панорамах
- 41. В панорамах
- 42. Overdraw • Считаем пиксели по несколько раз.
- 43. Overdraw • Исключить из кадра невидимые объекты.
- 44. Overdraw • Исключить из кадра невидимые объекты. • Отсортировать объекты по Z.
- 45. Overdraw • Исключить из кадра невидимые объекты. • Отсортировать объекты по Z. • Depth pre-pass.
- 46. Demo time!
- 47. В панорамах
- 48. В панорамах
- 49. В панорамах
- 50. В панорамах
- 51. В панорамах
- 52. В панорамах
- 53. В панорамах
- 54. В панорамах
- 55. В панорамах
- 56. В панорамах
- 57. В панорамах
- 58. В панорамах
- 59. Код вокруг • DOM. • Загрузка ресурсов. • События UI.
- 60. Код вокруг • Разбить на небольшие части.
- 61. Код вокруг • Разбить на небольшие части. • Планировщик.
- 62. В панорамах • Загрузка видимых тайлов.
- 63. В панорамах • Загрузка видимых тайлов. • Вытеснение невидимых частей панорамы.
- 64. В панорамах • Загрузка видимых тайлов. • Вытеснение невидимых частей панорамы. • События API.
- 65. Оптимизации: выводы • Аккуратно работаем с состоянием.
- 66. Оптимизации: выводы • Аккуратно работаем с состоянием. • Меньше вызовов draw*.
- 67. Оптимизации: выводы • Аккуратно работаем с состоянием. • Меньше вызовов draw*. • Избегаем overdraw.
- 68. Оптимизации: выводы • Аккуратно работаем с состоянием. • Меньше вызовов draw*. • Избегаем overdraw. • Планировщик.
- 69. Спасибо!