Tutorial Realidad Aumentada Para Android con Unity y Vuforia I

chesco Porchesco

Tutorial Realidad Aumentada Para Android con Unity y Vuforia I

Hola a todos, he decidido hacer un pequeño tutorial de Unity + Vuforia en Android para el que este interesado en adentrarse en el mundo de la AR, tengo que adelantar que no soy ningún experto por lo que pido de antemano disculpas por los errores que pueda cometer. De todos modos, aunque la realidad virtual parece algo muy reciente, ya existen multitud de tutoriales para adentrarse en este mundo por lo que os invito a que busquéis estos y profundizar sobre el tema.

Programas que vamos a utilizar

Windows… Si, yo soy usuario de Ubuntu, es rápido, limpio y gratuito pero lamentablemente Vuforia no funciona con Linux. Existen Betas que he probado pero dan cantidad de errores con Unity y para Linux Vuforia de momento no existe.

Visual Studio Code es un IDE que vamos a utilizar para codificar en C# que es el lenguaje que utiliza Unity, es gratuito y nos permitirá utilizarlo para otros lenguajes.

Android Studio este es el entorno de desarrollo para Android, solo usaremos el SDK.

Unity es básicamente un motor de juegos 2D – 3D el cual nos va a servir de base para diseñar y programar nuestra aplicación AR, a fecha de este tutorial la versión a descargar es la Unity 2018.3.1 los requisitos de la misma la tenéis en el enlace. Disponéis de multitud de enlaces donde explican como instalar Unity por lo que este paso lo salto, eso si, es pesado, pero yo marco y descargo TODAS LAS OPCIONES. Entre ellas se encuentran Android y Vuforia incluidos que serán necesarios para crear nuestra aplicación AR, Unity en la versión personal es gratuito hasta 100.000$ que facturéis por vuestras aplicaciones, por lo que tenéis suficiente margen para aprender con el.

Vuforia tal y como dice Wikipedia es un kit de desarrollo de software de realidad aumentada para dispositivos móviles que permite la creación de aplicaciones de realidad aumentada. Al igual que Unity dispone de versión gratuita hasta un número determinado de impresiones o usos más que suficientes para poder aprender con el. Como ya he indicado, Unity ya viene integrado con Vuforia, por lo que hasta este punto no tenéis que descargar nada de él.

JDK Java SE Development Kit lo descargaremos sino lo tenemos instalado mas adelante.

¿Que debemos tener hasta ahora?

Windows, Visual Studio Code, Android Studio y Unity con Vuforia, sencillo ¿no?, supongo que algunos de vosotros habéis podido tener problemas con alguna de las instalaciones, por favor, buscar la información de ser el caso, el objetivo del tutorial es crear una aplicación a modo de introducción a la AR no la de explicar la instalación de los programas necesarios.

Una vez instalado todo abrimos Unity y veremos la siguiente pantalla, EN VUESTRO CASO NO SALDRÁ NINGÚN PROYECTO a no ser que ya uséis Unity:

  • Arriba a la derecha (en rojo) pulsamos New.
  • Se abrirá una nueva pantalla con la configuración inicial de nuestra aplicación.
  • En Project name poner el nombre que queráis, y resto tal y como esta.
  • Pulsamos Create project.

Una vez finalizado el proceso de creación del proyecto aparecerá la ventana del entorno Unity, este proceso puede tardar un tiempo según la capacidad de vuestro equipo.

Ahora debemos ir al menú superior y pulsar Edit->Preferences se abrirá una ventana de preferencias Unity Preferences y a la izquierda pulsamos External Tools, aquí es donde vamos a configurar el Visual Studio Code, JDK y Android.

Lo primero que vamos a buscar va a ser el editor de Visual Studio Code, sino sale por defecto debemos buscarlo pulsando en External Script Editor y la opción Browser, sino lo encuentras o tienes problemas, busca como agregar Visual Studio Code en Unity, existe mucha información para resolver este problema.

