Разработка с помощью WebXR

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

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

Чтобы увидеть 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, чтобы обеспечить правильную поддержку ручного ввода. Сеанс иммерсивной виртуальной реальности с руками демонстрирует, как интегрировать отслеживание рук в ваш проект WebXR.

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

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

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

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

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

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