Cómo desarrollar AR app’s con Vuforia y Unity

¡¡Genial!! Estáis en el lugar correcto a la hora indicada. ¿Para qué? Pues para aprender con esta guía a cómo desarrollar una AR app (aplicación de Realidad Aumentada) con Vuforia SDK 5 y Unity 5. Sé que os puede parece algo complicado, pero no hay nada más que me guste hacer que facilitar el camino, el cual yo ya he recorrido personalmente, a los que buscáis cosas nuevas.

Una de esas cosas nuevas, la mezcla de las librerías Vuforia + motor gráfico de Unity, esto realmente no es novedoso ya que se lleva años haciendo, pero no deja de ser impactante y emocionante para los iniciados en estas tecnologías, sobre todo para los amantes de la Realidad Aumentada (AR). Además, va a servir para a quiénes quieran dar un paso más allá, la visión estereoscópica a través de dispositivos simples como las Google cardboard (más asequibles) como otras más caras: Samsung Gear VR, Oculus, etc…este tutorial lo abordaremos más adelante. Así que estad pendientes.

Tutorial 2.5D

Siga estos pasos para instalar de forma correcta y así crear su primera aplicación Android, también es posible realizar el proceso para iOS con alguna salvedad, de Realidad Aumentada.

Vamos a necesitar el siguiente sotfware:

  • Unity 5.3.1 f1 (es la última versión liberada en este momento) 32 bits.
  • Vuforia SDK 5.
  • Android SDK & Manager.
  • Java JDK v1.8.

Paso 0.5. Configuración previa Unity. Debemos tener descargado e instalado la versión última de Unity. En este tutorial vemos como hacerlo de forma correcta (para los usuarios de Windows 64 bits, que son los únicos que tienen problemas) para que no sea incompatible con Vuforia 5, debemos instalar en la versión de 32 bits.

Paso 1.5. Descarga de Vuforia SDK 5. Como bien sabemos, este tipo de librerías de AR se basan en un marcador que a través de la cámara del móvil debemos captar y a partir de ahí fijar nuestra referencia a la realidad aumentada. Se conoce como Marker o Image Target, que no es más que una imagen la cual reconoce y referencia a través de la cámara de nuestro dispositivo. Es decir, mezcla la realidad con una realidad aumentada una vez reconocido dicho patrón o marca, esta nueva realidad será mostrada respecto a ese disparador.

Así que vamos a la web de Vuforia para descargarnos las librerías necesarias, descargar librerías. Será necesario estar registrados en la web, por lo tanto realizamos el proceso de registro (si no lo estamos ya) y posteriormente vamos de nuevo a la página anterior y descargamos las librerías para Unity (33,17MB para la versión actual).

Paso 2.5. Dataset – Vuforia en la web. Para desarrollar una aplicación en Unity con Vuforia necesitamos, una vez registrados en la web:

        1. Crearnos una clave licencia (license key) para cada una de nuestras aplicaciones.

Para ello vamos a registrarnos en el portal para desarrolladores de Vuforia con nuestro usuario. Una vez dentro, en el menú  “Develop”, dentro del sub apartado  “License Manager” vamos a crear una licencia para nuestra app.

Vuforia 5

Pulsamos en “Add License Key” y rellenamos el cuestionario que nos muestra, tenemos que poner un nombre a nuestra aplicación, indicar el dispositivo y un tipo de licencia (poner como está en la siguiente imagen).

Vuforia2

Pulsamos en siguiente (“Next”) y  marcamos como leídas las condiciones de Vuforia para sus claves de licencia. Por último, confirmar.

Vuforia 5 SDK

Una vez realizado este proceso obtendremos la clave de licencia válida para, posteriormente, copiar en nuestro proyecto de Unity.

clave de licencia Vuforia

Pero antes de esto vamos a seguir con el proceso previo en el portal de Vuforia, para poder crear nuestra AR app con Unity.

2. Crear una “Database”. Es necesario crear un almacén de datos con las distintas marcas que podremos utilizar como “Image Target” dentro de nuestra aplicación.

