Puede que ya lo sepas

Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino.

13 de febrero de 2020

La API del dispositivo WebXR se envió el otoño pasado en Chrome 79. Como se dijo entonces, la implementación de la API en Chrome es un trabajo en progreso. Chrome se complace en anunciar que parte del trabajo está terminado. En Chrome 81, han llegado dos nuevas funciones:

Este artículo cubre la realidad aumentada. Si ya ha utilizado WebXR Device API, le alegrará saber que hay muy pocas novedades que aprender. Entrar en una sesión de WebXR es básicamente lo mismo. Ejecutar un bucle de cuadro es básicamente lo mismo. Las diferencias radican en configuraciones que permiten mostrar el contenido de forma adecuada para la realidad aumentada. Si no está familiarizado con los conceptos básicos de WebXR, debería leer mis publicaciones anteriores sobre la API del dispositivo WebXR, o al menos estar familiarizado con los temas que se tratan allí. Debe saber cómo solicitar e ingresar a una sesión y debe saber cómo ejecutar un bucle de tramas.

Para obtener información sobre las pruebas de posicionamiento, consulte el artículo complementario Posicionamiento de objetos virtuales en vistas del mundo real. El código de este artículo se basa en el ejemplo de sesión de AR inmersivo (manifestación
fuente) de Immersive Web Working Group’s Muestras de API de dispositivo WebXR.

Antes de sumergirse en el código, debe utilizar el Muestra de sesión de realidad aumentada inmersiva
al menos una vez. Necesitará un teléfono Android moderno con Chrome 81 o posterior.

¿Para qué sirve?

La realidad aumentada será una valiosa adición a muchas páginas web nuevas o existentes al permitirles implementar casos de uso de RA sin salir del navegador. Por ejemplo, puede ayudar a las personas a aprender en sitios educativos y permitir que los compradores potenciales visualicen objetos en su hogar mientras compran.

Considere el segundo caso de uso. Imagina la simulación de colocar una representación a tamaño real de un objeto virtual en una escena real. Una vez colocada, la imagen permanece en la superficie seleccionada, aparece del tamaño que tendría si el elemento real estuviera en esa superficie y permite al usuario moverse alrededor de ella, así como más cerca o más lejos de ella. Esto brinda a los espectadores una comprensión más profunda del objeto de lo que es posible con una imagen bidimensional.

Me estoy adelantando un poco. Para hacer realmente lo que he descrito, necesita la funcionalidad AR y algunos medios para detectar superficies. Este artículo cubre el primero. El artículo adjunto sobre la API de prueba de éxito de WebXR (vinculado a arriba) cubre este último.

Solicitando una sesión

Solicitar una sesión es muy parecido a lo que ha visto antes. Primero averigüe si el tipo de sesión que desea está disponible en el dispositivo actual llamando
xr.isSessionSupported(). En lugar de pedir 'immersive-vr' como antes, solicitud 'immersive-ar'.

if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-ar');
  if (supported) {
    xrButton.addEventListener('click', onButtonClicked);
    xrButton.textContent = 'Enter AR';
    xrButton.enabled = supported; 
  }
}

Como antes, esto habilita un botón ‘Ingresar AR’. Cuando el usuario haga clic en él, llame
xr.requestSession(), también pasando 'immersive-ar'.

let xrSession = null;
function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession('immersive-ar')
    .then((session) => {
      xrSession = session;
      xrSession.isImmersive = true;
      xrButton.textContent = 'Exit AR';
      onSessionStarted(xrSession);
    });
  } else {
    xrSession.end();
  }
}

Una propiedad de conveniencia

Probablemente haya notado que resalté dos líneas en la última muestra de código. los XRSession el objeto parece tener una propiedad llamada isImmersive. Esta es una propiedad de conveniencia que he creado yo mismo y no forma parte de la especificación. Lo usaré más tarde para tomar decisiones sobre qué mostrarle al espectador. ¿Por qué esta propiedad no forma parte de la API? Debido a que su aplicación puede necesitar rastrear esta propiedad de manera diferente, los autores de especificaciones decidieron mantener limpia la API.

Entrar en una sesión

