La compañia 8th wall se ha actualizado con su version 11 y ahora posee entre muchas otras funciones, como por ejemplo la esperada función de image target. Es decir, podemos utilizar imágenes como marcador para activar la realidad aumentada. Vamos a ver de qué se trata. Vamos a conocer a detalle esta interesante función.
Concepto: 8th Wall es un framework que nos permite trabajar gracias a su SDK, solución para prototipar y su librería para ejecutar en navegadores de dispositivos. Este último punto se refiere a WebAR, que es la capacidad de superponer elementos a través de Chrome (u otros navegadores confirmados) utilizando javascript y llamadas especiales a servidores. Antes existía AR.js como la única librería estable; pero ahora con la octava pared lograremos realizar resultados de calidad.
Javascript de 8th Wall se une con otras librerías llamadas A-frame o Threejs. Yo suelo trabajar con el primero.
Image Target es la esperada función de 8th wall, pero no es algo nuevo, en realidad esta característica es necesaria y fundamental. En los inicios de la realidad aumentada web con flash utilizar un marcador blanco y negro; o de color; era el paso necesario para activarla; ahora con nuevas tecnologías; la realidad aumentada se posa más en planos, superficies y orientado en el espacio. Esto no quiere decir que lo nuevo suprime a lo antiguo. Necesitamos de todas las funciones para trabajar con libertad.
Tutorial – 8th Wall Image Target
Lo primero que debemos hacer es entrar al github de 8th wall, específicamente en la opción web, verás que hay nuevos archivos y documentación al respecto, por ejemplo puedo hablar que ahora 8th wall soporta babylon. js. Ahora son 3 librerías asociadas.
Para iniciar este ejemplo vamos a utilizar la carpeta getting started. En esa carpeta encontrarás la información necesaria para hacer tus primeros hello world. Nosotros necesitamos la carpeta relacionada a-frame y a image target. Aquí encontraremos la información como el archivos 3D en glb, los archivos index y javascript. Yo te recomiendo que descargues todos la carpeta de github relacionada a web.
Ahora necesitamos trabajar con la plataforma 8th wall. Es necesario crear tu cuenta para poder realizar los proyectos necesarios. Como sabrás 8th wall tiene 3 formas de trabajo, AR Camera, Web Developer y Proyecto App. Nosotros vamos a concentrarnos en trabajar en formato WEB.
En Web Developer vamos a iniciar los procesos correspondientes. Debemos crear tu proyecto dedicado a este ejemplo. Al crear tu proyecto podrás ver que se ha generado un app key que lo usaremos más adelante. Ten en cuenta que debemos generar autorizaciones para nuestros dispositivos. Ahora se realiza esto con el código QR que te dará autorización. Ten en cuenta que este proceso sirve para crear proyectos internos no comerciales, si quieres una visión comercial debes subir el nivel de tu cuenta.
En la carpeta XR AFRAME – image target existe el archivo index, lo vamos abrir con cualquier editor de texto. Yo uso Sublime Text. El código que vamos a ver tiene componentes simples. Aquí agregaremos el app key que nos permitirá hacer funcionar el proyecto interno.
Agregando archivos 3D – 8th Wall Image Target
El ejemplo en cuestión que voy a utilizar es el archivo FOX que compré meses atrás en CGTRADER. Ese formato lo convertí en Vectary en formato glb o gltf. Para comprender como se ve dicho elemento en tu entorno de realidad aumentada podemos utilizar visualizadores. Existe un gltf viewer para conocer la estructura
Vamos a regresar al Sublime Text para cambiar el archivo «frame.glb» por «fox.glb», previamente ese archivo ya lo agregué en la carpeta en cuestión. Una vez realizado esa acción, necesitamos subir los archivos de la carpeta a un servidor necesario para proyectar la realidad aumentada. Recuerda que la URL de este ejemplo debe comenzar con HTTPS. Ese es un requisito de seguridad que te pedirá chrome o safari.
¿Qué te pareció este ejemplo? Se puede agregar imágenes, videos y otros efectos para generar realidad aumentada. Espero que te haya gustado.