A continuación vamos agregar el SDK de Android sino lo ha detectado, pulsamos sobre Browse y lo buscamos, en mi caso se encuentra en C:\Users\Chesco\AppData\Local\Android\sdk una vez encontrada la ruta instalaremos el JDK. Podeis ver una opción que pone Download, pulsa sobre ella y os llevará a la página oficial de Oracle Java SE Development Kit 8u191 y descargamos la versión para windows. Tras la instalación del JDK pulsamos en Browse, en mi caso la ruta es C:\Program Files\Java\jdk1.8.0_191 y cerramos esta ventana.

Ya tenemos hecha una parte, pero todavía quedan unos pasos para terminar la configuración, por defecto Unity viene para compilar las aplicaciones en Ordenador de sobremesa, PC, Linux y Mac, lo que vamos hacer ahora es dejar por defecto para que pueda ejecutarse en dispositivos Android.

En el menú superior pulsamos File -> Build Settings se abrirá una ventana y a la izquierda de esta seleccionamos Android una vez marcado el botón inferior Switch Platform se encontrará habilitado, pulsamos sobre el.

Ahora el logotipo de Unity debería estar sobre Android y cerramos la ventana.

Registrarse en Vuforia

Ya tenemos el entorno de desarrollo configurado y toca registrarse en Vuforia, como he comentado es un kit de desarrollo de AR, existen muchos otros en el mercado, tal y como puede ser ARkit de Apple siendo este posiblemente el más avanzado y completo pero limitado a los dispositivos de esta marca , tenemos ARCore de Google con visos a ser una herramienta muy potente y con todo lo que supone cualquier producto de Google, calidad, facilidad y documentación, pero… A fecha de hoy en mi humilde opinión todas estas virtudes que relato, todavía no están. De todos modos, espero que Google termine integrando en Android Studio la AR y podamos desarrollar en un entorno potente y se convierta en una herramienta indispensable.

Y porque Vuforia, para empezar en el tutorial vamos a utilizar Image Target y crear nuestros objetos virtuales sobre el, este tipo de modelo AR nos va a permitir instalar y ejecutar nuestra aplicación en versiones de Android a partir de la versión 4.1 o Jelly Bean y eso supone para prácticamente cualquier dispositivo, cosa que no podemos realizar con ARCore que pide como mínimo la 7.1 y deja fuera a mas del 50% de dispositivos Android. Por otro lado la documentación de Vuforia es muy extensa así como los ejemplos que podemos encontrar y Vuforia dispone de otros tipos de representar/generar nuestros objetos lo cual nos va a permitir avanzar y experimentar. Bien, empecemos…

Esta es la página oficial de Vuforia en ella encontrareis información sobre el producto, nosotros ahora nos vamos a registrar, para ello iremos a la zona de Developer Portal este va a ser nuestro centro de mandos para Vuforia. Pulsaremos en Register y completaremos toda la información que nos solicitan, nos logueamos y entramos.

A continuación en la pestaña Develop -> License Manager pulsamos sobre
Get Development Key

Se abrirá una ventana Add a free Development License Key y en License Name ponemos el nombre que queramos, en mi caso he puesto TutorialUnityVuforia, aceptamos términos y condiciones y pulsamos Confirm.

Volverá a la pantalla de License Manager y veremos nuestra licencia recién creada, y pulsamos sobre la pestaña Target Manager.

Una vez pulsada la pestaña veremos otra ventana donde vamos a crear nuestra base de datos, no es una base de datos al uso, es donde vamos a guardar la imagen que usaremos como referencia para nuestros objetos virtuales, pulsamos en Add Database.

Una ventana nos pedirá el nombre de nuestra Base de Datos, poner el nombre que queráis, en mi caso TutorialDB, dejamos por defecto marcado Device y pulsamos el botón Create.

En esta imagen aparece ImagenTutorial pero el nombre que le he dado es TutorialDB

