Tutorial básico AR Unity3D y Vuforia

En este tutorial voy a mostrar cómo montar y crear un pequeño proyecto a modo de “Hola mundo” en el que a través de nuestra webcam primero y nuestro móvil posteriormente, seremos capaces de mostrar objetos 3D sobre una carta que nuestra
cámara capturará en tiempo real.

¿Pero qué es la AR o RA? No todo le mundo sabe bien lo que significan esas letras, o las confunde con VR. AR o RA vienen de Realidad Aumentada o Augmented Reality y VR de Realidad Virtual. ¿Seguimos sin saber lo que es la realidad aumentada? ¿Y si os nombro Pokemon GO o los no tan conocidos Invizimals de Sony? Ahora un poco
más…

Bueno, la Realidad Virtual, viene a ser el sistema por el cual nos metemos dentro de mundos ficticios generados por ordenador gracias a un casco o gafas cerradas que nos aíslan del exterior. Por contra, su prima la Realidad
Aumentada, lo que hace es llevar la ficción generada por el ordenador a la realidad, usando gafas o cascos abiertos con los que a través de sus cristales o lentes especiales, vemos proyectados gráficos 3D al más puro estilo holográfico sobre los objetos
o superficies reales de nuestro entorno. Esto se consigue gracias a tags o marcas como códigos bidi, imágenes o incluso objetos, pero también es posible sin objetos de target o referencia, como en el caso de las Hololens que mapean
o escanean el entorno y ponen nuestros objetos virtuales en el mundo real combinando el uso de sus cámaras especiales y sus lentes de proyección. Además, podemos interactuar con esos objetos aunque no estén realmente ahí, cogiéndolos o haciendo clic
con un dedo.

“Para todo lo necesario pondré los enlaces al final del artículo en su sección correspondiente.”

---

Contenido del artículo:

• Software necesario
• Hardware y material físico necesario
• Instalación y configuración previa
  • Instalación de Unity 3D
  • Instalación del SDK de Google para Android
  • Registro en Vuforia y obtención de clave de desarrollo
• Creando la aplicación y preparando el entorno en Windows 10
  • Instalación de asset Vuforia (saltar si se hizo en el primer paso)
• Creando nuestra cámara AR y configurando Vuforia
• Creando la base de datos necesaria para los objetos “target” que usaremos en el proyecto
• Configurando el objeto de nuestra tarjeta “target” que nuestra cámara detectará
• Agregando el objeto virtual que aparecerá al detectar nuestro target con la cámara
• Probando la demo con la webcam
• Compilando el proyecto para nuestro Android
• Conclusiones
• Enlaces

---

Software necesario

• Unity3d 2017.4.1 o posterior

(No recomiendo la última versión por no estar tan probada como esta y por no ser la usada en el tutorial)

• Google sdk Android Studio
• Visual studio Code (opcional, con Monodevelop se puede trabajar… o no…)

---

Hardware y material físico necesario

• Un ordenador portátil con webcam o torre con webcam usb
• Un teléfono móvil Android (cámara incluida) o un Iphone (en este tutorial no se mostrará su uso pero no sobra el decir que se puede usar también).
• Una carta o imagen para usar de target (cuanto más contraste tenga mejor para la identificación de rasgos o puntos). Yo he usado una carta de un tigre del juego Magic (figura 14). No recomiendo usar imágenes directamente proyectadas en la pantalla
  del móvil porque el brillo y reflejos hará que os cueste muchísimo que se capture. Mejor física aunque tendremos que capturarla posteriormente para nuestra base de datos.

---

Instalación y configuración previa

Instalación de Unity 3D

Descarga desde el enlace el instalador web. Ejecutamos y pulsamos next, aceptamos, next y en la siguiente ventana
seleccionamos lo que viene por defecto y añadimos el soporte de Vuforia.

Seleccionamos la ruta por defecto o la que queramos y seguimos hasta finalizar la instalación. El proceso es algo largo por lo que podemos ir haciendo el siguiente paso mientras tanto o esperar a que termine, pero no abramos aún Unity una vez instalado.

---

Instalación de SDK de Google

Si alguna vez has descargado previamente este SDK para algún proyecto de Unity o para desarrollar en Android con Java, puedes saltar este paso, sino sigue los pasos a descritos continuación.
Descargamos Android Studio pinchando en
el siguiente botón y una vez descargado lo instalamos.

Si tenemos ya una versión anterior de Android Studio y no lo recordábamos o la queremos actualizar, nos saldrá la siguiente ventana.

El único paso en el que hay que prestar especial atención es en la selección del SDK que sea la más alta compatible con tu dispositivo Android. En mi caso tengo Android 8.0 Oreo que corresponde a la API 26, pero por darle
algo más de compatibilidad preferí añadir la API 24 de Android 7.0. De todos modos siempre se puede añadir nuevas versiones ejecutando Android Studio, Tools, Android y SDK Manager.

Ya sólo falta agregar la ruta del SDK a Android, pero lo haremos más tarde cuando arranquemos Unity y optemos por compilar para Android.

---

Registro en Vuforia y obtención de clave de desarrollo

