Babylon.js содержит встроенный инструмент диагностики и анализа сцены — Inspector. Он предоставляет визуальный интерфейс для исследования структуры сцены, отслеживания производительности и анализа состояния объектов во время выполнения приложения. Inspector используется как основной инструмент первичного профилирования WebGL-приложений, поскольку позволяет оперативно выявлять перегруженные подсистемы: геометрию, материалы, текстуры, освещение и шейдеры.
Inspector подключается как дополнительный модуль библиотеки:
<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>После подключения его можно открыть программно:
scene.debugLayer.show();В интерфейсе появляется отдельная панель, содержащая набор вкладок для анализа различных аспектов сцены.
Раздел Statistics отображает основные показатели производительности сцены в реальном времени. Эти метрики формируются внутри движка и обновляются каждый кадр.
Ключевые показатели:
Frame Time
Показывает время отрисовки одного кадра. Значение выражается в миллисекундах.
Увеличение этого параметра сигнализирует о перегрузке CPU или GPU.
Draw Calls
Количество вызовов рендеринга за кадр. Каждый draw call — отдельная операция отправки данных на GPU.
Высокие значения (сотни и тысячи) создают значительную нагрузку на процессор. Основные причины:
Active Meshes
Количество мешей, участвующих в текущем рендеринге после фрустум-куллинга.
Если значение близко к общему количеству объектов сцены, это указывает на неэффективную систему отсечения.
Vertices
Количество вершин, обрабатываемых GPU.
Большие значения возникают из-за:
Particles
Количество активных частиц в системах частиц.
Сильное увеличение может значительно нагрузить GPU.
Inspector позволяет исследовать структуру сцены и выявлять источники перегрузки.
Во вкладке Scene Explorer отображается иерархия:
Каждый объект можно раскрыть и изучить его свойства.
Для мешей доступны параметры:
Высокополигональные модели легко обнаруживаются по значению
Total Vertices.
Babylon.js активно использует GPU-шейдеры. Сложные материалы увеличивают нагрузку на графический процессор.
Inspector показывает:
Материалы, которые используют:
создают более тяжёлые шейдеры.
Раздел Shader позволяет просматривать сгенерированный GLSL-код. Это полезно при диагностике:
Текстуры часто становятся основной причиной проблем с памятью GPU.
Inspector показывает:
Особенно ресурсоёмкими являются текстуры:
Если сцена содержит десятки текстур большого размера, это увеличивает:
Освещение влияет на производительность из-за дополнительных вычислений в шейдерах.
Inspector показывает активные источники света:
Количество источников напрямую влияет на сложность шейдера. Каждый свет добавляет новые вычисления освещения.
При использовании shadow maps нагрузка возрастает ещё сильнее, поскольку сцена рендерится несколько раз для формирования карт теней.
В Inspector отображаются параметры:
Частицы активно используются для визуальных эффектов: огонь, дым, магия, взрывы.
Inspector позволяет увидеть:
Большие системы (десятки тысяч частиц) могут перегружать GPU, особенно при использовании прозрачности и сложных текстур.
Inspector содержит несколько полезных инструментов диагностики.
Wireframe режим
Позволяет визуально анализировать плотность геометрии.
scene.forceWireframe = true;Если сцена становится слишком насыщенной линиями, это указывает на чрезмерную детализацию моделей.
Bounding Boxes
Позволяет увидеть границы объектов:
mesh.showBoundingBox = true;Это помогает анализировать работу фрустум-куллинга.
Display Normals
Позволяет визуализировать нормали мешей.
Используется для диагностики проблем освещения и шейдеров.
Хотя Inspector удобен для анализа сцены, полноценное профилирование выполняется через Chrome DevTools.
DevTools позволяет анализировать:
Панель Performance предназначена для анализа времени выполнения JavaScript и работы рендеринга.
Запуск профилирования выполняется через кнопку Record.
Во время записи выполняются:
После остановки записи отображается подробный таймлайн.
На таймлайне отображаются:
В WebGL-приложениях основной интерес представляют:
Scripting
Работа JavaScript-кода.
Большие затраты времени здесь возникают из-за:
Rendering
Работа браузера по подготовке кадра.
Сюда входят:
GPU
Время работы графического процессора.
Если GPU перегружен, время кадра увеличивается даже при низкой нагрузке CPU.
Flame Chart показывает стек вызовов JavaScript.
В Babylon.js здесь можно увидеть:
scene.renderengine.drawcamera.updateanimation.evaluateДлительные функции легко выявляются по ширине блока.
DevTools содержит вкладку Memory, позволяющую анализировать использование памяти.
Выделяются:
Утечки памяти возникают при:
Инструмент WebGL Insight (или расширения WebGL-анализа) позволяет отслеживать реальные вызовы WebGL API:
drawElementsbindBufferuseProgrambindTextureБольшое количество вызовов drawElements свидетельствует
о большом количестве draw calls.
Вкладка Network помогает анализировать загрузку ресурсов:
Особое внимание уделяется файлам:
.glb.gltf.png.hdrБольшие модели могут значительно увеличивать время загрузки сцены.
Chrome DevTools предоставляет режим WebGL Profiler.
Он показывает:
Это позволяет определить:
Наиболее эффективный подход — использование обоих инструментов одновременно.
Inspector помогает:
Chrome DevTools используется для:
Комбинирование этих инструментов позволяет находить проблемы на всех уровнях приложения: