Realidad Aumentada con Vuforia 8 y Unity 2018

Debido a los cambios que ha habido en los últimos años, fundamentalmente desde la integración de Vuforia en el propio editor de Untiy, ya tocaba actualizar el artículo de cómo desarrollar aplicaciones de realidad aumentada. En este caso utilizaremos Unity en su versión 2018 y la librería Vuforia 8.

Para aprovechar completamente este tutorial será necesario contar un nivel básico de Unity y también vamos a asumir que ya tenemos Unity y el SDK de Android perfectamente configurado y funcionando.

Para comenzar necesitamos crearnos una cuenta de desarrollador en el sitio web de Vuforia. Accedemos al siguiente enlace:

https://developer.vuforia.com/

Pulsamos en el botón Register y cubrimos nuestros datos. Una vez registrados accedemos con nuestro nombre de usuario y contraseña y nos vamos a la sección Develop del menú principal.

Como vemos, en la barra verde que hace de submenú disponemos de dos pestañas: License Manager y Target Manager. Para desarrollar aplicaciones de realidad aumentada con Vuforia vamos a necesitar una licencia aunque sea en la modalidad gratuita y también vamos a tener que subir a su plataforma los marcadores que queramos utilizar.

Vamos a comenzar solicitando una licencia de desarrollo. Pulsamos el botón Get Development Key.

Lo primero es indicar un nombre para la licencia. Justo debajo de esta casilla nos informa de las condiciones de uso de la misma. Escribimos un nombre, aceptamos los términos de uso y pulsamos Confirm.

Ya tenemos nuestra licencia creada. Ahora veremos una lista con todas las licencias que estemos utilizando.

Hacemos click sobre la que hemos creado y se nos abre una ventana desde donde podemos copiar nuestro número de licencia.

Nos olvidamos durante un rato de la página de Vuforia y pasamos a Unity. Creamos un nuevo proyecto como hacemos habitualmente. Como la aplicación que vamos a desarrollar será para Android lo primero que tendremos que hacer será cambiar la plataforma de destino. Vamos a File -> Build Settings.

En la ventana que se abre seleccionamos Android y pulsamos el botón Switch Platform.

Una vez finalizado este proceso vamos a indicarle a la aplicación que vamos a utilizar Vuforia. Para ello pulsamos en esta misma ventana el botón Player Settings… y en el Inspector marcamos la casilla Vuforia Augmented Reality Supported dentro de la sección XR Settings.

Podemos aprovechar que tenemos el Inspector abierto para modificar otras propiedades como las señaladas a continuación.

Cerramos la ventana Build Settings y abrimos la configuración de Vuforia mediante la opción Window -> Vuforia Configuration.

Ahora en el Inspector aparecerán las propiedades que podemos modificar de la configuración de Vuforia. En nuestro caso sólo indicaremos la licencia que hemos obtenido en el portal de Vuforia. La copiamos y la pegamos en la casilla App License Key del apartado Global de la configuración.

Una vez que hayamos pegado aquí nuestro código de licencia ya estamos en disposición de empezar a preparar nuestra escena de realidad aumentada. En ocasiones en esta ventana de configuración aparece un mensaje diciendo que no tenemos la última versión de Vuforia pero nos da la opción de descargarla de ahí automáticamente.

Lo primero que necesitamos es una imagen que hará las veces de nuestro marcador. Desde hace tiempo la mayor parte de librerías de realidad aumentada pueden utilizar casi cualquier imagen que cumpla unos requisitos mínimos como que no sean totalmente simétricas (horizontal y verticalmente) y que sus formas sean fácilmente identificables. Nosotros utilizaremos la siguiente imagen:

Que se puede descargar de aquí:

http://clipart-library.com/clipart/8cxrEq95i.htm

Lo único que tuve que hacer es convertirla a JPG para que Vuforia la aceptase correctamente.

Volvemos a la página de desarrollador de Vuforia y en esta ocasión nos vamos a la pestaña de Target Manager. Antes de comenzar debemos saber que Vuforia organiza los marcadores en bases de datos. Cada una de estas bases de datos representará a una aplicación de realidad aumentada lo que nos permite utilizar varios marcadores dentro de la misma aplicación. Pulsamos el botón Add Database.

Se nos abre una ventana donde indicaremos el nombre de nuestra base de datos, el tipo (en nuestro caso Device) y pulsaremos el botón Create.

Una vez creada nos devolverá a la lista con todos las bases de datos de marcadores que tengamos creadas. Pulsamos sobre esta última que acabamos de generar y a continuación en el botón Add Target.

Se nos abre una ventana para crear nuestro primer marcador. Elegimos el tipo (Image), seleccionamos la imagen que formará nuestro marcador, el ancho (1 está bien), le damos un nombre y pulsamos el botón Add.

Tras subir la imagen nos mostrará una lista de los marcadores indicando mediante estrellas lo bien que funcionará su reconocimiento. Este proceso no siempre es inmediato y hay que recargar la página. Ahora, para incluir este marcador en nuestra aplicación de Unity es necesario pulsar el botón Download Database (All).

Nos pregunta el formato en el que queremos descargar la información. Elegimos Unity Editor y pulsamos el botón Download.

Tras un pequeño proceso nos pedirá la ubicación donde guardar el package de Unity que tendremos que importar en nuestra aplicación.

Volvemos a Unity. Ahora nos toca importar nuestro marcador. Desde la ventana Project, con el botón derecho elegimos la opción Import Package -> Custom Package… y seleccionamos el fichero que acabamos de descargar.

Una vez importado tenemos que empezar a configurar nuestra escena. Lo primero, incluimos en la misma una cámara de realidad aumentada desde GameObject -> Vuforia Engine -> AR Camera.

Es posible que nos salga un mensaje de que necesita importar algunos componentes a mayores. Pulsamos el botón Import.

Esperamos a que Unity finalice la importación y añadimos un nuevo GameObject. Vamos a
GameObject -> Vuforia Engine -> Image.


También nos puede aparecer el mensaje anterior. Nuevamente pulsamos el botón Import. Si todo ha ido correctamente nuestra escena estará así:

Si ahora pulsamos sobre el GameObject ImageTarget en sus propiedades deberían de aparecer seleccionados nuestra base de datos y nuestro marcador. Si no es así los elegimos desde los deplegables.

Con estos dos objetos ya tenemos nuestra aplicación preparada. Ahora solo queda incluir el modelo 3D que queremos que aparezca al apuntar al marcador. Nos vamos a la Asset Store de Unity y elegimos el modelo llamado Space Robot Kyle. Pulsamos el botón Download y lo importamos en nuestro proyecto.

Si hemos hecho correctamente la importación ya deberíamos de ver el modelo 3D del robot en nuestra ventana de proyecto.

Arrastramos este modelo a nuestra escena teniendo en cuenta que tiene que ser un nodo hijo del objeto ImageTarget. Así quedará nuestra escena.

Lógicamente podemos mover nuestro modelo 3D de forma relativa al marcador para que aparezca a su lado, detras, etc.

Ya sólo nos quedará generar nuestra aplicación Android. Vamos a File -> Build Settings y pulsamos el botón Build. Elegimos un nombre para nuestro fichero y pulsamos Guardar. Instalamos el fichero apk generado en nuestro dispositivo Android y al ejecutarlo ya podremos ver nuestra app de realidad aumentada funcionando.