Ya estaría lo básico ocnfigurado, pero falta lo que hará nuestra magia con AR, Vuforia. Para ello accedemos a su web y nos registramos.
Tras
esto, nos logueamos y accedemos a la sección Develop, License Manager para generar una key que nos hará falta más tarde como indico en la siguiente figura, dándole un nombre y marcando la casilla de confirmación.

---

Creando la aplicación y preparando el entorno en windows 10

Ahora sí, abrimos Unity 3D, creamos un proyecto nuevo en la ruta que queramos con un nombre que nos resulte identificable y con la opción 3D.

---

Instalación de asset Vuforia

Si os pasa como a mi, que ya tenía instalado Unity 2017 de proyectos previos y no encontraba la forma de añadir el componente de Vuforia, podéis seguir los mismos pasos que seguí yo y os detallo a continuación. En caso de que lo hayáis
seleccionado en la instalación de Unity de este tutorial, podréis saltaros este paso.
Para ello seleccionamos File -> build settings -> player settings -> XR Settings y marcaremos Vuforia. Si no está instalado, nos preguntará
si queremos descargarlo. Le decimos que si y lo instalamos. Es posible que nos pida cerrar Unity para poder instalar esta actualización de componentes.

Una vez instalado, volvemos a repetir los pasos para asegurarnos de que esté seleccionado el componente de Vuforia. Si no es así lo marcamos y cerramos la ventana de build settings.

---

Creando nuestra cámara AR y configurando vuforia

El siguiente paso será añadir nuestra cámara de AR y eliminar la existente. Para ello pulsamos botón derecho del ratón sobre el cuadro Hierarchy de Unity y seleccionamos Vuforia -> cámara AR.

Es posible que nos pida importar lo necesario si no lo hizo al seleccionar Vuforia en el paso previo, le decimos que si. Nuestro proyecto tendrá entonces las siguientes carpetas:

En el cuadro de Hierarchy ahora tendremos dos cámaras así que eliminamos la Main Camera.
Ahora configuramos la cámara de AR seleccionándola y pinchando en Open Vuforia configuration como
muestra la imagen.

Pulsamos en Add License y donde nos sale el cuadro de App License Key, pondremos la key que nos generó en la web de Vuforia al dar de alta nuestro proyecto AR.

---

Creando la base de datos necesaria para los objetos “target” que usaremos en el proyecto

Volvemos a la web de Vuforia y en este caso en lugar de a la licencia accedemos a Target Manager. Pulsamos sobre Add DataBase donde le pondremos un nombre y en nuestro caso marcaremos Type: Device. Con
esto lo que le decimos es que el target estará alojado en nuestro dispositivo, siendo Cloud igual pero con la necesidad de consultar por Internet la imagen y con VuMark, cuando son marcas registradas.
En mi caso lo he llamado
prueba _ar_demo y pinchando sobre ella, añadiremos nuestro target. Al pulsar Add target, nos saldrán varios tipos, en el ejemplo usaremos single image, pero se pueden usar objetos 3D reales. La imagen usada tiene
que tener un máximo de 2mb y ser jpg o png. Además debemos saber el ancho de la misma ya que habrá que ponerlo en la caja donde pone Width y darle un nombre. Yo he usado la siguiente imagen
capturada con mi móvil de una carta real. Como veis en la figura, el número de estrellas nos indica la calidad o facilidad que tendra de ser reconocida por nuestro dispositivo como target.

Una vez subida, pulsamos sobre Download Database (All) y marcamos Unity Editor. Esto generará un unitypackage que importaremos haciendo doble clic.

Una vez importado, como se ve en la figura y en la ruta indicada, estará nuestro target.

Ahora seleccionamos nuestra cámara AR de nuevo y la configuración de Vuforia para cargar la base de datos descargada, marcando en Databases la nuestra y activándola.

---

Configurando el objeto de nuestra tarjeta “target” que nuestra cámara detectará

Ahora añadiremos nuestra carta como target a la escena, pulsando sobre Hierarchy botón derecho del ratón, Vuforia e Imagen. Esto nos crea un ImageTarget que al seleccionarlo nos muestra en el Inspector sus opciones.
En Database al pinchar se nos muestra como opción la nuestra que seleccionamos. Y si no lo hace de forma automática, seleccionamos nosotros la nuestra. Aparecerá con su tamaño real, pero lo arreglamos cambiando su Scale en 1 1 1.

---

Agregando el objeto virtual que aparecerá al detectar nuestro “target” con la cámara

Ahora, creamos un objeto cualquiera, en mi caso un cubo que sea hijo de ImageTarget y le añadimos un material de algún color. Lo escalamos y colocamos donde queremos que aparezca cuando nuestra cámara detecte nuestro target. Este objeto puede
ser un objeto estático como el ejemplo o uno animado. Aquí el límite lo dará nuestra imaginación.

---

Probando la demo con la webcam

Al fin, para ver nuestro primer resultado, seleccionaremos nuestra cámara AR e iremos una vez más a su configuración y en la sección Webcam, Camera Device seleccionaremos nuestra cámara. Tras esto pulsamos “Play”
y al mostrarle a nuestra webcam nuestra tarjeta o carta, hará aparecer nuestro cubo rojo sobre ella y aunque la movamos irá con nosotros siempre que el plano de la imagen sea visible.

