WebXR

Что такое WebXR?

  WebXR — это спецификация API W3C, которая позволяет веб-браузерам напрямую взаимодействовать с оборудованием виртуальной реальности (VR) и дополненной реальности (AR). Вместо того чтобы требовать создания собственных приложений для конкретной платформы. В силу чего WebXR позволяет разработчикам создавать захватывающие впечатления с помощью стандартного браузера — на всем, от гарнитуры Meta Quest до телефона Android, висящего на стене в гостиной.

WebXR

  Как следствие он заменяет более старый WebVR API (устаревший с 2019 года) . К тому же в настоящее время поддерживается рабочей группой W3C Immersive Web Working Group. Кстати в 2021 году базовая спецификация получила статус рекомендации для кандидатов. А также постоянно расширяется за счет предложений по модульным функциям.

Основная архитектура API

Модель сеанса

  Все в WebXR начинается с XRSession. Перед отображением любого захватывающего контента страница должна запросить и получить разрешение пользователя:

javascript
// Check support
const supported = await navigator.xr.isSessionSupported('immersive-vr');

// Request a session
const session = await navigator.xr.requestSession('immersive-vr', {
  requiredFeatures: ['local-floor'],
  optionalFeatures: ['bounded-floor', 'hand-tracking']
});

immersive-vr  Full VR — Гарнитура полностью заменяет дисплей на VR—гарнитуру

immersive-ar AR — Накладывает контент на прохождение в реальном мире

inline  Предварительный просмотр внутри страницы без погружения, не требующий специального оборудования

Опорные пространства

  Опорные пространства определяют начало координат для отслеживания. Неправильный выбор — одна из наиболее распространенных ошибок WebXR:

javascript
const refSpace = await session.requestReferenceSpace('local-floor');

viewer Положение гарнитуры в начале сеанса — сенсорные экраны с фиксацией на голове, видеосъемка на 360°.

local Положение пользователя в начале сеанса — сидячее или неподвижное.

local-floor Исходная шкала на уровне пола с ориентированной по силе тяжести осью Y.

bounded-floor Отслеживаемый полигон игровой площадки — приложения, поддерживающие границы.

unbounded Привязка к миру для больших пространств — дополненная реальность на открытом воздухе, картографирование.

Цикл рендеринга

  WebXR обходит requestAnimationFrame в пользу своего собственного механизма синхронизации, точно привязанного к vsync и прогнозированию положения:

javascript
session.requestAnimationFrame((time, frame) => {
  const pose = frame.getViewerPose(refSpace);

  if (pose) {
    for (const view of pose.views) {
      const viewport = session.renderState.baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      // Set projection + view matrices from WebXR
      setProjectionMatrix(view.projectionMatrix);
      setViewMatrix(view.transform.inverse.matrix);

      renderScene();
    }
  }

  session.requestAnimationFrame(/* recurse */);
});

  Параметры view.projectionMatrix и view.transform вычисляются браузером с использованием данных IMU гарнитуры в реальном времени и алгоритма прогнозирования положения — обычно на 20-30 мс опережают фактическое время отображения, чтобы компенсировать задержку рендеринга.

Модули расширения WebXR

  Основная спецификация намеренно упрощена. Расширенные возможности поставляются в виде отдельных модулей W3C:

WebXR Layers

  Позволяет отображать отдельные слои контента (квадраты, цилиндры, видео equirect) непосредственно в композиторе в полном разрешении, минуя фреймбуфер WebGL. Безусловно это важно для четкого воспроизведения текста и видео в пользовательском интерфейсе.

WebXR Hand Input

  Например демонстрирует скелет из 25 названных суставов каждой руки (запястье, кончик большого пальца, указательный палец, пястная кость и т.д.), каждый из которых имеет полное положение 6DoF и значение радиуса для столкновения.

WebXR Hit Test

  Вместе с тем направляет лучи в дополненную реальность и возвращает позы пересечения с реальными поверхностями. И как следствие используется для оптимизации процесса размещения объектов.

WebXR Anchors

  К тому же прикрепляет постоянную привязку 6DoF к точке реального мира, сохраняя корректировку смещения позы. Безусловно это важно для многопользовательской настройки AR.

WebXR Depth Sensing

  По данным предоставляет буфер глубины реального окружения в виде массива UINT16, считываемого центральным процессором (глубина в миллиметрах), или текстуры на графическом процессоре. Коротко говоря позволяет реалистично перекрывать виртуальные объекты реальными.

WebXR DOM Overlays

  Проецирует стандартное HTML-дерево <div> поверх иммерсивной сцены для 2D-интерфейса без пользовательских панелей in-world.

WebXR Lighting Estimation

  Возвращает карту среды со сферическими гармониками и XRLightProbe, чтобы 3D-объекты можно было освещать в соответствии с реальным миром.

Модель безопасности и разрешений

  WebXR работает в условиях строгих ограничений безопасности браузера. Сеансы могут быть запущены только из защищенного контекста (HTTPS или localhost), а режимы виртуальной реальности / дополненной реальности требуют временной активации пользователем — щелчка, касания или нажатия кнопки — непосредственно перед вызовом функции requestSession(). Браузер всегда будет отображать свой собственный запрос разрешения на доступ к камере (AR) или отслеживание доступа.

  Чувствительные модули, такие как Raw Camera Access и Eye Tracking, содержат дополнительные явные разрешения, которые невозможно обойти независимо от контекста iframe или встраивания.

Практический путь развития WebXR

  • Three.js благодаря встроенному WebXRManager, который «из коробки» управляет настройкой сеанса, циклом рендеринга и моделями контроллеров.
  • Babylon.js для команд, которым нужен полноценный движок с интегрированной физикой, графикой сцен, графическим интерфейсом и XR.
  • A-Frame для быстрого создания прототипов на основе HTML, особенно полезен для образовательных и журналистских целей.
  • WebXR + WebGL только в том случае, если вам нужен максимальный контроль над конвейером рендеринга или вы создаете пользовательский слой движка.

  WebXR превратился в самый доступный способ масштабного распространения иммерсивного контента — без магазина приложений, без установки, без налога на платформу. Технические характеристики продолжают быстро развиваться, начиная с середины 2025 года в линейке W3C появятся интеграция пространственного звука, привязки для совместной работы и поддержка foveated layer.