Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. iOS SDK
Code

Realidad Aumentada con ARKit: Puntos de Función y Detección de Plano Horizontal

by
Difficulty:AdvancedLength:LongLanguages:

Spanish (Español) translation by RRGG (you can also view the original English article)

Por ahora, es posible que haya utilizado una aplicación de realidad aumentada en su iPhone, con objetos virtuales que parecen reales y que combinan bien con las características del entorno. En esta serie, aprenderá cómo implementar esto en su propia aplicación iOS con detección de luz ambiental y detección de plano horizontal para mejorar su aplicación de realidad aumentada. Este tutorial se enfocará en mostrar planos horizontales y puntos característicos en ARKit.

A menudo, al usar realidad aumentada, desea colocar su objeto virtual en una superficie plana, como una mesa, un escritorio o incluso en el suelo. Para hacer esto con precisión, es importante que pueda detectar estos objetos antes de comenzar. Después de que se detecte su avión, el objeto usará una serie de puntos para anclar su objeto virtual, y el objeto permanecerá allí, incluso mientras mueve su dispositivo.

Para este tutorial, necesitará algunos conocimientos básicos de Swift, Xcode y ARKit. Si no ha usado ARKit en el pasado, puede ser útil leer mi tutorial anterior, que está específicamente dirigido a ayudar a los principiantes a hacer su primera aplicación de realidad aumentada:

Empezando

Versión Xcode

Antes de comenzar, asegúrese de tener instalada la última versión de Xcode en su Mac. Esto es muy importante porque ARKit solo estará disponible en Xcode 9 o posterior. Puede verificar su versión abriendo Xcode y yendo a Xcode> Acerca de Xcode en la barra de herramientas superior.

Si su versión de Xcode es anterior a Xcode 9, puede ir a la Mac App Store y actualizarla de forma gratuita. Si aún no tiene Xcode, también puede descargarlo e instalarlo gratis.

Proyecto de Prueba

Nuevo Proyecto

Una vez que se haya asegurado de tener la versión correcta de Xcode, deberá crear un nuevo proyecto de Xcode.

Continúa y abre Xcode y haz clic en Crear un nuevo proyecto de Xcode.

Figure 1 Create an Xcode Project

Puede que esté acostumbrado a crear una aplicación de vista única, pero para este tutorial, deberá elegir una aplicación de realidad aumentada. Después haz clic en Siguiente.

Figure 2 Select Augmented Reality Template

Marcos de Juegos

Puedes ponerle nombre a tu proyecto como quieras, pero nombraré mi Detección de Aviones También observará que hay una opción en la parte inferior donde puede seleccionar SceneKit, SpriteKit y Metal.

Estos son todos los marcos de juego de Apple, y para el propósito del tutorial, utilizaremos SceneKit porque usaremos objetos 3D.

Continúa y selecciona SceneKit si aún no está seleccionado. Tu pantalla debería verse más o menos así:

Figure 3 Name your Project

Preparando para Probar

Conectando a un iPhone

Como Xcode Simulator no tiene una cámara, deberás conectar tu iPhone. Desafortunadamente, si no tiene un iPhone, deberá tomar uno prestado para poder seguir este tutorial (y para cualquier otra aplicación relacionada con la cámara). Si ya tiene un iPhone conectado a Xcode, puede saltar al próximo paso.

Una novedad ingeniosa en Xcode 9 es que puedes depurar tu aplicación de forma inalámbrica en un dispositivo, así que tomémonos el tiempo para configurarla ahora:

En la barra de menú superior, elija Ventana> Dispositivos y simuladores. En la ventana que aparece, asegúrese de que Dispositivos esté seleccionado en la parte superior.

Ahora, enchufa tu dispositivo usando un cable de iluminación. Esto debería hacer que su dispositivo aparezca en el panel izquierdo de la ventana Dispositivos y simuladores. Simplemente haga clic en su dispositivo y marque la casilla Conectar a través de la red.

Figure 4 Devices and Simulators

Ahora serás capaz de depurar inalámbricamente en este iPhone para todas las futuras aplicaciones.

Setup Completo

Ahora tu setup está completo. Debería tener una aplicación ARKit en funcionamiento y puede probarla en el iPhone que acaba de conectar. En la esquina superior izquierda de Xcode, junto a los botones Ejecutar y Detener, selecciona tu dispositivo en el menú desplegable del simulador. Seleccioné el iPhone de Vardhan, pero debes seleccionar tu dispositivo específico.

Ahora que ha terminado de crear su proyecto inicial, y debería ver una nave espacial virtual aparecer en su mundo una vez que haga clic en Ejecutar. Aquí está cómo se debería ver:

Figure 5 Run the Sample App

En Teoría

