Chrome на Android XR поддерживает WebXR . WebXR — это открытый стандарт W3C , который предоставляет высокопроизводительные API для XR в поддерживаемых браузерах . Если вы разрабатываете веб-сайты, вы можете улучшать существующие сайты с помощью 3D-моделей или создавать новые захватывающие интерактивные возможности.
В Chrome для Android XR поддерживаются следующие функции WebXR:
- API устройства
- Модуль дополненной реальности
- Модуль геймпада
- Модуль проверки попаданий
- Ввод с руки
- Якоря
- Датчик глубины
- Оценка освещенности
Чтобы увидеть 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
When you use WebXR APIs that require permission, Chrome prompts the user to grant the permission to the site. All WebXR APIs require the 3d mapping and camera tracking permission. Access tracked face, eye, and hand data are also protected by permissions. If all needed permissions are granted, calling navigator.xr.requestSession('immersive-ar', options) returns a valid WebXR session.
Выбранные пользователем настройки разрешений сохраняются для каждого домена. При доступе к WebXR-приложению в другом домене Chrome снова запросит разрешения. Если WebXR-приложению требуется несколько разрешений, Chrome запросит каждое разрешение по отдельности.
Как и в случае со всеми разрешениями в интернете, следует надлежащим образом обрабатывать ситуации, когда разрешение отклонено.