Para ello, desde el menú “Develop” entramos en el sub menú “Target Manager” y añadimos una nueva “Database” pulsando en el botón. Ponemos de nombre “2p5D”. Dejamos el dispositivo por defecto “Device” y creamos. En esta página tendremos todas las base de datos de patrones/marcas que vayamos creando. Accedemos pulsando sobre el nombre de la última que hemos creado para este tutorial.

3. Crear un “Image Target”. El paso inmediatamente posterior es la creación de un patrón (conocido como “Image Target” desde las librerías de Vuforia).

Para ello desde nuestra Database creada anteriormente vamos a pulsar el botón “Add Target” y veremos algo así:

Image Target

Por defecto, vamos a dejar el type como Single Image. En File, debemos elegir la marca, que será el disparador de la realidad aumentada y que debe ser uno de esos tipos de archivos (.jpg or .png) y con un tamaño máximo de 2Mb. Seleccionamos de nuestro PC el archivo que tenemos como patrón, que previamente debemos haber buscado. Yo como soy muy buena gente os voy a dejar dos imágenes que sé que funcionan (una mal y otra bien) para este cometido.

vuforia pattern

Esta imagen, la del símbolo Pi, es sinónimo de una marca mal definida. Si añadimos esta imagen a nuestro DataBase, veremos que tiene una calificación de 0 estrellas dentro de la ayuda que la propia web establece para valorar los Image Target que hemos subido.

vuforia pattern 2

Por otro, lado la imagen de la arenisca o forraje que tenemos aquí arriba, es una imagen con calidad de 5 estrellas (la máxima) dentro del portal Vuforia. Podéis hacer la prueba y subir las dos o cualquier otra que queráis probar.

Vuforia6

Si volvemos al Add Target que estabamos completando, vemos que la siguiente petición es definir un Width que definiremos como 1. Esto quiere decir que el ancho del modelo de AR será igual al de la marca. Y por último, nos pide un nombre, debe ser un nombre sin espacios en blanco que defina la marca. Pulsamos Add. Repetimos el proceso por cada marca que queramos crear dentro de nuestra DataBase “2p5D”.

4. Descargar el Dataset. Tenemos que descargar el Dataset en un archivo para Unity desde el portal de Vuforia.

Una vez definidos todos los ImageTarget (en nuestro caso dos). Desde nuestra DataBase podemos observar nuestra marcas con las propiedad de cada una. Aquí, arriba de la lista de marcas a la derecha debemos pulsar en el botón “Download Dataset (All)“. Si queremos descargarnos la base de datos con sólo algunos patrones tenemos que marcar las que nos interesen en la casilla correspondiente, y luego descargarlos con el botón anterior, donde entre paréntesis indicará el número de marcas seleccionadas en vez de All.

Vuforia7

Tiene que estar seleccionada, como se ve en la imagen, como plataforma de desarrollo Unity Editor. Download.

Paso 3.5. Configuración de Vuforia en Unity. Abrimos Unity, y creamos el proyecto correspondiente para realizar esta demo de la siguiente forma: ponemos de nombre “AR2p5Demo”, guardamos en el lugar de nuestro PC que nos apetezca (o dejamos por defecto) y marcamos la opción 3D y creamos.

Os recomiendo antes de hacer nada más, cambiar la plataforma del proyecto que por defecto aparece para “PC, Mac and Linux Standalone” a “Android” en File-> Build Settings… seleccionamos Android y el botón Switch Platform. Dado que mientras más elementos tengamos en el proyecto, más tiempo de cambio de plataforma tardará Unity.

Vuforia8

Tenemos que importar las librerías que nos hemos descargado al inicio (no el Dataset). Es un paquete para Unity con el nombre “vuforia-unity-5-0-10.unitypackage” (para la versión actual en el momento del tutorial). Para ello, debemos en Unity, en la barra de opciones buscar Asset-> Import Package -> Custom Package…y buscar nuestro paquete anterior y aceptar.

Vuforia9

