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
- Google sdk Android Studio
- Visual studio Code (opcional, con Monodevelop se puede trabajar… o no…)
(No recomiendo la última versión por no estar tan probada como esta y por no ser la usada en el tutorial)
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.
18 commentarios
Jhocelynn · 13 diciembre, 2018 a las 6:44 pm
Super gracias!!!
neodreamer · 13 diciembre, 2018 a las 7:47 pm
Me alegro de que sirva a alguien 😉
Samuel Díaz · 15 enero, 2019 a las 2:12 pm
https://m.youtube.com/watch?v=ZgIvoZe_TvA en este link está la explicación pero sin el uso de los marcadores, pero no logro enlazar el Script con los el marcador
neodreamer · 15 enero, 2019 a las 3:13 pm
Desde que tenga un hueco lo intento y te respondo si es que no lo consigues tu antes 😉
Samuel Díaz · 15 enero, 2019 a las 2:53 pm
Gracias, espero tu respuesta pues he intentado de todo!☹️
Samuel · 15 enero, 2019 a las 2:57 pm
Excelente, sabes como incorporar botones virtuales con marcadores para incorporar URL en la reproducción de videos de la plataforma YouTube?
neodreamer · 15 enero, 2019 a las 3:00 pm
No estoy seguro, imagino que será crear canvas con imagen que pille eventos onclick y que estos abran algún navegador, pero no estoy seguro ya que haría falta embeber (suena raro) un navegador para esos vídeos o buscar un asset que ya lo haga. No he probado
neodreamer · 15 enero, 2019 a las 3:04 pm
Seguro que ya alguien ha hecho algún asset para cargar vídeos por URL…
Edwin Forero · 30 julio, 2019 a las 6:49 am
Muchas gracias, muy buena explicación me funciono perfecto, tengo una duda, como podría personalizar mi aplicación, es decir, como puedo poner el logo de mi proyecto en vez de que se vea el logo de unity en el archivo apk?
Gracias!!
neodreamer · 30 julio, 2019 a las 10:03 am
Buenas, si te refieres al icono es en player settings, donde pones el nombre del APK, compañía y las imágenes de iconos. Si lo que quieres es el splash screen de cuando carga el juego, no estoy seguro si se puede quitar en la versión gratis de unity, pero si puedes poner el logo de tu proyecto a continuación. Un saludo
Edwin Forero · 27 septiembre, 2019 a las 3:52 am
Gracias por tu respuesta, si logre hacer lo que quería!!!
Pilar · 26 septiembre, 2019 a las 4:09 am
Hola Pero como obtengo el target, una vez creado en vuforia, se imprime de forma normal
Quien puede dar una ayuda con este inconveniente
Gracias
neodreamer · 26 septiembre, 2019 a las 6:39 am
Claro, yo en mi caso use una carta de un juego porque tiene buen contraste. La digitalicé sacando foto con el movil y la puse en unity. Pero puedes hacerlo a la inversa, poner en unity una imagen y después inprimirla
SamuelD · 12 abril, 2020 a las 3:58 am
Gracias por el artículo, sabes como puedo actualizar mi proyecto. Tengo cerca de 15 imagetarget, pero necesito cambiar algunas y aumentar a unas 30 las imagetarget, con la base de datos de Vuforia no tengo problemas, el problema es ¿como actualizar las Imagetarget en el proyecto de Unity correctamente sin dañarlo?
neodreamer · 12 abril, 2020 a las 10:02 am
No he probado, lo siento. Lo investigaré a ver si puedo decirte algo. Gracias
LUIS ALVES · 20 junio, 2020 a las 12:13 pm
He leido tu tutorial y he mirado algunos vídeos en Youtube. Al registrarme en Vuforia me da constantemente problemas. No me deja subir nada más que un Target y no me permite descargar la Base de Datos.
Estoy haciendo algo mal??
neodreamer · 20 junio, 2020 a las 12:17 pm
Hola Luis, gracias por haber entrado en el blog. Tendría que mirar lo que te está pasando. Vuforia ha cambiado varias cosas desde que realicé el tutorial y no he tenido tiempo de repetirlo con los nuevos pasos. Además, si es posible que solo te permita un target ya que creo que tiene una versión gratis y una de pago. Quizá la gratuita solo te ofrezca un target. Lo que si es raro es la base de datos. Lo voy a probar este fin de semana y te comento algo por aquí. Un saludo
neodreamer · 20 junio, 2020 a las 12:27 pm
Hola Luis, acabo de probar a subir un nuevo target y aunque tarda un poco lo que es el procesado en si que te indica con las estrellas si cumple los requisitos de imagen para usar, cuando se acaba de subir funciona bien. Además he buscado en la web de vuforia y la versión gratuita para pruebas y desarrollo acepta hasta 10 targets por lo que no debería darte problemas. Si sigue dándote problemas, quizá deberías contactar con ellos porque a mi no me está dando ninguno de los fallos de subida de target o bajada de base de datos y no se que decirte para ayudarte. Seguiré mirando por si veo que alguien más le pasa o alguna solución. Un saludo