El mundo de la realidad aumentada web ha revolucionado el 2019. Ha crecido de manera espectacular con varias empresas empujando su estandarización, una de estas empresas ha sido Zappar que siempre innova con nuevas características. Hoy les traigo un tutorial que me han pedido bastante: ¿Cómo hacer Realidad Aumentada para web utilizando Zapworks Studio? Es decir, usar Zappar WebAR.
Recuerda esto: Al usar estas plataformas independientes tendrás mayor contryool de tu marca porque no estás sujeto a las reglas que te impone una red social. Además la WebAR viene a masificar el uso de la realidad aumentada pues ya no necesitas una app para experimentarla.
Face 3d Helmet
Primero necesitamos entender cómo funciona ahora la opción de WebAR de zappar. Vamos a nuestra cuenta online y te verás que todo se mantiene igual en el proceso de trabajo dentro de Zapworks. Lo que varía será en la elección del trigger. Además del típico zapcode que funciona para apps, también tendremos la opción de elegir el WebAR QR Code que te servirá para colocarlo por todos lados, pues un QR Code es más conocido que un zapcode.
Para que funcione desde un iPhone tienes que apuntar la cámara hacia el QR, si tienes android debes usar una app específica para leer QR. Entramos a los triggers, tendremos una función interesante que es: “cambiar el color a dicho marcador y poder descargarlo tanto en PNG como SVG”.
Ahora vamos a Zapworks Studio, te recomiendo que lo descargues con tu cuenta free. Vamos a trabajar con efectos de realidad aumentada relacionados al face tracking. Por ello en root usaremos el tracking llamado “ face group”. Ese elemento nos ofrece varios puntos de referencia del rostro para trabajar.
Luego iremos hacia «symbol definitions» y usaremos «head mask» para un mejor tracking cuando queremos agregar objetos alrededor del rostro como cascos, entre otras cosas. Después agregaremos el “head mask” dentro de la referencia del rostro “origin”. Zapworks también permite conectarse con Sketchafab para utilizar objetos 3d de su galería.
Lo que buscaré ahora es helmets, usaremos el de Loki. Esperamos que cargue el objeto, luego aparecerá la opción de revisar los materiales que se importarán, así como la animation, escala si existiera.
El loki helmet aparecerá en “symbol definitions”, lo arrastraremos hacia “origin” tambien. Lo que haremos ahora es ajustar su escala para que quede más realista. Si dan cuenta, el objeto se ve oscuro, esto es por la importación del material. Hay formas para “arreglar esto”, una de ellas es crear una luz específica, por ello vamos a “root”, luego a light y usaremos “directional light”. Le aumento la intensidad y también le cambiaremos el color de la luz.
Seguiremos ajustando hasta tener un resultado decente. Ahora vamos a publicarlo para que probemos la función webAR, detrás de cámara seguí ajustando la escala para que se vea mejor. Al publicar elegiremos el trigger que estará relacionado nuestro trabajo. En este caso usaremos el “webAR”. Vamos a publicarlo.
Face Paint
Ahora haremos un pequeño ejemplo sobre otro tracking. Este se llama face paint y como su nombre lo indica es agregar pintura virtual en nuestro rostro. Usaremos la plantilla con el mismo nombre.
En Zapworks vemos que ya creado el face paint, esto se obtiene fácilmente dentro del tracking listo para agregar los materiales. En este caso el material agregado es uno que se llama zappafacepaint. Para lograr una trabajo bueno es necesario tener una imagen de referencia. esta es la imagen que proporciona zappar y la podemos usar dentro de photoshop para hacer nuestros próximos diseños.
El trabajo es similar a los otros creados dentro de spark AR o lens studio. pintaremos las áreas que deseamos maquillar para que tengan un color específico. El resultado se agrega en materiales y quedaría de esta manera, tal como lo ves en zapworks. Ahora podemos verlo desde webAR.
¿Que te parecieron estos dos ejemplos simples? El face tracking es una tendencia mundial que está generando bastantes adeptos… te dejo otra plataforma en la cual puedes trabajar y tener una dependencia que solo la WebAR puede generar. Mi pronostico para el 2020 es que será el año del WebAR en su gran magnitud.
Patreon!
Por supuesto los archivos de este tutorial los dejo en mi Patreon. Si decides apoyarme tendrás acceso a todos mis archivos de trabajo y claro contribuyes a mantener mi web y mi proyecto de realidad aumentada.
