Cómo desarrollar con WebXR

Chrome en Android XR admite WebXR. WebXR es un estándar abierto del W3C que ofrece APIs de XR de alto rendimiento a los navegadores compatibles. Si creas contenido 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:

Para ver WebXR en acción, inicia Chrome en un dispositivo Android XR o 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 correcto. Esto mejora significativamente tu productividad y la calidad de las experiencias que creas.

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 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.

Información para 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 compras de muebles, los usuarios deben confiar en que un sillón virtual se ajustará perfectamente a 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 real. Esta información detallada te permite crear interacciones más envolventes y realistas, lo que ayuda a los usuarios a tomar decisiones fundamentadas.

A diferencia del sensor de profundidad en teléfonos celulares, el sensor de profundidad en Android XR es estereoscópico 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 la 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 pose válida para acceder a los datos de profundidad.
  • pose.views muestra una vista para cada ojo y su correspondiente bucle for 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 más alejados.

Cómo agregar interacción con las manos en WebXR

Agregar interacción con la mano 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 entrada manual 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 agarrar, empujar o manipular elementos en la escena.

Es posible que dispositivos como teléfonos celulares o dispositivos XR 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 RV 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 cómo combinar el pellizco con la API de WebXR para mostrar a un usuario que "limpia" la superficie de un espacio virtual para revelar una ventana de paso al mundo real.

Demostración de WebXR del uso de pellizco de la mano para borrar pantallas y ver a través de la realidad física.

Permisos en WebXR

Cuando usas APIs de WebXR que requieren permiso, Chrome le solicita al usuario que le otorgue el permiso al sitio. Todas las APIs de WebXR requieren el permiso de mapeo 3D y seguimiento de la cámara. Los datos de seguimiento de rostros, ojos y manos también están protegidos 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 que elige el usuario persiste para cada dominio. Si accedes a una experiencia de WebXR en un dominio diferente, Chrome volverá a solicitar permisos. Si la experiencia de WebXR requiere varios permisos, Chrome solicitará cada uno de ellos de a uno.

Al igual que con todos los permisos en la Web, debes controlar correctamente las situaciones en las que se deniega el permiso.