ARKit: Cómo detectar, rastrear y mostrar un video con Alpha en la parte superior de un plano de imagen

Imagen reconocida y video visualizado en Realidad Aumentada.

Detectar y mostrar un video encima de una imagen usando ARKit puede ser complicado cuando se comienza a desarrollar. El objetivo de esta guía es ayudar rápidamente a los desarrolladores a lograrlo mediante el uso de ARKit y la combinación del proyecto de ejemplo de reconocimiento de imágenes de Apple junto con un par de líneas de código personalizadas.

En primer lugar, para implementar ARKit debemos agregar un guión gráfico con un ARSCNView. Esta escena se encargará de usar la cámara para rastrear el mundo real que rodea al usuario. También se debe agregar una carpeta de recursos AR Resources para almacenar todas las imágenes que se van a detectar y rastrear.

Seguimiento de imagen

Es importante agregar las imágenes que desea detectar dentro de la carpeta AR Resources de nuestro proyecto:

Nota: las imágenes a reconocer también se pueden obtener de una API y crear mediante programación.
Imágenes de la carpeta AR Resources

En nuestro ViewController debemos agregar una referencia a ARSCNView y aplicar los delegados en viewDidLoad y también debemos agregar un descriptor de acceso para la sesión de SceneView.

En nuestra viewDidAppear debemos agregar un método resetTracking:

El método resetTracking está a cargo de:

  • Comenzando una sesión ARSession
  • Establecer la configuración de ARSession
  • Decirle a ARSession qué imágenes conocidas se rastrearán

Cuando se detecta alguna de las imágenes agregadas a la carpeta de Recursos AR mientras se usa la cámara del dispositivo, ARSCNView llama al siguiente delegado:

El delegado contiene información sobre la imagen detectada dentro del ancla y una vez que se detecta, muestra el nombre de la imagen detectada:

Imagen de recursos AR detectada.

Mostrar un video encima de un plano de imagen detectado

Ya podemos detectar una imagen con ese código. Ahora la idea es mostrar un video en la parte superior de la imagen. Eche un vistazo al delegado donde ya tenemos la imagen detectada:

La idea es agregar un método displayVideo dentro de un asistente pasando tres parámetros:

  • la imagen de referencia detectada
  • el nodo
  • el video a mostrar

El método displayVideo dentro de VideoHelper se encarga de mostrar el video. Básicamente hace lo siguiente:

  1. Obtenga el ancho físico y la altura de la imagen de referencia
  2. Crea un nodo para contener el reproductor de video
  3. Crea el reproductor de video
  4. Agregue el nodo que contiene el reproductor de video al nodo detectado original
  5. Configurar el nodo de video

El método setupVideoOnNode se encarga de configurar el video dentro del plano del soporte del video:

  1. Crear un reproductor de video
  2. Cree un SKVideoNode con el videoPlayer que contiene el video
  3. Crea un spriteKitScene para colocar el video dentro
  4. Agregar una transparencia alfa
  5. Reproduciendo el video
  6. Looping el video

Transparencia alfa de video

Observe que getAlphaShader es agregado por una clase auxiliar EffectNodeHelper que se encarga de aplicar un SKShader. Un objeto SKShader contiene un sombreador de fragmentos de OpenGL ES personalizado, que se utiliza para personalizar el comportamiento de dibujo de muchos tipos diferentes de nodos. En este caso, se aplica un alfa.

Jerarquía de nodos ilustrada.

Resultado

Como resultado, cuando se detecta la imagen reconocible, se muestra un video con transparencia alfa en la parte superior del plano detectado.

El video con transparencia alfa se muestra en la parte superior de la imagen reconocida.

Es importante mencionar que las imágenes deben tener buenos puntos de referencia y contrastes para funcionar con el seguimiento de imágenes en iOS12.

Un proyecto de demostración está disponible aquí. Básicamente es el proyecto de muestra de reconocimiento de imágenes de Apple con algunos cambios para agregar el video en la parte superior de la imagen.

Recursos utiles

  • Seguimiento de imagen con ARKit 2.0
  • Una introducción al ARKit 2 Image Tracking
  • Reproducción de videos en realidad aumentada usando ARKit

¿Conoces alguna sugerencia? ¡Deja un comentario! Nosotros realmente lo apreciamos.

Major League es una agencia de contratación y contratación de personal de Lateral View.