Anchors и привязка к реальному миру

Anchors (якоря) — это механизм пространственной привязки виртуальных объектов к конкретным точкам реального мира в AR-сценариях. В контексте веб-разработки на базе A-Frame якоря используются совместно с WebXR для фиксации виртуальных сущностей в физическом пространстве устройства пользователя.

Технология позволяет:

  • закреплять 3D-объекты на плоскостях (пол, стол, стены);
  • сохранять позицию объектов при перемещении камеры;
  • создавать устойчивые сцены дополненной реальности;
  • организовывать интерактивные AR-интерфейсы.

Работа с якорями невозможна без поддержки WebXR и режима immersive-ar.

Архитектура AR в A-Frame

A-Frame функционирует как декларативная надстройка над Three.js. В AR-режиме используется WebXR Session с типом immersive-ar, который предоставляет:

  • отслеживание положения устройства (6DoF);
  • доступ к реальным плоскостям;
  • систему якорей;
  • hit-test (поиск точки пересечения луча с реальным миром).

Базовая структура AR-сцены

<a-scene
  xr-mode-ui="enabled: true"
  webxr="requiredFeatures: hit-test, local-floor"
>
  <a-entity camera></a-entity>
</a-scene>

Параметр requiredFeatures указывает WebXR, какие возможности обязательны для запуска сессии.

Понятие Anchor в WebXR

Якорь — это пространственная точка, закреплённая в координатной системе реального мира. Он создаётся на основе:

  • результата hit-test;
  • плоскости (plane detection);
  • произвольной позиции, вычисленной программно.

После создания якорь:

  • обновляется системой трекинга;
  • корректирует позицию объекта при дрейфе сенсоров;
  • поддерживает стабильность сцены.

Hit-Test как основа привязки

Hit-test — механизм определения точки пересечения виртуального луча (обычно направленного из камеры) с реальной поверхностью.

В A-Frame hit-test реализуется через WebXR API. Пример логики:

  1. Создаётся XRSession с поддержкой hit-test.
  2. Получается XRHitTestSource.
  3. В каждом кадре запрашиваются результаты.
  4. На основе результата создаётся якорь.

Создание якоря в A-Frame

В чистом A-Frame нет встроенного компонента anchor, поэтому используется кастомный компонент.

Пример компонента для создания якоря

AFRAME.registerComponent('ar-anchor', {
  init: function () {
    this.el.sceneEl.renderer.xr.addEventListener('sessionstart', async () => {
      const session = this.el.sceneEl.renderer.xr.getSession();
      const viewerSpace = await session.requestReferenceSpace('viewer');
      this.hitTestSource = await session.requestHitTestSource({
        space: viewerSpace
      });
    });
  },

  tick: function () {
    const frame = this.el.sceneEl.frame;
    if (!frame || !this.hitTestSource) return;

    const referenceSpace = this.el.sceneEl.renderer.xr.getReferenceSpace();
    const hitTestResults = frame.getHitTestResults(this.hitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const pose = hit.getPose(referenceSpace);

      this.el.object3D.position.set(
        pose.transform.position.x,
        pose.transform.position.y,
        pose.transform.position.z
      );
    }
  }
});

Этот компонент:

  • запускает hit-test после старта AR-сессии;
  • в каждом кадре получает позицию пересечения;
  • перемещает объект в найденную точку.

Закрепление объекта через XRAnchor

Для устойчивости позиции создаётся полноценный XRAnchor. Это снижает дрейф и улучшает стабильность.

Алгоритм:

  1. Получить XRHitTestResult.
  2. Вызвать createAnchor().
  3. Сохранить ссылку на якорь.
  4. В каждом кадре обновлять объект через anchor.anchorSpace.

Пример:

const anchor = await hitTestResult.createAnchor();
this.currentAnchor = anchor;

В цикле рендера:

const pose = frame.getPose(
  this.currentAnchor.anchorSpace,
  referenceSpace
);

Типы Reference Space

WebXR использует различные системы координат:

Тип Назначение
viewer Относительно камеры
local Относительно стартовой позиции
local-floor С учётом уровня пола
bounded-floor Ограниченное пространство

