DOM Overlay в AR-режиме

Babylon.js предоставляет мощный инструментарий для создания AR-приложений с использованием WebXR. Одним из ключевых элементов современных AR-интерфейсов является возможность интеграции DOM-элементов поверх 3D-сцены, сохраняя их привязку к виртуальным объектам или пространству реального мира. Эта функциональность реализуется через DOM Overlay.

Основы DOM Overlay

DOM Overlay позволяет накладывать стандартные HTML-элементы поверх канваса Babylon.js, при этом элементы остаются интерактивными и реагируют на события браузера. В AR-режиме это особенно важно, поскольку часто требуется создавать пользовательские интерфейсы, всплывающие подсказки или панели управления, которые остаются видимыми и доступными независимо от движения камеры.

В Babylon.js DOM Overlay поддерживается через включение соответствующего слоя при инициализации XR-сессии:

const xr = await scene.createDefaultXRExperienceAsync({
    uiOptions: { sessionMode: 'immersive-ar' }
});

xr.baseExperience.sessionManager.onXRSessionInit.add(() => {
    xr.baseExperience.featuresManager.enableFeature(
        BABYLON.WebXRFeatureName.DOM_OVERLAY,
        'latest', 
        {
            rootNode: document.getElementById('ui-container')
        }
    );
});
  • rootNode — HTML-элемент, который будет служить контейнером для всех DOM-элементов, накладываемых на сцену.
  • sessionMode: 'immersive-ar' — обязательный режим для работы в AR.

Привязка DOM-элементов к объектам сцены

DOM Overlay в Babylon.js позволяет не только фиксировать интерфейс в центре экрана, но и привязывать элементы к конкретным объектам сцены. Для этого используется компонент WebXRDOMOverlayFeature вместе с объектом BABYLON.TransformNode.

Пример привязки подсказки к 3D-объекту:

const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

const domElement = document.createElement("div");
domElement.className = "label";
domElement.innerText = "Привет, AR!";
document.getElementById("ui-container").appendChild(domElement);

const domOverlay = xr.baseExperience.featuresManager.getEnabledFeature(BABYLON.WebXRFeatureName.DOM_OVERLAY);

domOverlay.addAnchorForElement(domElement, box);
  • addAnchorForElement обеспечивает позиционирование DOM-элемента в 3D-пространстве.
  • Позиция и ориентация элемента автоматически обновляются при движении камеры и объекта.

Работа с событиями

DOM Overlay поддерживает стандартные события DOM, такие как click, mouseover, touchstart. Это позволяет создавать интерактивные элементы интерфейса:

domElement.addEventListener("click", () => {
    console.log("Элемент нажат!");
    box.rotation.y += Math.PI / 4;
});

Элементы остаются полностью функциональными даже при активном AR-режиме, что делает возможным создание меню, кнопок и ползунков, интегрированных в 3D-сцену.

Оптимизация отображения

При работе с DOM Overlay необходимо учитывать производительность:

  • Минимизировать количество одновременно отображаемых элементов. Каждый DOM-элемент требует обновления позиции при каждом кадре.
  • Использовать CSS-трансформации для плавного позиционирования (transform: translate3d(...)) вместо изменения top и left.
  • Скрывать элементы, когда они находятся вне поля зрения камеры, чтобы снизить нагрузку на рендеринг.

Совместимость и ограничения

  • DOM Overlay поддерживается только в браузерах с полноценной WebXR-поддержкой, таких как Chrome на Android и Edge на Windows.
  • Не все CSS-свойства работают корректно при наложении поверх AR-канваса; рекомендуется ограничиваться transform, opacity, pointer-events и базовыми стилями.
  • Сложные анимации и переходы могут снижать FPS, особенно на мобильных устройствах.

Кастомизация интерфейса

DOM Overlay предоставляет возможность создавать любые элементы интерфейса: текстовые подсказки, кнопки управления, индикаторы состояния. Например, можно создать панель с информацией о объекте:

<div id="ui-container">
    <div class="info-panel">
        <h2>Объект AR</h2>
        <p>Описание и свойства объекта</p>
    </div>
</div>
.info-panel {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px;
    border-radius: 5px;
    pointer-events: auto;
}

Элементы панели будут привязаны к объектам сцены через addAnchorForElement, создавая ощущение естественного взаимодействия с виртуальными объектами.

Динамическое обновление элементов

DOM Overlay позволяет обновлять контент элементов в реальном времени. Это полезно для отображения информации о состоянии сцены, позициях объектов или других динамических данных:

scene.onBeforeRenderObservable.add(() => {
    domElement.innerText = `Позиция: ${box.position.x.toFixed(2)}, ${box.position.y.toFixed(2)}, ${box.position.z.toFixed(2)}`;
});

Обновление текста или стиля происходит синхронно с кадрами сцены, что обеспечивает актуальность информации.

Заключение по возможностям

Использование DOM Overlay в AR-режиме Babylon.js позволяет объединить удобство стандартного HTML-интерфейса с интерактивностью и пространственной привязкой 3D-объектов. Это решение подходит как для образовательных, так и для коммерческих AR-приложений, обеспечивая гибкость дизайна и лёгкость взаимодействия.

Оглавление