Embed Size (px)
Citation preview
Производительность WebGL приложений Кирилл Дмитренко Яндекс
План • Что такое WebGL? • Измерение производительности
• Оптимизации
WebGL?
WebGL – API к GPU
Приложение
Приложение
Буферы
Приложение
Буферы Текстуры
Приложение
Буферы Шейдеры Текстуры
Приложение
Буферы Шейдеры Текстуры
WebGL контекст
Измерение
FPS
Профайлер
Асинхронность • Некоторые вызовы асинхронные.
Асинхронность • Некоторые вызовы асинхронные.
• Некоторые – синхронные.
Асинхронность • Некоторые вызовы асинхронные.
• Некоторые – синхронные. • Некоторые синхронизируют весь контекст.
EXT_disjoint_timer_query
+ Измеряет время исполнения на GPU.
EXT_disjoint_timer_query
+ Измеряет время исполнения на GPU.
+ Асинхронно.
EXT_disjoint_timer_query
+ Измеряет время исполнения на GPU.
+ Асинхронно.
- Надо писать код.
EXT_disjoint_timer_query
• Время исполнения группы вызовов.
EXT_disjoint_timer_query
• Время исполнения группы вызовов.
• Временные метки.
Demo time!
Измерение: выводы • FPS как качественная характеристика.
Измерение: выводы • FPS как качественная характеристика.
• Профайлер для поиска узких мест на CPU.
Измерение: выводы • FPS как качественная характеристика.
• Профайлер для поиска узких мест на CPU.
• EXT_disjoint_timer_query– на GPU.
Оптимизации
Работа с состоянием • Не вызываем get* и read*.
Работа с состоянием • Не вызываем get* и read*. • getError() – только в разработке.
Работа с состоянием • Не вызываем get* и read*. • getError() – только в разработке.
• Минимизировать переключения.
foreach (framebuffer) foreach (state) foreach (program) foreach (texture set) foreach (vertex buffer) foreach (object) draw();
Less calls, more work!
• Несколько объектов в один буфер.
Less calls, more work!
• Несколько объектов в один буфер.
• Текстуры – в атлас.
Less calls, more work!
• Несколько объектов в один буфер.
• Текстуры – в атлас. • Instancing.
Demo time!
В панорамах • Получили бесплатно ☺
В панорамах • Получили бесплатно ☺ • Instancing для маркеров.
В панорамах • Получили бесплатно ☺ • Instancing для маркеров. • Вытеснение невидимых секторов панорамы.
В панорамах
В панорамах
В панорамах
В панорамах
Overdraw • Считаем пиксели по несколько раз.
Overdraw • Исключить из кадра невидимые объекты.
Overdraw • Исключить из кадра невидимые объекты.
• Отсортировать объекты по Z.
Overdraw • Исключить из кадра невидимые объекты.
• Отсортировать объекты по Z.
• Depth pre-pass.
Demo time!
В панорамах
В панорамах
В панорамах
В панорамах
В панорамах
В панорамах
В панорамах
В панорамах
В панорамах
В панорамах
В панорамах
В панорамах
Код вокруг • DOM. • Загрузка ресурсов. • События UI.
Код вокруг • Разбить на небольшие части.
Код вокруг • Разбить на небольшие части.
• Планировщик.
В панорамах • Загрузка видимых тайлов.
В панорамах • Загрузка видимых тайлов. • Вытеснение невидимых частей панорамы.
В панорамах • Загрузка видимых тайлов. • Вытеснение невидимых частей панорамы.
• События API.
Оптимизации: выводы • Аккуратно работаем с состоянием.
Оптимизации: выводы • Аккуратно работаем с состоянием.
• Меньше вызовов draw*.
Оптимизации: выводы • Аккуратно работаем с состоянием.
• Меньше вызовов draw*. • Избегаем overdraw.
Оптимизации: выводы • Аккуратно работаем с состоянием.
• Меньше вызовов draw*. • Избегаем overdraw. • Планировщик.
Спасибо!
