Что тормозит 3D

Прежде чем оптимизировать, нужно понять, что вообще тормозит 3D. Три главных подозреваемых: draw calls, полигоны, текстуры.

Низкий FPS почти всегда упирается в одно из трёх: слишком много draw calls, слишком много полигонов или слишком тяжёлые текстуры.

Draw calls — команды видеокарте

Draw call — это команда «нарисуй вот эту порцию геометрии». Грубо: каждый отдельный меш со своим материалом — это один вызов. Сами по себе вызовы быстрые, но у каждого есть накладные расходы на общение CPU с GPU. Тысячи отдельных объектов = тысячи вызовов = процессор не успевает за кадр.

Прикинем масштаб: сравним число вызовов для 5000 отдельных кубов и для тех же кубов, объединённых инстансингом в один вызов (о нём — следующий урок).

const objects = 5000;
const naiveCalls = objects;       // каждый куб — свой draw call
const instancedCalls = 1;         // все кубы одним вызовом

console.log('Отдельные меши:', naiveCalls, 'draw calls');
console.log('Инстансинг:', instancedCalls, 'draw call');
console.log('Меньше вызовов в', naiveCalls / instancedCalls + ' раз');

Вывод:

Отдельные меши: 5000 draw calls
Инстансинг: 1 draw call
Меньше вызовов в 5000 раз

Полигоны — число треугольников

Видеокарта обрабатывает каждый треугольник. Сверхдетальная модель с миллионами полигонов или сотня гладких сфер по 4000 треугольников быстро упрутся в лимит. Помните урок про сегментацию: детализацию подбирают под размер объекта на экране, а не «по максимуму».

Полезно держать в голове грубые ориентиры. Современный десктоп комфортно тянет порядка нескольких миллионов треугольников в кадре, а слабый смартфон — на порядок меньше. Поэтому одна и та же сцена, летающая на ноутбуке, может «тормозить» на телефоне: бюджет полигонов у них разный. Если целитесь в мобильные браузеры, считайте полигоны строже.

Текстуры — видеопамять

Большие текстуры (например, 4096×4096) занимают много видеопамяти и пропускной способности. Десяток таких — и слабое устройство начинает тормозить или вовсе отказывает. Текстуры сжимают, уменьшают и переиспользуют.

Как найти узкое место

Не угадывайте — измеряйте. Полезные инструменты:

• renderer.info — показывает число draw calls, треугольников, текстур в кадре.
• Счётчик FPS (например, stats.js) — видно проседания.
• Профайлер браузера — где именно теряется время: CPU или GPU.

Итог

• Тормозят три вещи: draw calls, полигоны, текстуры.
• Много отдельных объектов = много draw calls = просадка FPS.
• Сначала измерьте (renderer.info, stats.js), потом оптимизируйте.