En Chrome 67, anunciamos la API de WebXR Device para realidad aumentada (RA) y realidad virtual (RV), aunque solo estaban habilitadas las funciones de RV. La RV es una experiencia basada únicamente en lo que se encuentra en un dispositivo informático. Por otro lado, la RA te permite renderizar objetos virtuales en el mundo real. Para permitir la colocación y el seguimiento de esos objetos, solo agregamos la API de WebXR Hit Test a Chrome Canary, un nuevo método que ayuda al código web envolvente a colocar objetos en el mundo real.
¿Dónde puedo obtenerlo?
Se espera que esta API permanezca en Canary en el futuro inmediato. Queremos un período de pruebas prolongado porque esta es una propuesta de API muy nueva y queremos asegurarnos de que sea sólida y adecuada para los desarrolladores.
Además de Chrome Canary, también necesitarás lo siguiente:
- Un smartphone compatible que ejecute Android O o una versión posterior.
- Instalar ARCore
- Dos marcas de Chrome (chrome://flags): API de WebXRDevice (#webxr) y prueba de impacto de WebXR (#webxr-hit-test)
Con ellas, puedes sumergirte en las demostraciones o probar nuestro codelab.
- Chacmool
- Ejemplo de Web envolvente
- Codelab
Es solo la Web
En Google I/O de este año, demostramos la realidad aumentada con una compilación preliminar de Chrome. Durante esos tres días, les dije a los desarrolladores y a quienes no lo son algo que me hubiera gustado incluir en mi artículo web inmersivo: “Es solo la Web”.
"¿Qué extensión de Chrome debo instalar?" “No hay extensión. Es solo la Web".
"¿Necesito un navegador especial?" "Es solo la Web".
"¿Qué app necesito instalar?" "No hay una app especial. Es solo la Web".
Esto puede ser obvio para ti, ya que estás leyendo esto en un sitio web dedicado a la Web. Si compilas demostraciones con esta nueva API, prepárate para esta pregunta. Lo verás mucho.
A propósito de la IO, si quieres obtener más información sobre la Web inmersiva en general, dónde está y hacia dónde se dirige, mira este video.
¿Para qué sirve?
La realidad aumentada será una adición valiosa a muchas páginas web existentes. Por ejemplo, puede ayudar a las personas a aprender en sitios educativos y permitir que los compradores potenciales visualicen objetos en su casa mientras compran.
Nuestras demostraciones lo ilustran. Permiten que los usuarios coloquen una representación de tamaño real de un objeto como si estuviera en la realidad. Una vez que se coloca, la imagen permanece en la superficie seleccionada, se muestra del tamaño que tendría si el elemento real estuviera en esa superficie y permite al usuario moverse por ella tanto más cerca de ella como más lejos de ella. Esto brinda a los usuarios una comprensión más profunda del objeto de lo que es posible con una imagen bidimensional.
Si no estás seguro de a qué me refiero con todo eso, te quedará claro cuando uses las demostraciones. Si no tienes un dispositivo que pueda ejecutar la demostración, consulta el vínculo del video que se encuentra en la parte superior de este artículo.
Una cosa que no muestran la demostración ni el video es cómo la RA puede transmitir el tamaño de un objeto real. En el video, se muestra una demostración educativa que creamos llamada Chacmool. En un artículo complementario, se describe esta demostración en detalle. Lo importante de esta discusión es que, cuando colocas la estatua de Chacmool en la realidad aumentada, ves su tamaño como si estuviera en la habitación contigo.
El ejemplo de Chacmool es educativo, pero podría ser comercial con la misma facilidad. Imagina un sitio de compras de muebles que te permita colocar un sofá en tu sala de estar. La aplicación de RA te indica si el sofá se ajusta a tu espacio y cómo se verá junto a tus otros muebles.
Proyecciones de rayos, pruebas de impacto y retículas
Un problema clave que se debe resolver cuando se implementa la realidad aumentada es cómo colocar objetos en una vista del mundo real. El método para hacerlo se llama conversión de rayos. El lanzamiento de rayos consiste en calcular la intersección entre el rayo del puntero y una superficie en el mundo real. Esa intersección se denomina hit y determinar si se produjo un hit es una prueba de resultado.
Este es un buen momento para probar la nueva muestra de código en Chrome Canary. Antes de hacer nada, verifica que tengas habilitadas las marcas correctas. Ahora carga la muestra y haz clic en "Iniciar RA".
Ten en cuenta lo siguiente. En primer lugar, el medidor de velocidad que puedes reconocer de los otros samples envolventes muestra 30 fotogramas por segundo en lugar de 60. Esta es la velocidad a la que la página web recibe imágenes de la cámara.
Demostración de la prueba de posicionamiento de RA
Lo otro que debes tener en cuenta es la imagen del girasol. Se mueve a medida que te mueves y se ajusta a superficies como pisos y mesas. Si presionas la pantalla, se colocará un girasol en una superficie y se moverá uno nuevo con tu dispositivo.
La imagen que se mueve con tu dispositivo y que intenta fijarse a las superficies se denomina retículo. Un retículo es una imagen temporal que ayuda a colocar un objeto en la realidad aumentada. En esta demostración, el retículo es una copia de la imagen que se colocará. Pero no es necesario que lo sea. En la demostración de Chacmool, por ejemplo, es un cuadro rectangular con aproximadamente la misma forma que la base del objeto que se coloca.
Hasta el código
La demostración de Chacmool muestra cómo se vería la RA en una app de producción. Afortunadamente, hay una demostración mucho más simple en el repositorio de muestras de WebXR. Mi código de muestra proviene de la demo de prueba de impacto de RA en ese repositorio. Ten en cuenta que me gusta simplificar los ejemplos de código para ayudarte a comprender lo que sucede.
Los conceptos básicos para ingresar a una sesión de RA y ejecutar un bucle de renderización son los mismos para la RA y la RV. Puedes leer
mi artículo anterior
si no lo conoces. Para ser más específicos, ingresar y ejecutar una sesión de RA es casi lo mismo que ingresar a una sesión de ventana mágica de RV.
Al igual que con una ventana mágica, el tipo de sesión no debe ser envolvente y el marco de tipo de referencia debe ser 'eye-level'.
La nueva API
Ahora te mostraré cómo usar la nueva API. Recuerda que, en RA, el retículo intenta encontrar una superficie antes de colocar un elemento. Esto se hace con una prueba de posicionamiento. Para realizar una prueba de posicionamiento, llama a XRSession.requestHitTest(). El aspecto resultante será el siguiente:
xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
//
});
Los tres argumentos de este método representan un lanzamiento de rayos. El lanzamiento de rayos se define con dos puntos en el rayo (origin y direction) y desde dónde se calculan esos puntos (frameOfReference). El origen y la dirección son vectores en 3D. Independientemente del valor que envíes, se normalizarán (convertirán) a una longitud de 1.
Cómo mover el retículo
A medida que mueves el dispositivo, el retículo debe moverse con él mientras intenta encontrar una ubicación en la que se pueda colocar un objeto. Esto significa que el retículo debe volver a dibujarse en cada fotograma.
Comienza con la devolución de llamada requestAnimationFrame(). Al igual que con la realidad virtual, necesitas una sesión y una pose.
function onXRFrame(t, frame) {
let xrSession = frame.session;
// The frame of reference, which was set elsewhere, is 'eye-level'.
// See onSessionStarted() ins the sample code for details.
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
// Do the hit test and draw the reticle.
}
}
Una vez que tengas la sesión y la pose, determina dónde se proyecta el rayo. En el código de muestra, se usa la biblioteca matemática gl-matrix.
Sin embargo, gl-matrix no es un requisito. Lo importante es saber qué estás calculando con él y que se basa en la posición del dispositivo. Recupera la posición del dispositivo desde XRPose.poseModalMatrix. Con tu yeso de rayos en la mano, llama a requestHitTest().
function onXRFrame(t, frame) {
let xrSession = frame.session;
// The frame of reference, which was set elsewhere, is 'eye-level'.
// See onSessionStarted() ins the sample code for details.
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
// Calculate the origin and direction for the raycast.
xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
.then((results) => {
if (results.length) {
// Draw for each view.
}
});
}
session.requestAnimationFrame(onXRFrame);
}
Aunque no es tan obvio en la muestra de prueba de impacto, aún debes realizar un bucle por las vistas para dibujar la escena. El dibujo se realiza con las APIs de WebGL. Puedes hacerlo si tienes ambición. Sin embargo, recomendamos usar un framework. Los ejemplos de la Web envolvente usan uno creado solo para las demostraciones llamado Cottontail, y Three.js es compatible con WebXR desde mayo.
Coloca un objeto
Se coloca un objeto en la RA cuando el usuario presiona la pantalla. Para ello, usa el evento select. Lo importante en este paso es saber dónde colocarlo.
Dado que el retículo en movimiento te brinda una fuente constante de pruebas de impacto, la forma más simple de colocar un objeto es dibujarlo en la ubicación del retículo en la última prueba de impacto. Si es necesario, por ejemplo, si tienes un motivo legítimo para no mostrar una retícula, puedes llamar a requestHitTest() en el evento de selección como se muestra en el ejemplo.
Conclusión
La mejor manera de controlar esto es revisar el código de muestra o probar el codelab. Espero haberte proporcionado suficientes antecedentes para que entiendas ambos.
No hemos terminado de crear APIs web envolventes, ni mucho menos. Publicaremos artículos nuevos aquí a medida que avancemos.