Recordar que onSessionStarted() parecía en mi artículo anterior:

function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}

Necesito agregar algunas cosas para tener en cuenta la representación de la realidad aumentada. Apague el fondo Primero, voy a determinar si necesito el fondo. Este es el primer lugar donde usaré mi propiedad de conveniencia.

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });

}

Espacios de referencia

Mis artículos anteriores repasaron los espacios de referencia. La muestra que estoy describiendo usa dos de ellos, así que es hora de corregir esa omisión.

Un espacio de referencia describe la relación entre el mundo virtual y el entorno físico del usuario. Hace esto por:

• Especificar el origen del sistema de coordenadas utilizado para expresar posiciones en el mundo virtual.
• Especificar si se espera que el usuario se mueva dentro de ese sistema de coordenadas.
• Si ese sistema de coordenadas tiene límites preestablecidos. (Los ejemplos que se muestran aquí no utilizan sistemas de coordenadas con límites preestablecidos).

Para todos los espacios de referencia, la coordenada X expresa izquierda y derecha, Y expresa arriba y abajo, y Z expresa adelante y atrás. Los valores positivos son correctos, hacia arriba y hacia atrás, respectivamente.

Las coordenadas devueltas por XRFrame.getViewerPose() dependen de lo solicitado
tipo de espacio de referencia. Más sobre eso cuando lleguemos al bucle de cuadro. En este momento, debemos seleccionar un tipo de referencia que sea apropiado para la realidad aumentada. Nuevamente, esto usa mi propiedad de conveniencia.

let refSpaceType
function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

Si ha visitado el Muestra de sesión de realidad aumentada inmersiva
Notarás que inicialmente la escena es estática y nada de realidad aumentada. Puede arrastrar y deslizar el dedo para moverse por la escena. Si hace clic en «INICIAR AR», el fondo desaparece y puede moverse por la escena moviendo el dispositivo. Los modos utilizan diferentes tipos de espacios de referencia. El texto resaltado arriba muestra cómo se selecciona. Utiliza los siguientes tipos de referencia:

local – El origen nativo está en la posición del espectador en el momento de la creación de la sesión. Esto significa que la experiencia no necesariamente tiene un piso bien definido y la posición exacta del origen puede variar según la plataforma. Aunque no hay límites preestablecidos para el espacio, se espera que el contenido se pueda ver sin otro movimiento que la rotación. Como puede ver en nuestro propio ejemplo de RA, es posible que se produzca algún movimiento dentro del espacio.

viewer – Utilizado con mayor frecuencia para el contenido presentado en línea en la página, este espacio sigue al dispositivo de visualización. Cuando se pasa a getViewerPose, no proporciona seguimiento y, por lo tanto, siempre informa una pose en el origen a menos que la aplicación la modifique con XRReferenceSpace.getOffsetReferenceSpace(). La muestra utiliza esto para habilitar la panorámica táctil de la cámara.

Ejecutando un bucle de cuadro

Conceptualmente, nada cambia con respecto a lo que hice en la sesión de realidad virtual descrita en mis artículos anteriores. Pase el tipo de espacio de referencia a XRFrame.getViewerPose(). El retorno XRViewerPose será para el tipo de espacio de referencia actual. Utilizando
viewer ya que el valor predeterminado permite que una página muestre vistas previas del contenido antes de que se solicite el consentimiento del usuario para AR o VR. Esto ilustra un punto importante: el contenido en línea utiliza el mismo bucle de cuadro que el contenido inmersivo, lo que reduce la cantidad de código que debe mantenerse.

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
  if (xrViewerPose) {
    
  }
}

Conclusión

Esta serie de artículos solo cubre los conceptos básicos de la implementación de contenido inmersivo en la web. El grupo de trabajo Immersive Web Working Group presenta muchas más capacidades y casos de uso. Muestras de API de dispositivo WebXR. También acabamos de publicar un artículo de prueba de éxito que explica una API para detectar superficies y colocar elementos virtuales en una vista de cámara del mundo real. Échales un vistazo y mira el blog de web.dev para ver más artículos durante el próximo año.

Foto por David Grandmougin en Unsplash