---

Compilando el proyecto para nuestro Android

Ya tenemos nuestro proyecto funcionando, pero lo chulo es poder enseñarselo a la gente y hacerlo más funcional aún ¿no?
Bien, pues vamos a ello, no es nada complejo y el proceso es exactamente el mismo que cualqueir proyecto Android asique los que
ya hayais tocado algo con Unity lo hareis si necesidad de mirar esto o de un vistazo rápido.
Seleccionamosd File -> Build Settings y añadimos la escena actual. Si hasta ahora no la habíamos guardado, (eso es que os gusta el riesgo…
para una demo no pasa nada, pero para un proyecto real no os lo aconsejo) nos pedirá el nombre y ruta de la misma, por ejemplo main.
Ahora seleccionamos Android y pulsamos Switch Platform. Esto creará lo necesario
para el cambio de proyecto. Cuando acabe, pulsamos sobre Player Settings. Marcamos de nuevo Vuforia Augmented Reality Supporte. En Other Settings, en la sección Identification es necesario darle
un nombre a Package Name que suele ser nuestro juego y nuestra web a la inversa, por ejemplo com.croquetasvirtuales.ARdemo y estaría listo.

Al pulsar sobre Build debería de generar el apk de nuestra demo que instalaremos y probaremos en nuestro móvil, pero es posible que nos de error si no hemos configurado aún el path del SDK de Android como comenté
al principio que haríamos a posteriori.
En ese caso iremos a Edit, External Tools, SDK y JDK. Si por algún motivo alguno de los dos no lo hemos instalado, podemos darle a download ahí mismo y tras instalarlo, le pondremos la ruta.

Tras esto, iremos de nuevo a File -> build and settings y haremos el build. Si os da error puede ser que tengáis activado por defecto en Other Settings, la compatibilidad con AndroidTv, así que desmarcadla.
Una vez ejecutado en nuestro móvil tendremos el resultado siguiente:

---

Conclusiones

Pues hasta aquí nuestro primer acercamiento a este mundillo de la ficción en la realidad creada por nosotros… o algo así. No se vosotros pero a mí no me ha parecido muy complejo el proceso para conseguir que la demo funcionara, aunque falta añadir detalles
como poder interactuar con los objetos como nuestro cubo o mostrar dos tarjetas en lugar de una y que estas reaccionen entre sí.
Por mi parte puedo decir que por ahora, el plugin de Vuforia hace lo que debe y nos facilita bastante
el proceso. Además tiene opciones para seleccionar distintos targets sin tener que ser imágenes y poder usar dispositivos más potentes como las Hololens directamente.
Quizá como usuario inexperto o casual de esta tecnología
en auge, veo algo caro el producto, no por su calidad que bien merece el precio y nos permiten además su uso gratuito como developers con el límite de 1000 capturas al mes (no creo que sea fácil consumirlo), pero este límite es como su nombre
indica muy limitado para sacar un producto comercial de bajo presupuesto como puede ser un juego sencillo o Indie de bajo presupuesto que dudo pueda permitirse pagar la tarifa de la versión profesional. Quizá se me escapa alguna opción de uso, pero
por lo que veo en su web, ofrecen una versión Classic por 499$ sin límite de uso (una app de Android se vende por un par de euros en la Store y si no eres conocido no creo que llegues ni
a cubrir este gasto), otra opción es por consumo pagando 99$ al mes, que si no es para vender un producto como un juego, sino más bien para una empresa a la que se le puede cargar dicha cuota como servicio mensual aparte del desarrollo de
la app en sí, no está mal, aparte de que al ser un único cliente, si deja de pagar y por tanto de usarlo, sólo le afectará a él mientras que si fuera un juego, nunca sabríamos cuando quedan jugadores haciendo uso de nuestro servicio ni si compensa
mantenerlos online, pero tampoco sería justo que los que hubieran pagado, se les cortara el servicio ¿no?
Tampoco se ahora mismo si hay muchas alternativas a Vuforia ya sea con Unity o de forma nativa en Android,
aparte de el kit de Google ARCore en el que hay muchas esperanzas puestas.
En poco tiempo imagino que al igual que todos los Servicios Cognitivos,
la IA, la Realidad Virtual, esta tecnología nueva o más visible ahora que es la Realidad Aumentada, irá evolucionando y poco a poco adentrándose en nuestras vidas.

---

Enlaces

• Unity 3D:https://unity3d.com/es/
• Google SDK Android Studio: https://developer.android.com/studio/
• Vuforia: https://developer.vuforia.com

Y sin más me despido, espero que os haya gustado. Iré subiendo más tutoriales del estilo y de todo lo que me parezca curioso o interesante de practicar y aprender. Un saludo y gracias 👍

Si te ha gustado y aún no lo has hecho, puedes suscribirte al blog por correo o siguiéndome en Twitter y así te avisaré con cada nuevo artículo o tutorial para que estés al día.