Разработка для веба на 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 поддерживает модуль определения глубины в 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 ввода с помощью рук в качестве стандартного способа ввода. Этот API позволяет пользователям взаимодействовать с виртуальными объектами естественным образом, используя жесты и движения рук для захвата, нажатия или манипулирования элементами на сцене.

Устройства, такие как мобильные телефоны или XR-устройства с контроллерами, могут пока не поддерживать ввод с рук. Возможно, вам потребуется обновить код WebXR для корректной поддержки ввода с рук. В видеоролике «Иммерсивная VR-сессия с использованием рук» показано, как интегрировать отслеживание движений рук в ваш проект WebXR.

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

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

Права доступа в WebXR

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

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

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