Antes de comenzar a programar esta aplicación, es importante entender cómo ARKit realmente detecta estos planos. En este tutorial, exploraremos dos conceptos principales: puntos de característica y planos horizontales. En resumen, la realidad aumentada en su iPhone funciona con un proceso llamado Visual Inertial Odometry (VIO), que toma los datos de sus cámaras y sensores internos para obtener una comprensión 3D de una escena.

Punto de Carcaterísticas

Así que, ¿qué es exactamente un punto de características? Cada imagen, naturalmente, tendría sus propias características únicas. Por ejemplo, en una flor, podría haber formas únicas, o en una alfombra, puede haber texturas distintivas.

Estos puntos representan características notables detectadas en la imagen de la cámara. Sus posiciones en el espacio de coordenadas tridimensionales en 3D se extrapolan como parte del análisis de imágenes que ARKit realiza para seguir con precisión la posición, orientación y movimiento del dispositivo. Tomados en conjunto, estos puntos se relacionan de forma vaga con los contornos de los objetos del mundo real a la vista de la cámara. - Apple

Como explica la documentación de Apple, los puntos de función ayudan a su dispositivo (y a ARKit) a obtener una idea de la profundidad y el "realismo" de su mundo, haciendo que la realidad aumentada sea mucho más precisa. También se usan para ayudar a que los objetos virtuales tengan un lugar donde anclarse, ayudándoles a tener una idea de dónde permanecer en caso de que mueva su dispositivo.

Planos Horizontales

De manera similar a los puntos característicos, los planos horizontales ayudan a que su aplicación tenga una idea de su entorno. No es de extrañar que los puntos característicos y los planos horizontales estén estrechamente relacionados, ya que estos planos no podrían detectarse sin puntos característicos.

Usando los sensores incorporados de tu iPhone, incluida la cámara (por supuesto) y una combinación de estos puntos de función, ARKit puede detectar varios planos en tu escena. Estos cálculos y estimaciones se realizan en cada cuadro y se pueden detectar múltiples planos a la vez.

Cuando ejecuta una sesión AR con seguimiento mundial cuya opción planeDetection está habilitada, la sesión automáticamente agrega a su lista de anclajes un objeto ARPlaneAnchor para cada superficie plana que ARKit detecta con la cámara trasera. Cada ancla del plano proporciona información sobre la posición y la forma estimadas de la superficie. - Apple

En Código

¡Bien! Ya tienes una aplicación ARKit que funciona. Su objetivo para esta aplicación es poder detectar un plano horizontal y visualizarlo con puntos característicos (puntos virtuales que se colocan en escenas en ARKit).

Código de Comienzo

Ahora tiene una sólida comprensión de los puntos característicos y planos horizontales, y ahora está listo para comenzar a programarlos en una aplicación. Si desea obtener más información acerca de los puntos característicos y planos horizontales, le recomiendo leer la Documentación de Apple.

Preparando Tu Proyecto

Si abre su archivo ViewController.swift, notará que Apple tiene un código de inicio ya configurado (que representa una nave espacial). No cubriremos todo lo que significa todo en este tutorial, pero si desea una explicación línea por línea, no dude en consultar mi otro tutorial sobre ARKit.

Como gran parte del código es un código repetitivo, lo conservaremos, pero en cuanto a la nave espacial, eliminemos el código que maneja su ubicación. En su archivo ViewController.swift, dentro de su método viewDidLoad (), elimine las siguientes líneas de código:

Puntos Característicos

Habilitar opciones de depuración

Su proyecto de Xcode ahora está listo para comenzar a trabajar. Nuestro primer paso es agregar puntos de características visibles. Es probable que no los haga visibles para las aplicaciones de producción, pero es una característica maravillosa para depurar aplicaciones de realidad aumentada.

Este paso es bastante fácil, y puede ser hecho en una línea. En su método viewDidLoad (), agregue la siguiente línea de código:

Este código configura las opciones de depuración usando una variedad de opciones. Puede habilitar otras características agregándolas a esta matriz, pero por ahora, solo tenemos que mostrar nuestros puntos de función. Aquí está como se debería ver cuando ejecutes esta aplicación:

Figure 6 Feature Points

Como puedes ver, todos los puntos característicos detectados son visibles. Si no los ves, intenta mover tu iPhone y verás puntos amarillos. Parte de la razón por la que no aparecen de inmediato es que ARKit todavía está detectando la escena.

Configuración

Ahora, estamos listos para la detección del plano. Si echas un vistazo a tu método viewWillAppear (), verás las siguientes dos líneas de código. Tomemos un momento para aprender lo que significan ya que serán relevantes para la detección de plano:

Aquí, se crea una instancia de la clase ARWorldTrackingConfiguration. Esta clase es responsable para el posicionamiento del dispositivo. Después de eso, ejecutamos la configuración en nuestra sesión sceneView actual. Si está interesado en obtener más información al respecto, puede visitar la documentación de Apple al respecto. Por ahora, sin embargo, estás listo para continuar con el próximo paso.

