Профилирование: Stats.js и Chrome DevTools

Для анализа производительности веб-приложений с использованием Three.js часто используют библиотеку Stats.js. Она позволяет отслеживать количество кадров в секунду (FPS), время рендеринга и другие показатели, влияющие на плавность анимации.

Подключение может быть выполнено через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>

После подключения создаётся объект Stats:

const stats = new Stats();
stats.showPanel(0); // 0 — FPS, 1 — миллисекунды, 2 — память
document.body.appendChild(stats.dom);

Для интеграции с циклом анимации Three.js используется метод begin() и end():

function animate() {
    stats.begin();

    renderer.render(scene, camera);

    stats.end();
    requestAnimationFrame(animate);
}
animate();

Метод stats.begin() фиксирует начало кадра, а stats.end() — окончание, позволяя отображать актуальные показатели FPS.

Оптимизация рендеринга и производительности

Проверка FPS

FPS (Frames Per Second) — ключевой показатель производительности сцены. Для WebGL-приложений оптимальным считается значение 60 кадров в секунду. Если FPS стабильно ниже 30, необходимо анализировать узкие места:

  • сложные геометрические модели с высоким количеством полигонов;
  • слишком большое количество источников света;
  • обширные текстуры высокого разрешения;
  • частые пересчёты материалов или геометрии.

Минимизация draw calls

Количество draw calls напрямую влияет на производительность. Каждая отдельная меш-геометрия с уникальным материалом генерирует отдельный draw call. Методы оптимизации:

  • объединение геометрий с использованием BufferGeometryUtils.mergeBufferGeometries();
  • использование InstancedMesh для повторяющихся объектов;
  • оптимизация материалов: объединение текстур и использование одного шейдера для группы объектов.

Управление текстурами

Высокое разрешение текстур увеличивает нагрузку на GPU. Эффективные подходы:

  • применение THREE.TextureLoader с параметрами minFilter и magFilter для оптимизации;
  • использование сжатых форматов текстур (DDS, KTX2);
  • удаление неиспользуемых текстур через texture.dispose().

Профилирование с Chrome DevTools

Chrome DevTools предоставляет мощные инструменты для анализа производительности WebGL-приложений.

Панель Performance

  1. Открыть DevTools (F12 или Ctrl+Shift+I).
  2. Перейти на вкладку Performance.
  3. Нажать Record, запустить анимацию сцены, затем остановить запись.

Отображается график FPS и детальный временной разбор: сколько времени занимает рендеринг каждого кадра, выполнение скриптов, layout и paint. Это помогает выявить узкие места и определить, какие части кода вызывают задержки.

Панель Memory

Для WebGL критично следить за потреблением памяти. DevTools позволяет:

  • выполнять heap snapshot для анализа использования объектов;
  • выявлять утечки памяти, например, если объекты Three.js не удаляются корректно (geometry.dispose(), material.dispose()).

WebGL Insights

На вкладке Rendering можно включить WebGL профилирование:

  • отображение количества вызовов draw calls;
  • мониторинг использования текстур и шейдеров;
  • анализ производительности GPU.

Интеграция Stats.js и DevTools

Stats.js хорошо показывает общую нагрузку на кадр, но для детального анализа следует использовать Chrome DevTools. Совместная работа позволяет:

  • быстро увидеть падение FPS на сцене;
  • определить узкие места по времени рендеринга;
  • анализировать потребление памяти и утечки;
  • принимать решения об оптимизации геометрии, текстур и шейдеров.

Практические рекомендации

  • Использовать Stats.js на этапе разработки, чтобы отслеживать динамику FPS при изменениях сцены.
  • Регулярно профилировать сцену через Chrome DevTools для выявления долгих операций.
  • Минимизировать количество draw calls и тяжелых текстур.
  • Освобождать ресурсы: геометрию, материалы, текстуры, которые больше не используются.
  • Для повторяющихся объектов применять InstancedMesh, что позволяет сократить нагрузку на GPU без потери визуального качества.
  • Следить за утечками памяти, особенно при динамическом создании и удалении объектов.

Пример комбинированного подхода

const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);

const clock = new THREE.Clock();

function animate() {
    stats.begin();

    const delta = clock.getDelta();
    // обновление анимаций
    mixer?.update(delta);

    renderer.render(scene, camera);

    stats.end();
    requestAnimationFrame(animate);
}

animate();

Этот подход позволяет в реальном времени отслеживать FPS через Stats.js и одновременно анализировать производительность сцены через DevTools, выявляя узкие места и оптимизируя их для стабильного рендеринга.

Оглавление