Una vez creada la Base de Datos esta aparecerá en la lista de Target Manager en mi caso con el nombre de TutorialDB, en el vuestro el nombre que le hayáis puesto,es el momento de explicaros un poco el funcionamiento de la imagen. Nuestro objeto virtual se sitúa en un espacio REAl y es visionado a través de nuestro dispositivo, este objeto requiere de unas coordenadas de posicionamiento y esa posición nos la brinda la imagen que nosotros ponemos en la Base de Datos haciendo que nuestro objeto virtual aparezca justo cuando el dispositivo, por medio de Vuforia, reconoce esa imagen por una serie de puntos y no otra. En versiones de Android 7.1 o superior estas posiciones pueden ser calculadas por nuestro dispositivo si dispone de Giroscopio por lo que se pueden crear objetos AR sin necesidad de Imagen Target, esto no es una desventaja, ya que podemos usar imágenes para reconocer por ejemplo marcas comerciales y dar usos diferentes a nuestra aplicación.

Para el tutorial voy a emplear mi logotipo, pero podéis usar las imagenes que se brindan en esta página web http://www.brosvision.com/ar-marker-generator/ el resultado vendría a ser el siguiente.

Imagen ejemplo Image Target
Image Target con los puntos que reconocer Vuforia

Como podéis ver en la imagen superior Vuforia a creado una serie de puntos que serán los que detecte para reconocer nuestra Image Target, a la derecha de la imagen hay un apartado que dice Augmentable y tiene cinco estrellas, es muy importante que como mínimo la imagen este puntuada con cuatro estrellas o tendremos problemas para que sea detectada.

Y ahora si, vamos a subir la imagen que hemos preparado, bien sea la que hemos descargado desde http://www.brosvision.com/ar-marker-generator/ o creada por nosotros mismos, como ya he dicho, yo utilizaré mi logotipo.

Bien, situados en la pantalla de Target Manager, donde aparece nuestra Base de Datos, pulsamos sobre el nombre que hemos dado a la misma.

Una vez pulsado se abre una ventana donde podemos añadir la imagen que hemos preparado, pulsamos en el botón Add Target.

Una nueva ventana se abrirá, dejamos por defecto seleccionado Single Image, pulsamos en el botón Browse de File y buscamos la imagen que hemos preparado, en Width escribimos 50 (el tamaño de este apartado para mi es un poco “polémico”, he buscado información y dependiendo del sitio varia, podéis experimentar vosotros con diferentes tamaños pero por ahora dejarlo en 50) en Name podéis dejarlo por defecto o cambiar el nombre y pulsamos Add.

Una vez cargada podemos pulsa sobre el nombre de la imagen para ver en Hide Feactures los puntos generados, sino os convence o da menos de cuatro estrellas borrarla y subir otra y una vez que creamos que es la adecuada marcamos el Check de la imagen y pulsamos Download Database, seleccionamos el Unity Editor y Download. Descargará un archivo Unity que usaremos posteriormerte.

Volvemos a Unity

Ya estamos registrados en Vuforia, hemos creado una Base de Datos, preparado nuestra Image Target y descargado para Unity la Base de Datos, prácticamente tenemos todo configurado en Vuforia y es hora de meter mano a Unity.

En el entorno de Unity lo primero que vamos hacer es eliminar la Main Camera, pulsamos sobre ella, botón derecho y Delete, y vamos agregar la cámara de Vuforia. En el menú superior pinchamos GameObject -> Vuforia Engine -> AR Camera nos saldrá una ventana y pulsamos Import pasados unos segundos aparecerá en la ventana Hierarchy el objeto AR Camera y en la ventana Project se habrá creado una carpeta llamada Vuforia. PULSAR CRTL + S PARA GUARDAR EL PROYECTO

Si seleccionamos ARCamera podemos ver los siguientes componentes en el inspector:

  • Transform
  • Camera
  • Audio Listener
  • Vuforia Behaviour (Script) – Este es el que nos interesa ahora, como podeis ver hay un botón con el nombre Open Vuforia Engine configuration y no se puede seleccionar, vamos arreglar eso.
  • Default Initialization Error Handler (Script)
En amarillo se ve el botón que no podemos pulsar, yo ya lo he configurado, abajo explico como.

Para poder activar la configuración de Vuforia vamos a File -> Build Settings y abajo a la izquierda pulsamos el botón Player Settings. A la derecha como se ve en la imagen de abajo pantalla Inspector veremos una series de configuraciones, ahora iremos al apartado XR Settings y pulsaremos sobre el check de Vuforia Augmente Realit, cerramos la ventana Build Settings y volvemos a seleccionar ARCamera y ahora si que podremos seleccionar el botón Open Vuforia Engine configuration.

