Hace unos días me enteré de las buenas noticias para la realidad aumentada en web. ARJS ahora está en su versión 3 y agrega nuevos elementos que se trabajarán de la mano con la plataforma A-frame. Me refiero a la capacidad de crear experiencias inmersivas con ARJS image tracking. Durante estos minutos hablaremos al respecto y haremos un breve recorrido sobre los ejemplos.
En la noticia aprendimos cómo este nuevo código se puede emplear para trabajar fácilmente. En esta página también indican las herramientas y plataformas que podemos utilizar para crear realidad aumentada; y por supuesto sus ejemplos para iniciar.
En el archivo codepen veremos primero la librería “aframe”, luego existirá el código de estilo, luego aparecerá el script del “aframe ar nft”. Este es el nuevo script que conectará toda la experiencia. Líneas más abajo aparecerá el mensaje de “loading” para luego conectar el elemento tipo “NFT” que será la información del tracker llamado “TREX”. Por último veremos el archivo 3d gltf con sus propiedades como escala, posición, entre otros.
Tutorial ARJS Image Tracking
Más adelante crearemos el proyecto desde cero en Glitch. Ya usé esta plataforma en otro proyecto de WebAR. Está siendo mi favorita. Esta es una plataforma para desarrollar experiencias web y es capaz de publicarlas sin problemas. Además es altamente colaborativa. Muchas empresas y organismos educativos están utilizándola.
Otra página que debes visitar para este tutorial es ir hacia al sitio web oficial de ARJS. Aquí encontraremos la información completa de esta librería libre y open source. El proyecto se inicio gracias a Jerome Etienne. Entre los beneficios y requerimientos que existen al usar ARJS son:
- Su capacidad ser difundirse entre millones de dispositivos sin necesidad de descargar aplicaciones.
- Librería que se usará para crear experiencias image tracking + location based AR.
- Tu smartphone soporte webgl y webrtc.
- Se recomienda usar el navegador Chrome.
- Si trabajas con el location based, tu celular debe tener GPS.
- Url siempre debe ser “https”.
Ya en glitch abriremos o crearemos un archivo. En la plataforma pegaremos dicho código. Como mencioné anteriormente, seguiremos la misma estructura de código. En la entidad se conectará el objeto 3d GLTF que también puede funcionar GLB. En esta entidad se puede manipular la escala y posición del objeto.
NFT Marker
Otro punto importante de esta experiencia es usar el marcador correcto. Ya en este caso ARJS tiene un proceso para utilizar imágenes correctas. Para obtenerlo se debe ingresar a NFT marker creator. Esta solución permite subir una imagen para que el sistema la convierta en diferentes archivos que serán leídos dentro de la experiencia de realidad aumentada en web. Existen varias recomendaciones para crear un correcto marcador:
- La imagen debe tener complejidad visual
- Debe poseer una alta resolución
- Se debe usar el marcador en físico. Esto para evitar el brillo de las pantallas.
Subiremos una imagen como este T REX . Le damos clic a generar y esperamos unos minutos. Ahí veremos 3 archivos generados: el Trex.fset3 | trex.iset | trex.fset. Recuerda que debes subir los 3 elementos hacia una carpeta de tu página web y copiar la URL de dicha carpeta.
Video – Image tracking
Ahora vamos a trabajar en un ejemplo más. Para hacer eso debemos descargar la carpeta oficial ARJS. Te recomiendo que leas el changelog para saber que elementos han cambiado o se han agregado.
Dentro de los ejemplos de AFRAME. Iremos a image tracking y entramos “NFT video”. Vamos a copiar el código para trabajarlo en Glitch. Aparecen varias advertencias. Muchas de estas cosas se solucionan dándole formato al archivo.
Lo que haremos ahora es copiar la URL o ruta de acceso de nuestro marcador TREX. Reemplazaremos la carpeta pinball por este que les mencioné. Cerca a esta línea de código también veremos información de las dimensiones, la posición y el threshold.
Vamos a cambiar el archivo mp4. Para esto subiremos nuestro propio video y lo agregaremos en assets. Copiaremos su ruta… ahora reemplazaremos el SRC
Patreon
Si desear apoyarme para mantener mi sitio web y descargar los archivos de trabajo de ARJS Image Tracking, puedes hacerlo accediendo a mi patreon.
