WebXRDefaultExperience: быстрый старт

Библиотека Babylon.js предоставляет удобный интерфейс для работы с виртуальной и дополненной реальностью через объект WebXRDefaultExperience. Этот класс позволяет создать полностью функциональный XR-контекст с минимальной конфигурацией. Основной принцип работы заключается в том, что сцена автоматически получает XR-сессию, камеры и контроллеры.

const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);

BABYLON.WebXRDefaultExperience.CreateAsync(scene).then((xrExperience) => {
    // xrExperience содержит камеры, контроллеры и сцепление с XR-сессией
});

Здесь метод CreateAsync возвращает промис с объектом xrExperience, который объединяет все ключевые компоненты XR: camera, input, session и features.

Основные компоненты WebXRDefaultExperience

WebXRDefaultExperience состоит из нескольких важных объектов:

  • baseExperience – главный контроллер сцены в XR.
  • baseExperience.camera – камера, автоматически настроенная для VR/AR.
  • baseExperience.input – управление XR-контроллерами, включая детекцию жестов и позиции рук.
  • baseExperience.sessionManager – управление жизненным циклом XR-сессии.
  • baseExperience.featuresManager – управление дополнительными функциями, такими как отслеживание рук или подсветка объектов.

Настройка камеры и сцены

Камера, создаваемая WebXRDefaultExperience, является XR-специфичной. Она наследует свойства обычной Babylon.js камеры, но управляется XR-системой.

xrExperience.baseExperience.camera.position = new BABYLON.Vector3(0, 1.6, 0);
xrExperience.baseExperience.camera.attachControl(canvas, true);
  • position задаёт начальную точку обзора.
  • attachControl привязывает камеру к canvas для работы с мышью и VR-контроллерами при необходимости.

Работа с контроллерами

Контроллеры XR автоматически создаются при старте сессии. Объект input позволяет получать события нажатий и движения:

xrExperience.input.onControllerAddedObservable.add((controller) => {
    controller.onMotionControllerInitObservable.add((motionController) => {
        console.log("Контроллер инициализирован:", motionController);
    });

    controller.onTriggerStateChangedObservable.add((state) => {
        console.log("Состояние триггера:", state.value);
    });
});

Ключевые моменты:

  • onControllerAddedObservable срабатывает при подключении нового контроллера.
  • onMotionControllerInitObservable предоставляет доступ к физическим кнопкам и сенсорам.
  • onTriggerStateChangedObservable отслеживает изменение состояния триггера.

Управление сессией XR

Сессия XR создается автоматически, но можно управлять её началом и завершением через sessionManager:

// Запуск XR-сессии
xrExperience.baseExperience.enterXRAsync("immersive-vr", "local-floor").then(() => {
    console.log("XR-сессия начата");
});

// Завершение сессии
xrExperience.baseExperience.exitXRAsync().then(() => {
    console.log("XR-сессия завершена");
});

Метод enterXRAsync принимает тип сессии и пространство отслеживания ("local-floor", "bounded-floor", "viewer"). Метод exitXRAsync корректно завершает сессию и освобождает ресурсы.

Использование функций и расширений

Babylon.js поддерживает подключаемые функции XR через featuresManager:

const handTracking = xrExperience.baseExperience.featuresManager.enableFeature(
    BABYLON.WebXRFeatureName.HAND_TRACKING,
    "latest",
    { xrInput: xrExperience.input }
);

handTracking.onHandAddedObservable.add((hand) => {
    console.log("Рука обнаружена:", hand);
});

Основные возможности featuresManager:

  • Отслеживание рук и жестов.
  • Поддержка пространственного звука.
  • Подключение пользовательских модулей взаимодействия.

События жизненного цикла XR

WebXRDefaultExperience предоставляет наблюдаемые события, позволяющие синхронизировать логику приложения с XR:

  • onXRSessionInitObservable – вызывается после успешной инициализации сессии.
  • onXRSessionEndedObservable – срабатывает при завершении сессии.
  • onBeforeRenderXRObservable – каждый кадр перед рендерингом XR.
  • onAfterRenderXRObservable – каждый кадр после рендеринга XR.

Пример использования:

xrExperience.baseExperience.sessionManager.onXRSessionInitObservable.add(() => {
    console.log("Сессия XR готова к использованию");
});

Настройка AR и VR

Тип сессии XR определяется при входе:

  • immersive-vr – полнофункциональная виртуальная реальность.
  • immersive-ar – дополненная реальность с наложением объектов на камеру устройства.
  • inline – простое отображение без полного погружения.

Пример создания AR-сессии:

xrExperience.baseExperience.enterXRAsync("immersive-ar", "local-floor");

Babylon.js автоматически адаптирует камеру и координаты объектов под выбранный тип XR.

Практическая интеграция

WebXRDefaultExperience позволяет сосредоточиться на логике приложения, не погружаясь в низкоуровневые детали WebXR. Для динамического управления объектами используется стандартная сцена Babylon.js:

const box = BABYLON.MeshBuilder.CreateBox("box", { size: 0.3 }, scene);
box.position.set(0, 1, -1);

scene.onBeforeRenderObservable.add(() => {
    box.rotation.y += 0.01;
});

Объекты автоматически отображаются корректно в VR и AR с настройками XR-камеры. Контроллеры позволяют управлять взаимодействием без дополнительной конфигурации.

Итоги работы с WebXRDefaultExperience

WebXRDefaultExperience объединяет все ключевые аспекты XR в Babylon.js: камеры, контроллеры, события, функции и управление сессией. Его использование сокращает количество кода и позволяет быстро перейти к созданию интерактивных VR/AR-сцен, оставляя пространство для расширения через featuresManager и события жизненного цикла.

Оглавление