La realidad virtual llega a la web

Algunos conceptos básicos para prepararte para un espectro de experiencias inmersivas: realidad virtual, realidad aumentada y todo lo demás.

31 de oct de 2019
Actualizado 2 de marzo de 2020

Las experiencias inmersivas llegaron a la web en Chrome 79. La API del dispositivo WebXR trae la realidad virtual traída la realidad virtual, mientras que el soporte para la realidad aumentada llega a Chrome 81. Mientras que una actualización de la API GamePad extiende el uso avanzado de controles a la realidad virtual. Otros navegadores admitirán estas especificaciones pronto, incluidos Firefox Reality, Oculus Browser, Edge y el navegador Helio de Magic Leap, entre otros.

Este artículo comienza una serie en la web inmersiva. Esta entrega cubre la configuración de una aplicación WebXR básica, así como la entrada y salida de una sesión XR. Los artículos posteriores cubrirán el ciclo de fotogramas (el curso de trabajo de la experiencia WebXR), los detalles de la realidad aumentada y la API de prueba de éxito de WebXR, un medio para detectar superficies en una sesión de RA. A menos que se indique lo contrario, todo lo que cubro en este artículo y los artículos siguientes se aplica por igual a AR y VR.

¿Qué es la web inmersiva?

Aunque usamos dos términos para describir experiencias inmersivas (realidad aumentada y realidad virtual), muchos piensan en ellas en un espectro que va desde la realidad completa hasta la completamente virtual, con grados de inmersión intermedios. La ‘X’ en XR está destinada a reflejar ese pensamiento al ser una especie de variable algebraica que representa cualquier cosa en el espectro de experiencias inmersivas.

Ejemplos de experiencias inmersivas incluyen:

• Juegos
• Videos de 360 ​​°
• Vídeos tradicionales en 2D (o 3D) presentados en entornos envolventes
• Compra de vivienda
• Ver productos en su hogar antes de comprarlos
• Arte inmersivo
• Algo genial en lo que nadie ha pensado todavía

Conceptos y uso

Explicaré algunos conceptos básicos del uso de la API de dispositivo WebXR. Si necesita más profundidad de la que le he proporcionado, consulte el grupo de trabajo de Immersive Web Muestras de WebXR o Materiales de referencia en crecimiento de MDN. Si está familiarizado con las primeras versiones de la API de dispositivos WebXR, debería revisar todo este material. Ha habido cambios.

El código de este artículo se basa en el ejemplo básico del Immersive Web Working Group (manifestación,
fuente), pero se edita para mayor claridad y simplicidad.

Parte de la creación de la especificación WebXR ha consistido en desarrollar medidas de seguridad y privacidad para proteger a los usuarios. En consecuencia, las implementaciones deben cumplir con ciertos requisitos. Una página web o aplicación debe estar activa y enfocada antes de que pueda solicitar algo sensible al espectador. Las páginas web o aplicaciones deben servirse a través de HTTPS. La API en sí está diseñada para proteger la información obtenida de sensores y cámaras, que necesita para funcionar.

Solicita una sesión

Entrar en una sesión XR requiere un gesto de usuario. Para conseguirlo, utilice la detección de funciones para probar XRSystem (vía navigator.xr) y hacer una llamada a
XRSystem.isSessionSupported(). Tenga en cuenta que en las versiones 79 y 80 de Chrome,
XRSystem el objeto fue llamado XR.

En el siguiente ejemplo, indiqué que quiero una sesión de realidad virtual con el 'immersive-vr' tipo de sesión. los
otros tipos de sesiones
son 'immersive-ar' y 'inline'. Una sesión en línea es para presentar contenido dentro de HTML y se usa principalmente para contenido teaser. los Sesión de realidad aumentada inmersiva
muestra demuestra esto. Lo explicaré en un artículo posterior.

Una vez que sé que las sesiones de realidad virtual son compatibles, habilito un botón que me permite adquirir un gesto de usuario.

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

Después de habilitar el botón, espero un evento de clic y luego solicito una sesión.

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

Observe la jerarquía de objetos en este código. Se mueve de navigator a xr a una XRSession ejemplo. En las primeras versiones de la API, un script tenía que solicitar un dispositivo antes de solicitar una sesión. Ahora, el dispositivo se adquiere implícitamente.

Entrar en una sesión

Después de obtener una sesión, necesito iniciarla e ingresarla. Pero primero, necesito configurar algunas cosas. Una sesión necesita un onend controlador de eventos para que la aplicación o la página web se pueda restablecer cuando el usuario salga.

