Проектирование за пределами 60 fps: приёмы производительности WebGL

Шестьдесят кадров в секунду — это не цель по производительности, это дедлайн. У вас есть 16,6 миллисекунды, браузер забирает часть на композитинг, а всё оставшееся принадлежит вашей сцене. Большинство WebGL-работ, которые кажутся медленными, не делают слишком много математики — они слишком часто обращаются к GPU.

1. Сначала задайте бюджет draw-call

Определите число до того, как что-либо моделировать. На среднем мобильном железе мы держимся около 150 draw-call на кадр; всё сверх этого — и CPU становится узким местом задолго до фрагментного шейдера. Бюджет превращает бесконечную задачу оптимизации в чек-лист.

Нельзя оптимизировать то, что вы не измеряли. Откройте профайлер прежде, чем откроете шейдер.

2. Инстансируйте всё повторяющееся

Любая геометрия, встречающаяся больше нескольких раз, должна быть в инстансированном меше. Двенадцать тысяч частиц как отдельные меши застопорят главный поток; те же двенадцать тысяч как один инстансированный draw-call стоят примерно как один куб. Данные каждого инстанса живут в буфере атрибутов, который вы обновляете на месте.

3. Сделайте простаивающие сцены бесплатными

Самый дешёвый кадр — тот, который вы не рендерите. Останавливайте цикл, когда canvas покидает область просмотра, когда вкладка скрыта и когда в сцене ничего не изменилось. Пользователи судят о сайте по разряду батареи куда сильнее, чем готовы признать.