Chrome en Android XR admite WebXR. WebXR es un estándar abierto de W3C que proporciona APIs de XR de alto rendimiento a los navegadores compatibles. Si desarrollas para la Web, puedes mejorar los sitios existentes con modelos en 3D o crear nuevas experiencias inmersivas.
Chrome para Android XR admite las siguientes funciones de WebXR:
- Device API
- AR Module
- Módulo de controles de juegos
- Módulo de prueba de impacto
- Entrada con la mano
- Anclajes
- Detección de profundidad
- Estimación de la luz
Para ver WebXR en acción, inicia Chrome en un dispositivo Android XR o en el emulador de Android XR y explora los ejemplos oficiales de WebXR.
Requisito previo: Elige un framework de WebXR
Antes de comenzar el desarrollo, es importante elegir el framework de WebXR adecuado. Esto mejora significativamente tu productividad y la calidad de las experiencias que creas.
- Para tener un control total sobre las escenas 3D y la creación de interacciones personalizadas o complejas, te recomendamos three.js y babylon.js.
- Para el prototipado rápido o el uso de sintaxis similar a HTML para definir escenas en 3D, recomendamos A-Frame y model-viewer.
- También puedes revisar más frameworks y código de muestra.
Si prefieres usar JavaScript y WebGL nativos, consulta WebXR en GitHub para crear tu primer experimento de WebXR.
Adaptación para Android XR
Si tienes experiencias de WebXR existentes que se ejecutan en otros dispositivos, es posible que debas actualizar tu código para admitir correctamente WebXR en Android XR. Por ejemplo, las experiencias de WebXR enfocadas en dispositivos móviles deberán adaptarse de una pantalla a dos pantallas estéreo en Android XR. Es posible que las experiencias de WebXR dirigidas a dispositivos móviles o visores existentes deban adaptar el código de entrada para que se prioricen las manos.
Cuando trabajes con WebXR en Android XR, es posible que debas actualizar tu código para compensar el hecho de que hay dos pantallas, una para cada ojo.
Cómo garantizar una sensación de profundidad en WebXR
Cuando un usuario coloca un objeto virtual en su espacio físico, su escala debe ser precisa para que parezca que realmente pertenece a ese lugar. Por ejemplo, en una app de compras de muebles, los usuarios deben confiar en que un sillón virtual encajará perfectamente en su sala de estar.
Chrome para Android XR admite el módulo de detección de profundidad en WebXR, que mejora la capacidad de un dispositivo para percibir las dimensiones y los contornos de su entorno del mundo real. Esta información de profundidad te permite crear interacciones más realistas y envolventes, lo que ayuda a los usuarios a tomar decisiones fundamentadas.
A diferencia de la detección de profundidad en teléfonos celulares, la detección de profundidad en Android XR es estereoscópica y transmite dos mapas de profundidad en tiempo real para la visión binocular. Es posible que debas actualizar tu código de WebXR para admitir correctamente los fotogramas de profundidad estéreo.
En el siguiente ejemplo, se renderiza información de profundidad de forma estereoscópica:
// 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!'); }
}
Puntos clave sobre el código
- Se debe devolver una postura válida para acceder a los datos de profundidad.
pose.viewsdevuelve una vista para cada ojo, y su bucle for correspondiente se ejecuta dos veces.
Visualización de profundidad en tiempo real con la API de WebXR Depth Sensing. El rojo indica los píxeles más cercanos, mientras que el azul indica los píxeles más lejanos.
Cómo agregar interacción con las manos en WebXR
Agregar interacción con las manos a tu app de WebXR mejora la participación del usuario, ya que permite experiencias más intuitivas y envolventes.
La entrada de manos es el mecanismo de interacción principal en Android XR. Chrome para Android XR admite la API de Hand Input como entrada predeterminada. Esta API permite que los usuarios interactúen con objetos virtuales de forma natural, usando gestos y movimientos de las manos para agarrar, empujar o manipular elementos en la escena.
Es posible que los dispositivos, como los teléfonos celulares o los dispositivos de realidad extendida centrados en el controlador, aún no admitan la entrada manual. Es posible que debas actualizar tu código de WebXR para admitir correctamente la entrada de manos. La sesión de RV envolvente con manos muestra cómo integrar el seguimiento de manos en tu proyecto de WebXR.
En la siguiente animación, se muestra un ejemplo de cómo combinar el gesto de pellizcar con la API de WebXR para mostrar a un usuario "limpiando" la superficie de un espacio virtual y revelar una ventana de transferencia al mundo real.
Demostración de WebXR sobre el uso del pellizco con la mano para limpiar pantallas y ver a través de la realidad física.
Permisos en WebXR
Cuando usas las APIs de WebXR que requieren permiso, Chrome le solicita al usuario que se lo otorgue al sitio. Todas las APIs de WebXR requieren el permiso de mapeo en 3D y seguimiento de la cámara. Los permisos también protegen el acceso a los datos de seguimiento de la cara, los ojos y las manos. Si se otorgan todos los permisos necesarios, llamar a navigator.xr.requestSession('immersive-ar', options) devuelve una sesión de WebXR válida.
La preferencia de permisos que elige el usuario persiste para cada dominio. Cuando se accede a una experiencia de WebXR en un dominio diferente, Chrome vuelve a solicitar permisos. Si la experiencia de WebXR requiere varios permisos, Chrome solicitará cada permiso de a uno por vez.
Al igual que con todos los permisos en la Web, debes controlar correctamente las situaciones en las que se deniega el permiso.