También necesitaré un <canvas> elemento sobre el que dibujar mi escena. Debe ser compatible con XR
WebGLRenderingContext
o
WebGL2RenderingContext. Todo el dibujo se realiza con ellos o con un marco basado en WebGL como
Three.js.

Ahora que tengo un lugar para dibujar, necesito una fuente de contenido para dibujar. Para eso, creo una instancia de XRWebGLLayer. Lo asocio con el lienzo llamando XRSession.updateRenderState().

Una vez que estoy en una sesión, necesito una forma de determinar dónde están las cosas en la realidad virtual. Necesitaré un espacio de referencia. UNA 'local-floor' El espacio de referencia es aquel en el que el origen se encuentra cerca del espectador y el eje y es 0 a nivel del suelo y no se espera que se mueva. Existen otros tipos de espacios de referencia, pero ese es un tema más complicado del que puedo abordar aquí. Guardo el espacio de referencia en una variable porque lo necesitaré cuando dibuje en la pantalla.

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

Después de conseguir un espacio de referencia, llamo XRSession.requestAnimationFrame(). Este es el comienzo de la presentación de contenido virtual, que se realiza en el bucle de cuadro.

Ejecutar un bucle de cuadro

El bucle de trama es un bucle infinito controlado por el usuario-agente en el que el contenido se dibuja repetidamente en la pantalla. El contenido se dibuja en bloques discretos llamados marcos. La sucesión de fotogramas crea la ilusión de movimiento. Para las aplicaciones de realidad virtual, los fotogramas por segundo pueden oscilar entre 60 y 144. AR para Android se ejecuta a 30 fotogramas por segundo. Su código no debe asumir ninguna velocidad de fotogramas en particular.

El proceso básico para el frame loop es:

1. Llamada XRSession.requestAnimationFrame(). En respuesta, el agente de usuario invoca el XRFrameRequestCallback, que usted define.
2. Dentro de su función de devolución de llamada:
   1. Llamada XRSession.requestAnimationFrame() de nuevo.
   2. Obtén la pose del espectador.
   3. Pase (‘vincular’) el WebGLFramebuffer desde el XRWebGLLayer al WebGLRenderingContext.
   4. Itera sobre cada XRView objeto, recuperando su XRViewport desde el XRWebGLLayer y pasárselo al WebGLRenderingContext.
   5. Dibuja algo en el framebuffer.

El resto de este artículo describe el paso 1 y parte del paso 2, configurar y llamar al XRFrameRequestCallback. Los elementos restantes del paso 2 se tratan en la parte II.

El XRFrameRequestCallback

los XRFrameRequestCallback es definido por usted. Toma dos parámetros: a
DOMHighResTimeStamp y un XRFrame ejemplo. los XRFrame El objeto proporciona la información necesaria para representar un solo fotograma en la pantalla. los
DOMHighResTimeStamp El argumento es para uso futuro.

Antes de hacer cualquier otra cosa, voy a solicitar el siguiente cuadro de animación. Como se indicó anteriormente, el agente de usuario determina la sincronización de las tramas en función del hardware subyacente. Solicitar el siguiente marco primero asegura que el bucle del marco continúa si algo durante la devolución de llamada arroja un error.

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

En este punto, es hora de dibujar algo para el espectador. Esa es una discusión para la parte II. Antes de ir allí, déjame mostrarte cómo finalizar una sesión.

Finalizar la sesión

Una sesión inmersiva puede finalizar por varias razones, incluida la finalización con su propio código mediante una llamada a XRSession.end(). Otras causas incluyen que el auricular se desconecte o que otra aplicación tome el control de él. Esta es la razón por la que una aplicación con buen comportamiento debe monitorear end evento. Cuando ocurra, descarte la sesión y sus objetos de render relacionados. No se puede reanudar una sesión inmersiva finalizada. Para volver a entrar en la experiencia inmersiva, mi aplicación debe iniciar una nueva sesión.

Recuerde haber ingresado a una sesión que durante la configuración, agregué un onend controlador de eventos.

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

Dentro del controlador de eventos, restaure el estado de la aplicación antes de que el usuario ingresara a una sesión.

function onSessionEnded(event) {
xrSession = null;
xrButton.textContent = 'Enter VR';
}

Conclusión

No he explicado todo lo que necesita para escribir una aplicación Web XR o AR. Con suerte, te he dado lo suficiente para que comiences a entender el código por ti mismo y lo suficiente para comenzar a experimentar. En el próximo artículo, explicaré el ciclo de fotogramas, que es donde se dibuja el contenido en la pantalla.

Foto por JESHOOTS.COM en Unsplash