Esta es la pantalla de configuración de Vuforia, a la derecha podéis ver en el Inspector VuforiaConfiguration.

Los primeros campos pertenecen a Global podeis ver un botón que pone Add License pulsar sobre el y os llevará a la página de Vuforia loguearos y en la pestaña Develop -> License Manager y pulsar sobre el nombre de la licencia que habéis creado antes, en mi caso era TutorialUnityVuforia. Tras pulsar aparecerá una nueva ventana donde pide que copies el contenido de la ventana, copiarlo y volver a Unity. En el recuadro donde pone App License Key pegar el contenido que habéis copiado.

Agregar Base de Datos

¿Recordáis la base de datos que hemos descargado anteriormente de Vuforia?, es hora de agregarla. Buscar el archivo que habéis descargado, sino lo habéis hecho o no lo encontráis pulsar sobre Add Database y os llevará a la página de las bases de datos creadas y descargarlo. Una vez localizado abrirlo, este abrirá una nueva ventana, tal como esta por defecto, pulsa sobre Import.
PULSAR CRTL + S PARA GUARDAR EL PROYECTO

Ahora si pulsáis sobre ARCamera y volvéis a Open Vuforia Engine configuration vais a poder ver en Databases el nombre de la base de datos agregada. Un poco más abajo veréis una pestaña con el nombre Webcam sino disponéis de ninguna Webcam instalada saldrá con una advertencia podéis quitarla pulsando en Disable Vuforia Engine I si tenéis una Webcam instalada podéis usarla más adelante en todo caso no es necesario tocar nada.

Añadir Image Target

En lo que se refiere a configuración hemos acabado, ahora es momento de agregar elementos a nuestro Unity y el primero va a ser una Image Target, esta imagen que es la que hemos subido a Vuforia servirá de referencia a nuestro modelo en 3D para que se genere. De momento tenemos en nuestra escena un Directonial Light y una ARCamera, en el menú superior pulsamos en GameObject -> Vuforia Engine -> Image de forma automática se agregara nuestra Image Target a la derecha en el Inspector dimensionaremos la imagen en Transform -> Scale y lo dejamos todo a 1.
PULSAR CRTL + S PARA GUARDAR EL PROYECTO

Agregar Objeto 3D

Ahora agregaremos el objeto que deseamos se dibuje en nuestro teléfono cuando apuntemos con el a la Image Target, para simplificar en el tutorial añadiré un cubo pero podéis descargar desde el menú superior Window -> General -> Asset Store el modelo 3D que queráis. Para agregar el objeto 3D con Image Target marcado pulsamos botón derecho 3D Object -> Cube este objeto tendrá que estar integrado en Imaget Target de este modo el cubo se generará cuando apuntemos con el móvil a la Image Target. Dimensionar el cubo y situarlo en una posición donde sea visible.
PULSAR CRTL + S PARA GUARDAR EL PROYECTO

Compilar e Instalar

Es hora de compilar y ver nuestra aplicación funcionando, conectamos con el USB nuestro teléfono al ordenador, en el menú superior pulsamos File -> Build Settings pulsar y aparecerá a la derecha en el Inspector la configuración de Android. Veréis PlayerSettings en Company Name el nombre que queráis, en mi caso he puesto ChescoRed, en Product Name el nombre que vais a dar a vuestra aplicación en mi caso TutorialAR. En Other Settings en Identification -> Package Name debéis poner la ruta del packcage, podéis usar por ejemplo com.tunombre.tutorial en mi caso he usado red.chesco.tutorialar, buscar Android TV Compatibility y aseguraros que la pestaña esta desmarcada. De nuevo en la ventana de Build System donde pone Gradle seleccionamos Internal, en Run Device buscar y seleccionar vuestro teléfono y a continuación pulsar en Build and Run, si todo ha ido bien la aplicación se instalará en vuestro teléfono y usando la Image Target imprimida en una hoja vais a poder disfrutar de vuestra AR.

About the author

chesco

chesco administrator

Deja un comentario