Realidad aumentada para la Web

Joe Medley
Jo Medley

En Chrome 67, anunciamos la API de WebXR Device para realidad aumentada (RA) y realidad virtual (RV), aunque solo se habilitaron las funciones de RV. La RV es una experiencia que se basa puramente en lo que hay en un dispositivo informático. Por otro lado, la RA permite renderizar objetos virtuales en el mundo real. Para permitir la posición y el seguimiento de esos objetos, acabamos de agregar la API de WebXR Hit Test a Chrome Canary, un método nuevo que ayuda a los códigos web envolventes a colocar objetos en el mundo real.

¿Dónde puedo obtenerla?

Esta API está diseñada para permanecer en Canary en el futuro inmediato. Queremos un período de prueba 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 funciones experimentales de Chrome (chrome://flags): API de WebXRDevice (#webxr) y WebXR Hit Test (#webxr-hit-test)

Con ellas, puedes sumergirte en las demostraciones o probar nuestro codelab.

Es solo la Web

Este año, en Google IO, demostramos la realidad aumentada con una compilación inicial de Chrome. Les dije algo reiteradamente a los desarrolladores y no desarrolladores durante esos tres días que desearía haber escrito en mi artículo web envolvente: "Es solo la Web".

"¿Qué extensión de Chrome debo instalar?" "No hay ninguna extensión. Es solo la Web".

"¿Necesito un navegador especial?" "Es solo la Web".

"¿Qué app debo instalar?" "No hay ninguna app especial. Es solo la Web".

Esto puede resultarte obvio, ya que estás leyendo esto en un sitio web dedicado a la Web. Si creas demostraciones con esta nueva API, prepárate para esta pregunta. Lo lograrás mucho.

Hablando de E/S, si quieres obtener más información sobre la Web envolvente en general, dónde está y a dónde se dirige, consulta 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 a compradores potenciales visualizar objetos en sus casas mientras compran.

Esto se demuestra en nuestras demostraciones. Permiten que los usuarios coloquen una representación en tamaño real de un objeto como si fuera real. Una vez colocada, la imagen permanece en la superficie seleccionada, aparece el tamaño que tendría si el elemento real estuviera en esa superficie y permite que el usuario se mueva y se acerque o se aleje de ella. Esto proporciona a los usuarios una comprensión más profunda del objeto que la que es posible con una imagen bidimensional.

Si no están seguros a qué me refiero con todo eso, quedará claro cuando usen las demostraciones. Si no tienes un dispositivo que pueda ejecutar la demostración, consulta el vínculo de video que aparece en la parte superior de este artículo.

Algo que la demostración y el video no demuestran es cómo la RA puede transmitir el tamaño de un objeto real. En este 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 para esta conversación es que cuando colocas la estatua de Chacmool en realidad aumentada, se ve su tamaño como si realmente estuviera en la habitación contigo.

El ejemplo del Chacmool es educativo, pero podría ser igual de comercial. Imagina un sitio de compra de muebles que te permite colocar un sofá en tu sala de estar. La aplicación de RA te indica si el sofá encaja en tu espacio y cómo lucirá junto a tus otros muebles.

Ray yeso, pruebas de posicionamiento y retículos

Un problema clave que debes resolver cuando se implementa la realidad aumentada es cómo colocar objetos en una vista del mundo real. El método para hacer esto se llama conversión de rayos. El trazado de rayo implica calcular la intersección entre el rayo de puntero y una superficie en el mundo real. Esa intersección se denomina hit, y determinar si se produjo una acierto es una prueba de posicionamiento.

Este es un buen momento para probar la nueva muestra de código en Chrome Canary. Antes de comenzar, vuelve a verificar que tengas habilitadas las marcas correctas. Ahora, carga la muestra y haz clic en "Start AR".

Presta atención a algunas cosas. Primero, el velocímetro que puedes reconocer de las otras muestras 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.

La RA se ejecuta a 30 fotogramas por segundo.

Demostración de la prueba de posicionamiento de RA

También debes notar la imagen del girasol. Se mueve cuando te mueves y se ajusta a superficies como pisos y mesas. Si presionas la pantalla, se colocará un girasol en la superficie y se moverá un nuevo girasol con tu dispositivo.

La imagen que se mueve con el dispositivo y que intenta bloquearse a las superficies se denomina retículo. Un retículo es una imagen temporal que ayuda a colocar un objeto en realidad aumentada. En esta demostración, el retículo es una copia de la imagen que se colocará. Pero no tiene por qué serlo. En la demostración de Chacmool, por ejemplo, es una caja rectangular que tiene aproximadamente la misma forma que la base del objeto que se está colocando.

Hasta el código

La demostración de Chacmool muestra cómo podría ser la RA en una app de producción. Afortunadamente, hay una demostración mucho más sencilla en el repositorio de muestras de WebXR. Mi código de muestra proviene de la demostración de AR Hit Test de ese repositorio. Para tu información, 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 para la RV. Puedes leer mi artículo anterior si no te resulta familiar. Para ser más específicos, ingresar y ejecutar una sesión de RA se ve casi como ingresar a una sesión de ventana mágica de RV. Al igual que con las ventanas mágicas, el tipo de sesión no debe ser envolvente y el marco del 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 una proyección de rayos. La conversión de rayo se define por dos puntos del rayo (origin y direction) y desde donde se calculan esos puntos (frameOfReference). El origen y la dirección son vectores 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 muevas el dispositivo, el retículo debe moverse con él para encontrar una ubicación donde se pueda colocar un objeto. Esto significa que el retículo debe volver a dibujarse en cada marco.

Comienza con la devolución de llamada requestAnimationFrame(). Al igual que con la RV, 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 está proyectando el rayo. El código de muestra usa la biblioteca matemática de gl-matrix. Pero la gl-matriz no es un requisito. Lo importante es saber qué se calcula con él y que estos datos se basan en la posición del dispositivo. Recupera la posición del dispositivo desde XRPose.poseModalMatrix. Con la transmisión de rayos a 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 posicionamiento, aún necesitas recorrer las vistas para dibujar la escena. El dibujo se realiza con las APIs de WebGL. Puedes hacerlo si eres realmente ambicioso. Sin embargo, recomendamos usar un framework. Las muestras web envolventes usan una creada solo para las demostraciones llamada Cottontail, y Three.js es compatible con WebXR desde mayo.

Colocar un objeto

Se coloca un objeto en 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 posicionamiento, la forma más simple de colocar un objeto es dibujarlo en la ubicación del retículo en la última prueba de posicionamiento. Si lo necesitas, supongamos que tienes un motivo legítimo para no mostrar un retículo, puedes llamar a requestHitTest() en el evento de selección como se muestra en la muestra.

Conclusión

La mejor manera de controlar esto es revisar el código de muestra o probar el codelab. Espero haberte brindado suficiente información sobre ambos temas.

No terminamos de compilar APIs web envolventes, ni por mucho tiempo. Publicaremos nuevos artículos aquí a medida que avancemos.