Разработка для веба на Android XR

Применимые устройства XR
Это руководство поможет вам создать опыт использования этих типов XR-устройств.
Узнайте о типах устройств XR →
Гарнитуры XR
Проводные очки XR
Узнайте о типах устройств XR →

Chrome на Android XR поддерживает WebXR . WebXR — это открытый стандарт W3C , который обеспечивает высокопроизводительные API XR для поддерживаемых браузеров . Если вы разрабатываете веб-приложения, вы можете улучшить существующие сайты с помощью 3D-моделей или создать новые захватывающие интерфейсы.

Chrome для Android XR поддерживает следующие функции WebXR:

Чтобы увидеть WebXR в действии, запустите Chrome на устройстве Android XR или эмуляторе Android XR и просмотрите официальные примеры WebXR .

Предварительное условие: выберите фреймворк WebXR

Прежде чем приступить к разработке, важно выбрать правильный фреймворк WebXR. Это значительно повысит вашу производительность и качество создаваемого вами контента.

  • Для полного контроля над 3D-сценами и создания пользовательских или сложных взаимодействий мы рекомендуем three.js и babylon.js .
  • Для быстрого создания прототипов или использования HTML-подобного синтаксиса для определения 3D-сцен мы рекомендуем A-Frame и model-viewer .
  • Вы также можете просмотреть дополнительные фреймворки и примеры кода .

Если вы предпочитаете использовать нативный JavaScript и WebGL, обратитесь к WebXR на GitHub, чтобы создать свой первый эксперимент с WebXR.

Адаптировать для Android XR

Если у вас уже есть приложения WebXR, работающие на других устройствах, вам может потребоваться обновить код для корректной поддержки WebXR на Android XR. Например, приложения WebXR, ориентированные на мобильные устройства, должны будут адаптироваться с одного экрана на два стереоэкрана в Android XR. Для приложений WebXR, ориентированных на мобильные устройства или существующие гарнитуры, может потребоваться адаптация кода ввода для поддержки ручного ввода.

При работе с WebXR на Android XR вам может потребоваться обновить код, чтобы учесть тот факт, что есть два экрана — по одному для каждого глаза.

Об обеспечении ощущения глубины в WebXR

Когда пользователь размещает виртуальный объект в своём физическом пространстве, его масштаб должен быть точным, чтобы он выглядел как действительно находящийся там. Например, в приложении для покупки мебели пользователи должны быть уверены, что виртуальное кресло идеально впишется в их гостиную.

Chrome для Android XR поддерживает модуль Depth Sensing в WebXR , который расширяет возможности устройства по восприятию размеров и контуров реального мира. Эта информация о глубине позволяет создавать более захватывающие и реалистичные взаимодействия, помогая пользователям принимать обоснованные решения.

В отличие от датчиков глубины на мобильных телефонах, датчики глубины в Android XR являются стереоскопическими, передавая две карты глубины в режиме реального времени для бинокулярного зрения. Для корректной поддержки стереокадров глубины может потребоваться обновление кода WebXR.

Следующий пример отображает информацию о глубине стереоскопически:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

Ключевые моменты кода

  • Для доступа к данным о глубине необходимо вернуть действительную позу.
  • pose.views возвращает представление для каждого глаза, а соответствующий ему цикл for выполняется дважды.

Визуализация глубины в реальном времени с помощью API определения глубины WebXR. Красный цвет обозначает более близкие пиксели, синий — более дальние.

Добавить взаимодействие рук в WebXR

Добавление ручного взаимодействия в приложение WebXR повышает вовлеченность пользователей, делая опыт более интуитивным и захватывающим.

Ввод вручную — основной механизм взаимодействия в Android XR. Chrome для Android XR поддерживает API Hand Input в качестве средства ввода по умолчанию. Этот API позволяет пользователям естественным образом взаимодействовать с виртуальными объектами, используя жесты и движения рук для захвата, толкания и управления элементами сцены.

Такие устройства, как мобильные телефоны или устройства XR с контроллерами, могут пока не поддерживать отслеживание рук. Для корректной поддержки управления руками может потребоваться обновить код WebXR. В разделе «Сеанс погружения в виртуальную реальность с руками» показано, как интегрировать отслеживание рук в проект WebXR.

Следующая анимация демонстрирует пример объединения сжатия с API WebXR, показывающий, как пользователь «стирает» поверхность виртуального пространства, чтобы открыть сквозное окно в реальный мир.

Демонстрация WebXR, показывающая, как с помощью сведения рук можно стереть экраны и увидеть физическую реальность.

Разрешения в WebXR

При использовании API WebXR, требующих разрешения, Chrome запрашивает у пользователя разрешение на доступ к сайту. Все API WebXR требуют разрешения на 3D-картографирование и отслеживание камеры. Доступ к отслеживаемым данным лица, глаз и рук также защищен разрешениями. Если все необходимые разрешения предоставлены, вызов navigator.xr.requestSession('immersive-ar', options) возвращает допустимый сеанс WebXR.

Выбранные пользователем настройки разрешений сохраняются для каждого домена. При доступе к WebXR в другом домене Chrome снова запрашивает разрешения. Если для WebXR требуется несколько разрешений, Chrome запрашивает каждое из них по одному.

Как и в случае со всеми разрешениями в Интернете, вам следует правильно обрабатывать ситуации, когда в разрешении отказано.