Производительность WebGL-приложений / Дмитренко Кирилл...

Производительность 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. •  Планировщик.

Спасибо!

Кирилл Дмитренко Разработчик интерфейсов

@dmikis facebook.com/dmikis dmikis@yandex-team.ru