Ahora habilitemos la detección de plano en nuestra ARWorldTrackingConfiguration. Debajo de la línea que crea la configuración, necesitarás insertar la siguiente línea:

¡Excelente! Ahora, la detección de plano horizontal está habilitada, pero no podemos verla porque está sucediendo bajo el capó, lo que significa que el iPhone sabe dónde está el avión, pero no podemos ver lo que piensa.

Detección de Plano

Chequear Anclas

Antes de que podamos comenzar a visualizar nuestros planos detectados, tendremos que averiguar cuándo y dónde se están detectando los aviones. Esto se puede hacer fácilmente con un método delegado que nos proporciona Apple.

Comience declarando un método para ARSCNViewDelegate, y como verá, la clase ViewController ya se ajusta a este delegado en el código de inicio. Pegue el siguiente método de delegado en su clase ViewController:

Esto se llama cuando se agregan nuevos ARAnchors con un nodo correspondiente, que, en este caso, serían nuestros planos horizontales.

Le dice al delegado que se ha agregado a la escena un nodo SceneKit correspondiente a un nuevo anclaje AR.-Apple

Geometría del Plano

Sin embargo, para la mayoría de las aplicaciones, desearía que el usuario pueda decir dónde cree que su aplicación ve planos horizontales, por lo que aprenderemos cómo mostrar estos planos al usuario utilizando el nodo y el ancla proporcionados en el delegado. método que llamamos antes.

Nuestra primera pregunta es: ¿el ARAnchor es realmente un avión, o es algo que no queremos? Podemos verificar esto usando el método de conversión y el enlace opcional. Coloque esta línea de código en su método de delegado:

Puede haber notado que el parámetro de anclaje tiene el tipo ARAnchor. Si queremos saber si este anclaje es un plano, podemos intentar convertirlo como un ARPlaneAnchor. Si eso tiene éxito, sabemos que se ha detectado un avión.

Dentro de la declaración de enlace opcional, agreguemos código para crear un SCNPlane con las dimensiones del ancla que recibimos del método de delegado. Escribe las siguientes dos líneas de código:

La primera línea aquí crea un SCNPlane bidimensional que toma dos parámetros en su constructor: un ancho y un alto. Verá que pasamos anchor.extent.x y anchor.extent.z, que, como sugieren sus nombres, representan el ancho y la altura de los planos detectados. Notarás que hemos omitido el valor y del anclaje, y eso se debe a que los planos que estamos detectando son bidimensionales, y los ejes xey se encuentran en los planos que identificamos.

La siguiente línea de código aplica un tono rojo translúcido a estos planos detectados, y puede ver a través de estos planos porque el valor alfa se establece en 0.5. Por supuesto, puedes usar cualquier color o apariencia que desees, siempre y cuando puedas verlos.

Creando el Nódulo

No hemos terminado todavía; aún necesitamos crear el nodo para agregar a nuestra vista. Aunque nuestro avión es un objeto bidimensional, aún necesitamos representarlo en 3D con una coordenada x, y y z. Estas coordenadas serán relativas al nodo padre del ancla del plano detectado y no del sceneView. Ingresa las siguientes líneas de código:

Primero estamos creando un SCNNode con la geometría del plano que creamos en el paso anterior. Esto se hace pasando la geometría como un parámetro del constructor de SCNNode.

A continuación, estamos posicionando el nodo plano directamente en el centro del ancla del plano utilizando una representación SCNVector3 de las coordenadas x, y y z en el plano tridimensional.

Además, en la siguiente línea, verás que el valor x de nuestros eulerAngles se establece en -π / 2. La propiedad eulerAngles representa el tono, la guiñada y el giro del SCNNode. De acuerdo con la documentación de Apple, el valor de x representa el paso (o rotación sobre el eje x), y queremos que el nuestro sea plano contra el plano (no se quede vertical).

Por último, el nodo recién creado se agrega como un nodo secundario del nodo plano detectado para que sea visible para el usuario en la misma ubicación.

Conclusión

¡Buen trabajo! Por último, el nodo recién creado se agrega como un nodo secundario del nodo plano detectado para el mar visible para el usuario en la misma ubicación. Si no lo hace, asegúrese de mover el teléfono lentamente para explorar la superficie e intente aumentar el alfa del color que configuramos anteriormente. Aquí está cómo se ve el mío:

Figure 7 Horizontal Planes and Feature Points

Ahora sabe cómo detectar superficies planas, como mesas o escritorios, y mostrarlas al usuario como planos horizontales. Además de esto, has podido ver cómo ARKit ve el mundo con puntos de característica. Mientras esté aquí, asegúrese de consultar algunos de nuestros otros cursos y tutoriales de ARKit aquí en Envato Tuts +.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.