При разработке сложных 3D-приложений значительная часть вычислительных ресурсов расходуется на постоянное обновление сцены: трансформации объектов, пересчёт матриц, освещения, материалов и прочих параметров. Однако многие сцены или их части в течение длительного времени остаются неизменными. Повторное выполнение полного рендеринга в таких ситуациях приводит к избыточным вычислениям.
Механизм Snapshots Rendering в библиотеке Babylon.js предназначен для оптимизации производительности путём сохранения состояния сцены и повторного использования ранее подготовленных данных рендеринга. Такой подход уменьшает нагрузку на CPU и GPU, особенно в проектах со статической геометрией или редкими обновлениями сцены.
Snapshots Rendering основан на принципе фиксации состояния сцены после её подготовки. После создания снимка (snapshot) движок прекращает выполнять ряд дорогостоящих вычислений, используя сохранённые данные при последующих кадрах.
Снимок включает:
Если сцена не меняется, повторный рендеринг использует эти данные напрямую без повторных вычислений.
Главные преимущества:
Внутренняя архитектура системы снимков состоит из нескольких ключевых компонентов.
На этапе подготовки движок выполняет стандартный цикл:
После завершения подготовки сцена может быть зафиксирована.
Во время создания снимка Babylon.js сохраняет:
После этого движок переключается в режим воспроизведения снимка.
При активированном режиме Snapshots Rendering каждый кадр выполняется значительно быстрее:
GPU получает уже подготовленный набор команд.
Механизм доступен через свойства движка Babylon.js. Для активации используется специальный режим рендеринга.
const engine = new BABYLON.Engine(canvas, true);
engine.snapshotRendering = true;
После активации движок начинает работать в режиме снимков.
Дополнительный параметр определяет момент включения:
engine.snapshotRenderingMode = BABYLON.Constants.SNAPSHOTRENDERING_FAST;
Режим FAST ориентирован на максимальную производительность.
Babylon.js поддерживает несколько режимов работы системы снимков.
Стандартный режим выполняет больше проверок и допускает частичное обновление сцены.
Особенности:
Режим высокой производительности.
Особенности:
Используется в ситуациях, где геометрия и материалы практически не меняются.
Типичный процесс включает несколько этапов.
До создания снимка необходимо:
После этого сцена должна достигнуть стабильного состояния.
engine.snapshotRendering = true;
После активации движок начинает использовать сохранённые данные.
Основной цикл рендеринга остаётся прежним.
engine.runRenderLoop(() => {
scene.render();
});
Однако фактически выполняется значительно меньше вычислений.
Несмотря на высокую эффективность, механизм имеет ряд ограничений.
Если геометрия объекта изменяется:
Примеры изменений:
Изменение источников света нарушает сохранённое состояние сцены.
Сюда относятся:
Анимации трансформаций несовместимы с фиксированным состоянием снимка.
В таких случаях необходимо:
Если сцена изменяется, требуется обновить сохранённые данные.
В Babylon.js это достигается временным отключением режима:
engine.snapshotRendering = false;
// обновление сцены
engine.snapshotRendering = true;
После повторной активации создаётся новый снимок состояния сцены.
Snapshots Rendering особенно эффективен в ряде типов приложений.
Визуализация товаров обычно включает:
В таких условиях snapshot позволяет значительно снизить нагрузку на процессор.
Большие сцены зданий часто остаются неизменными:
Snapshots Rendering уменьшает количество операций обновления сцены.
В VR важна высокая частота кадров.
Использование snapshot:
Основной выигрыш достигается за счёт уменьшения количества операций:
| Операция | Обычный рендеринг | Snapshot |
|---|---|---|
| Пересчёт матриц | каждый кадр | пропускается |
| Сортировка объектов | каждый кадр | пропускается |
| Подготовка draw calls | каждый кадр | используется сохранённая |
| Обновление материалов | каждый кадр | пропускается |
В результате:
Snapshots Rendering эффективно комбинируется с другими механизмами оптимизации.
Позволяет рендерить множество копий одного объекта.
В сочетании со snapshot:
Технология Thin Instances ещё больше снижает накладные расходы.
При статичных сценах:
Метод freezeWorldMatrix() позволяет отключить пересчёт
матриц объектов.
mesh.freezeWorldMatrix();
Использование вместе со snapshot усиливает эффект оптимизации.
Оптимизированная сцена со Snapshot Rendering обычно включает:
Пример структуры:
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera(
"camera",
0,
Math.PI / 2,
10,
BABYLON.Vector3.Zero(),
scene
);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight(
"light",
new BABYLON.Vector3(0, 1, 0),
scene
);
const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
box.freezeWorldMatrix();
engine.snapshotRendering = true;
После этого сцена работает в оптимизированном режиме.
Некоторые типы сцен плохо подходят для данной технологии.
В играх часто присутствуют:
Snapshot будет постоянно пересоздаваться, что снижает эффективность.
Скелетная анимация и морфинг требуют постоянного обновления данных.
Snapshots Rendering в таких условиях почти не приносит выгоды.
Если материалы постоянно обновляются:
система снимков становится менее эффективной.
Babylon.js реализует несколько внутренних механизмов для поддержки Snapshot Rendering:
Это позволяет минимизировать взаимодействие CPU и GPU.
В режиме WebGPU система snapshot особенно эффективна.
Причины:
Это делает технологию перспективной для сложных сцен будущих веб-приложений.
При использовании Snapshot Rendering важно контролировать поведение сцены.
Для диагностики применяются:
Признаки корректной работы:
При разработке сцены с использованием Snapshot Rendering эффективны следующие подходы:
Такая архитектура позволяет максимально использовать преимущества технологии.
Snapshots Rendering представляет собой мощный инструмент оптимизации Babylon.js, позволяющий значительно сократить вычислительную нагрузку при работе со статичными сценами. Механизм фиксации состояния сцены и повторного использования подготовленных данных рендеринга обеспечивает более эффективное использование ресурсов CPU и GPU, что особенно важно для сложных визуализаций, VR-приложений и масштабных трёхмерных проектов в веб-среде.