En este es un nuevo video de webAR, hablaremos sobre ARJS y su capacidad de generar experiencias con Location based y el clásico Marcador (marker). Todo esto lo trabajaremos en la nueva plataforma llamada Studio que facilita la creación inicial de la experiencia. Interesantes propuestas de trabajo de la mano con ARJS Studio.
Hace unas semanas hablamos sobre lo nuevo de ARJS 3. El interesante image tracking NFT que permite usar imagenes a color como marcadores; y faltó conversar sobre el location based que permite crear experiencias de realidad aumentada en puntos específicos del mundo permitiendo generar proyectos solo para una zona, localidad, punto turístico y un laargo etc.
Me pareció interesante poder también hablar de ARJS Studio, la nueva plataforma para crear experiencias iniciales en poco minutos y claro open source. Esto puede ser trabajado sin saber inicialmente código. Este es el link que debes ingresar.
En esta pantalla veremos dos opciones: location based y marker-based. Comencemos por la primera: en esta pantalla nos dan un breve resumen sobre la experiencia.
ARjs Studio – Location based
Existe un post donde explican todo el detalle de trabajo. En location-based nos piden agregar latitud y longitud del sitio que vamos a experimentar.
Para saber esta información utilizo Google Maps, busquemos la torre eiffel. Si se dan cuenta en la URL aparece la información que necesitamos. Esta información la copiaremos para luego utilizarlo, fíjate que existe una coma dividiendo latitud y longitud respectivamente. En el mapa ya marcará el número 1 dentro del mapa. Se pueden agregar varios puntos en el mapa, pero es preferible comenzar de a pocos.
Respecto a los archivos que se pueden utilizar son 3: objetos 3D, imagen y video. Agregaremos un archivo GLTF. Tus archivos exportados en blender funcionan correctamente. Este es mi archivo de mi anterior video sobre la digitalización 3D a partir de una sola foto. Trata que los archivos no pesen mucho para que cargue más rápido la experiencia aumentada. Subimos el archivo desde este botón.
Una vez tengamos listo todo, podemos publicarlo directamente a Github o descargar el archivo y publicarlo en tu página web. Solo recuerda que tu página web debe utilizar HTTPS. En este caso utilizaremos la segunda opción y subiremos los archivos en glitch.
Estos son los archivos un index.html y una carpeta assets donde está el objeto 3d. Utiliza cualquier editor de texto para ver el contenido del HTML. En esta primera parte veremos las librerías. En este punto estaremos viendo el renderizado. La selección del archivo 3d y luego las propiedades de dicho objeto y claro las coordenadas.
Abrimos Glitch.com, creamos un nuevo proyecto. Limpiamos algunos elementos que no utilizaremos. En index.html pegaremos las líneas de código y luego le podemos dar formato. Ahora necesitamos subir nuestro archivo 3d. En esta carpeta asset, cuando se haya cargado, copiamos su URL. Hacemos el cambio de ruta donde está alojado el archivo, de esta manera podemos modificar su escala y claro podemos cambiar las coordenadas del lugar.
He utilizado chrome y mi smartphone android. He cambiado las coordenadas porque claro, no estoy en la torre Eiffel. La experiencia tiembla posiblemente por la poca luz. Seguiré haciendo experimentos en ese punto. Ahora haremos otro ejemplo con Marker Based.
ARjs Studio – Marker Based
Utilizaremos un video para este ejemplo. Pexels es una plataforma para descargar imágenes y videos. Este archivo está genial, lo descargamos y agradecemos a Taryn Elliott.
Para trabajar con marker-based necesitamos un marcador blanco y negro por lo general. Puedes crear tu propio marcador. En este caso usaremos el mismo ejemplo en la plataforma, imprímelo. Bueno agregamos el video y luego descargamos nuestro proyecto.
Haremos el mismo proceso que hicimos anteriormente, dentro del código se ve claramente cómo se está llamando al video y lineas más abajo se menciona el marcador. En la carpeta asset estará ambos archivos, creamos un proyecto en Glitch.
Copiamos el código hacia Glitch y formateamos las líneas. Las primeras líneas estamos llamando a la librerías, luego veremos cómo se conecta el video bajo el proceso AFRAME. Más abajo estará la mención al video y luego al marcador. Vamos a subir estos archivos en la carpeta assets. Igual que en el proceso anterior vamos a cambiar las rutas.
Patreon
Si desear apoyarme para mantener mi sitio web y descargar los archivos de trabajo, puedes hacerlo accediendo a mi patreon.