Для AR чаще используется local-floor, поскольку он стабилизирует высоту сцены.

Plane Detection

Некоторые устройства поддерживают обнаружение плоскостей. Это позволяет:

  • различать горизонтальные и вертикальные поверхности;
  • создавать якоря непосредственно на плоскости;
  • оптимизировать размещение объектов.

Для активации:

<a-scene webxr="requiredFeatures: hit-test, plane-detection">

После этого через XRFrame.detectedPlanes можно получать информацию о плоскостях.

Привязка интерфейса к реальному миру

Anchors применяются не только для 3D-моделей, но и для интерфейсов:

  • закреплённые панели управления;
  • виртуальные кнопки на столе;
  • информационные маркеры.

Пример интерфейсной панели:

<a-entity
  geometry="primitive: plane; width: 0.4; height: 0.2"
  material="color: #222"
  ar-anchor>
</a-entity>

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

Сценарии:

  • размещение нескольких объектов;
  • сохранение позиций в массиве;
  • удаление и пересоздание якорей.

Структура хранения:

this.anchors = [];

При создании:

this.anchors.push(anchor);

При очистке:

anchor.delete();

Удаление якоря освобождает ресурсы системы трекинга.

Стабильность и дрейф

Даже при использовании якорей возможны:

  • микросмещения;
  • потеря трекинга при резком движении;
  • переоценка плоскостей.

Методы минимизации:

  • использовать XRAnchor;
  • избегать резкого масштабирования сцены;
  • ограничивать количество активных якорей;
  • применять сглаживание позиций.

Интеграция с физикой

При использовании физических движков (например, cannon.js через A-Frame) необходимо учитывать:

  • якорь задаёт базовую трансформацию;
  • физика должна обновляться после расчёта anchor pose;
  • объект не должен одновременно управляться якорем и динамической физикой.

Часто применяется схема:

  • якорь управляет родительским объектом;
  • физическая модель — дочерний элемент.

Персистентные якоря

Современные устройства поддерживают сохранение якорей между сессиями:

  • через облачные сервисы (ARCore Cloud Anchors);
  • через локальные persistent anchors.

WebXR пока не стандартизирует персистентное хранение, поэтому требуется нативная интеграция или сторонние библиотеки.

Ограничения платформ

Поддержка якорей зависит от:

  • версии браузера;
  • поддержки WebXR;
  • мобильной платформы (Android / iOS);
  • аппаратных сенсоров.

Мобильные браузеры на базе Chromium обеспечивают наиболее стабильную работу AR-сцен с A-Frame.

Практическая структура AR-приложения

  1. Инициализация сцены.
  2. Запрос AR-сессии.
  3. Настройка hit-test.
  4. Создание якоря по жесту пользователя.
  5. Привязка объекта.
  6. Обновление позиции через anchorSpace.
  7. Очистка ресурсов при завершении сессии.

Производительность

Рекомендации:

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

AR-сцены требуют значительно больше вычислительных ресурсов из-за одновременной работы камеры, трекинга и 3D-рендера.

Расширенные сценарии

Геопривязка

Комбинация WebXR и геоданных позволяет создавать:

  • AR-навигацию;
  • городские маркеры;
  • привязку к GPS-координатам.

Совместная AR

Несколько устройств могут:

  • делиться координатной системой;
  • синхронизировать якоря;
  • отображать одинаковые объекты в общем пространстве.

Для этого требуется сервер синхронизации и передача трансформаций через WebSocket.

Внутреннее взаимодействие A-Frame и WebXR

A-Frame:

  • управляет сценой и сущностями;
  • передаёт управление WebXR при старте AR;
  • синхронизирует камеру с XRFrame;
  • обновляет object3D каждого entity.

Якоря работают на уровне WebXR, но визуально управляют object3D внутри A-Frame.

Типичный жизненный цикл якоря

  1. Пользователь указывает точку.
  2. Выполняется hit-test.
  3. Создаётся XRAnchor.
  4. Объект получает ссылку на anchorSpace.
  5. В каждом кадре обновляется pose.
  6. При завершении сессии якорь удаляется.

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

Оглавление