Chrome en Android XR admite WebXR. WebXR es un estándar abierto de W3C que incorpora APIs de realidad extendida de alto rendimiento a los navegadores compatibles. Si compilas para la Web, puedes mejorar los sitios existentes con modelos 3D o crear nuevas experiencias inmersivas.
Chrome para Android XR admite las siguientes funciones de WebXR:
- API de Device
- Módulo de RA
- Módulo de Gamepads
- Módulo de Hit Test
- Entrada manual
- Anclajes
- Detección de profundidad
- Estimación de 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 a desarrollar, 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 3D, te recomendamos A-Frame y model-viewer.
- También puedes consultar más frameworks y código de muestra.
Si prefieres usar JavaScript nativo y WebGL, 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 orientadas a dispositivos móviles o visores existentes deban adaptar el código de entrada para que se priorice la mano.
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 allí. Por ejemplo, en una app de compra 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, lo 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 inmersivas y realistas, 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 mostrar una postura válida para acceder a los datos de profundidad.
pose.viewsmuestra 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 píxeles más cercanos, mientras que el azul indica píxeles más lejanos.
Cómo agregar interacción manual en WebXR
Agregar interacción manual a tu app de WebXR mejora la participación del usuario, ya que permite experiencias más intuitivas e inmersivas.
La entrada manual 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 la mano para tomar, 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 manual. En la sesión de VR inmersiva con manos, se muestra cómo integrar el seguimiento de manos en tu proyecto de WebXR.
En la siguiente animación, se muestra un ejemplo de combinación de pellizcos con la API de WebXR para mostrar a un usuario que "limpia" la superficie de un espacio virtual para revelar una ventana transparente al mundo real.
Demostración de WebXR sobre el uso de pellizcos manuales para limpiar pantallas y ver la realidad física.
Permisos en WebXR
Cuando usas APIs de WebXR que requieren permiso, Chrome le solicita al usuario que otorgue el permiso al sitio. Todas las APIs de WebXR requieren el permiso de seguimiento de la cámara y el mapeo 3D. El acceso a los datos de la cara, los ojos y las manos rastreados también está protegido por permisos. Si se otorgan todos los permisos necesarios, llamar a navigator.xr.requestSession('immersive-ar', options) muestra
una sesión de WebXR válida.
La preferencia de permisos elegida por el usuario persiste para cada dominio. Si 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 solicita 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.