Cuando Unity descomprime cualquier paquete importado nos aparece una ventanita donde nos indica el contenido del paquete con todos los objetos seleccionados por defecto. Confirmamos la importación (Import) y esperamos (puede tardar más o menos dependiendo del contenido del paquete).

Y ya que estamos importando, vamos a aprovechar para importar un modelo con animación 3D desde la tienda de Unity conocida como Asset Store.

Asset Store Unity

Así que vamos a la pestaña correspondiente y buscamos “Red Samurai”, es gratis. Pulsamos  en el botón Import, lo cual nos descargará en nuestro proyecto dicho personaje. Procedemos como con el paquete anterior.

En estos momentos, tenemos las librerías de Vuforia integradas con Unity y un personaje extraño también pululando por los elementos de nuestro proyecto.

Paso 4.5. Configurar Unity con JDK y SDK. Como paso fundamental, si queremos generar apps para Android, vamos a configurar Unity para que compile Java y Android. Esto lo hacemos, desde la pestaña del menú principal de Unity. Pulsamos en Edit->Preferences… y desde External Tools configuramos los directorios del SDK y JDK que hemos descargado anteriormente e instalado en nuestro PC. Si no lo hemos hecho, lo debemos hacer como paso sine qua non.

Paso 5.5. La Demo. Vamos a crear ya, por fin, nuestra escena en Unity. En la ventana Hierarchy (que conoceremos a partir de ahora como escena), vamos a eliminar la Main Camera del proyecto que viene por defecto, seleccionarla y botón Supr. A continuación, vamos a buscar dentro de los Prefabs de Vuforia de nuestra ventana Project, la ARCamera, y arrastrarla dentro de nuestra escena.  Debería quedar con la position (0, 2, 0) y rotación por defecto.

Vuforia11

¿Recordáis que tuvisteis que crear un app license key en el portal de Vuforia? Pues ahora es el momento de copiarla y pegarla dentro de los parámetros de nuestra ARCamera (como aparece en la imagen).

Después de esto, vamos a importar el Dataset que nos descargamos en el paso 2.5. Lo hacemos como hemos realizado la importación del paquete de las librerías de Vuforia, Asset-> Import Package -> Custom Package…y buscar nuestro paquete de Dataset. Importar.

Dentro de los Prefabs de Vuforia encontramos el elemento Image Target, que arrastramos, igual que hicimos con nuestra ARCamera, a la escena. Lo seleccionamos y en el Inspector buscamos la zona del script Image Target Behaviour y lo configuramos de esta forma:

Vuforia12

Volvemos a la ARCamera (seleccionándola) y configuramos el script Database Load Behaviour como indica en la imagen siguiente, esto permite que cargue la Database. Si no podéis hacer el paso de la imagen anterior, realizar primero este paso y luego configurar el Image Target.

Vuforia13

A continuación, meteremos el prefab Samuzai en la escena tal como se ve en la imagen anterior, es decir tiene que ser hijo del ImageTarget, para que tenga efecto. Lo colocamos en la posición y rotación (0, 0, 0).

Por último, vamos a compilar la app para verla en nuestros dispositivos móviles, que bien que fácil. NO. Aún nos queda configurar el apartado de Android en File-> Build Settings…

Vuforia14

Importante cambiar: Company Name, Product Name, Bundle Identifier. No podrá haber dos apps con el mismo identificador. Una vez hecho esto, enchufamos al USB nuestro dispositivo smartphone, le permitimos depuración desde nuestro terminal y pulsamos en Unity el botón Build And Run.

Ejecutamos la app en nuestro móvil una vez instalada, y apuntamos la marca que tenemos ya impresa (blanco y negro) y centrada en un folio a tamaño de una cuarta parte de un A4. Y cuando detecte la marca con nuestro dispositivo, aparecerá la animación del samurai, la cual seguirá a nuestra  marca según movamos.

Gracias por seguir este tutorial de @JaviLSanchez.

Ya sabéis que tengo activa esta causa solidaria por si queréis realizar una pequeña donación!

Gracias de antemano! –> Donación y descripción aquí

 

Deja un comentario