Facebook AR Studio #DealWithIt

Con este tutorial de AR Studio aprenderás a:

  • Hacer que un texto aparezca y desaparezca al tocar la pantalla

  • Cambiar el color de la imagen al tocar la pantalla

  • Rotar un objeto en una dirección distinta al rostro, para que siempre mire hacia la cámara.

  • Insertar sonidos y activarlos al tocar la pantalla

Puedes probar el filtro y descargar los archivos dando click en los botones al final del tutorial.



Los invitamos a ver el video, pero si son más ávidos de la lectura a continuación viene la versión en texto, recuerden que pueden descargar los archivos y en la liga que aparece más abajo.

Seguimos jugando con AR Studio de Facebook, ya sabemos que este filtro es fabuloso para hacer que una máscara se pegue tu rostro y que gire conforme tú giras la cara, pero ¿Qué pasa cuando quieres que algo se quede pegado tu cara pero que siempre apunte hacia la cámara sin importar a donde gire tu rostro? Al principio nos parecía imposible lograrlo pero descubrimos cómo hacerlo.

Para este filtro la primera prueba que hicimos incluía lentes en tercera dimensión pero, aunque el efecto lucía interesante, le hacía falta algo no tenía esa calidad gifesca… si lo siento gifesca, se dice gif no yif y por cierto… #CalidadGifesca así que para lograr poner unos lentes pixelados y que se vieran como un meme tuvimos que hacer un poco de ingeniería inversa para descubrir cómo funciona AR Studio y hacer que hiciera lo que nosotros queremos. Recuerden que pueden descargar gratis todos los archivos al final de este artículo.

Una vez que descargan su archivo de vídeo parecerles una carpeta con el nombre #DealWithIt adentro está incluido el proyecto de Facebook AR studio, la licencia en español y en inglés para quienes quieran utilizarlo. Es una licencia de creative commons, están los dientes en tercera dimensión por si quieren utilizarlos en su propio proyecto, el script o el código que utilizamos y algunas texturas. Vamos a abrir el proyecto y lo primero que van a notar es que este proyecto tiene muchos menos elementos que el que hicimos la vez pasado el #TacosBeforeVatos antes de comenzar vamos a darle “run” a el código para que puedan ver qué es lo que va a ser este efecto.

Al principio va a sacar un mensaje diciendo que tienes que tocar la pantalla y cuando toque esa pantalla se activa el efecto, al final se reinicia automáticamente. Podríamos hacerlo de nuevo cada vez que yo toqué la pantalla se va a reiniciar. Lo primero que hicimos fue meter en este proyecto un facetracker para poder rastrear el rostro y ver si gira a la izquierda o derecha, los lentes de DW2D son los lentes totalmente planos y es una animación. En las texturas la van a poder encontrar, son cinco frames para que los lentes se vean como que están girando a la izquierda o la derecha.

Quisimos quitarle el efecto de la tercera dimensión y tratar de programar que los lentes se vieran con la patita corta cuando está volteando un poquito, con la pata larga cuando volteo mucho y de hecho sin las patas cuando estoy viendo prácticamente de frente.

Metimos una malla para el rostro siguiendo las recomendaciones de Chris Barbour, quien es uno de los creadores que incluidos en el grupo de Facebook llamado AR Studio Creatos Discussion Group, dentro de este grupo Chris Barbour nos recomendó utilizar un filtro para mejorar la piel del rostro y fue una excelente recomendación. En el proyecto de #TacosBeforeVatos la pared era una imagen a la cual más o menos tratamos de ajustar el tamaño de la pantalla, sin embargo, Omar Juárez nos dijo que hay un problema con esa técnica, especialmente en el iPhone X, dado que el software no alcanza a reconocer exactamente la forma que tiene la pantalla y se mostraban mal los elementos por eso en esta ocasión lo metimos a través de un canvas en dos dimensiones.

Cuando metimos la imagen de la pared azul nosotros le estábamos diciendo a AR Studio de qué tamaño queríamos que colocar esa pared, sin embargo, al crear un lienzo en dos dimensiones AR Studio nos pregunta qué tamaño queremos que tenga esto. Se le puede dar el tamaño de la pantalla completa o incluso del área donde es sensible al toque.

El siguiente elemento es un rectángulo que se llama pared, va a tener un modo de relleno para toda la pantalla, le podemos poner encaje, se estire, que se estire nada más a la altura o que se estire al ancho, en este caso le estoy diciendo que queremos que tiene toda la pantalla se llena la pantalla completa con un material blanco.

A los materiales yo les puedo poner distintos modos de transparencia, en este caso el material blanco tiene un modo de transferencia de pintura para rostro eso hace que se vea como si yo estuviera pintando encima de la cara y luego tenemos un segundo lienzo, dentro de este metimos el texto de “DEAL WITH IT” y ahora la gran ventaja es que yo puedo escoger cualquier otro tamaño de pantalla y automáticamente el texto de “DEAL WITH IT” se va a ir centrando o se va a ir extendiendo en el tamaño de la pantalla como yo escoja ahora bien el caso que nos reportó Omar Juárez es con el iPhone X.

Con el iPhone X de hecho tuvimos un par de problemas al colocar el canvas 2D. Originalmente teníamos coordenadas X=0 e Y=0 la escala normal en tamaño 1 ahora esto se supone que automáticamente debería de centrar y rellenar el lienzo y llenar toda la pantalla. Pareciera que lo hace pero en la parte de abajo hay un espacio que no alcanzó a estar cubierto del todo y este es un error de AR Studio de hecho si lo vemos aquí en la visión en 3D podemos ver que el recuadro no alcanzó a llegar completamente en la parte de abajo y tampoco alcanza a cubrir completamente la parte de arriba.

La ventaja es que con un poco de imaginación podemos hacer que la escala en vez de ser “1” se incremente a 1.3 de ancho y 1.3 de alto y vamos a hacer que vaya un poco más a la izquierda con menos 100 píxeles a la izquierda y menos 100 píxeles hacia abajo y de esta manera ya está completamente cubierta nuestra imagen y parece ser que todo va a estar bien vamos a revisar nuevamente con otros tamaños de pantalla y pareciera ser en todos saben bien esta imagen.

Muchísimas gracias a Omar Juárez y Chris Barbour por las recomendaciones. La recomendación que nos hizo Chris Barbour fue meterle al rostro un poco de suavizado de las arrugas para que nos viéramos un poco más jóvenes y lindos, entonces lo único que hay que hacer es insertar dentro del rastreador una una malla para el rostro (face mesh) y meterle un material “skin”. Le puedo poner que la piel se vea más suave o tersa, que los ojos sean un poco más blancos y también blanquear los dientes. Por default los porcentajes están en 70% pero para no exagerar tanto el filtro los vamos a bajar a 50%, si ustedes quieren, pueden subir los porcentajes para que se vean con la piel mucho más perfecta.

Si recuerdan en el video pasado les mencioné que utilizando las capas podíamos hacer algunos efectos interesantes en este caso tenemos dos capas en las cuales están todos nuestros elementos porque los separamos en capas distintas. En la capa de arriba tengo los lentes y el texto. El problema de tener la pantalla blanca a la misma altura que los lentes y que el texto es que se estorban unos a otros si lo estuviéramos en la misma capa.

Si tomo los lentes y en vez de ponerlos en la capa 1 los pongo en la capa 0 alcanzan a ver cómo cuando voltea se desaparecen un poco los lentes.

En la parte de abajo de los activos tenemos el script o código y además tenemos un sonido, la canción de “Trapper” vamos a irnos al código de una vez para que veamos cómo funciona.

El código es mucho más cordial la vez pasada eran 600 líneas de código, ahora nada más son 60 y lo primero que tenemos es declarada nuestra escena, las instrucciones para que salga el mensaje con el que le vamos a pedir al usuario que toque la pantalla para ver la siguiente parte del efecto. Vamos a cargar nuestras texturas, materiales, animación, los elementos reactivos, el toque y en esta ocasión también vamos a meter audio.

Vamos a declarar algunas constantes nuestras constantes:

  • Lentes que es la textura de los lentes.
  • La opacidad que vamos a manejar con la el material de docentes.
  • Los lentes en objeto como tal (vamos a pedirle al código que los mueva de repente para arriba y para abajo)
  • El texto the “DEAL WITH IT”
  • El material blanco que necesitamos que aparezca y desaparezca
  • La música que nosotros vamos a estar activando

Cuando empieza el efecto los lentes están transparentes, no se ve tampoco la pared blanca ni el texto… Ahora, sí han estado tomando algunos de los tutoriales de facebook tradicionalmente cuando se rastrea un rostro la transformación de la cámara es X, Y o Z pero para este ejercicio lo que vamos a hacer no es rastrear nada más si la cara está arriba, abajo, izquierda, derecha, atrás o adelante sino que lo que vamos a estar rastreando es la rotación del eje Y que es izquierda a derecha y la rotación del eje X que es arriba y abajo. Si la cara rota 20 grados a la derecha yo necesito que los lentes roten 20 grados a la izquierda, es decir, contrarrestarlo para que los lentes siempre se vean apuntando hacia la cámara.

Le metimos un driver de animación de 2.4 segundos, ese es el tiempo en el que queremos que los lentes aterricen, desde que empiezan a bajar, hasta que aterrizan en la nariz van a tardar 2.4 segundos. El tiempo que va a durar nuestra música son diez segundos para que después se pueda reiniciar el efecto. A los lentes los vamos a hacer que se muevan desde 22.4 Y hacia arriba a 2.4 Y hacia abajo es decir que se salgan de la pantalla y luego bajén.

Ahora sí ahora sí vamos a empezar con el código:

Lo primero que yo le voy a pedir a facebook el estudio es que mis dientes se transformen en su rotación de Y, que su rotación se reactiva según lo que haya en mi variable rotaY (la rotación Y de la cara) así que se van a multiplicar por menos uno. Si mi cara rota 20 grados a la derecha mis lentes van a rotar menos 20 grados a la derecha (20 grados a la izquierda) y lo mismo en el eje X si mi cara rota 20 grados en el eje x lo voy a multiplicar por menos uno y los lentes van a rotar en el sentido contrario.

Ahora viene lo feo… Estamos a punto de ver trigonometría. Necesitamos encontrar la forma de calcular que cuando la cara esté volteando totalmente hacia la izquierda eso sea equivalente al frame 5 de los lentes y cuando esté volteando totalmente a la derecha sea equivalente al frame 1 lo primero que hicimos fue irnos a analizar qué es lo que pasa cuando el rostro se está moviendo.

Cuando el rostro se está moviendo la rotación Y varía y el valor máximo al que llega es de 45, o al menos esa fue la impresión que nos dió la primera vez que lo vimos, nosotros redujimos que el rostro puede girar máximo 45 grados a la izquierda y 45 grados a la derecha lo cual serían 90 grados si yo calculo 90 grados tendría que dividir 90 entre 5 frames y son 18. Eso quiere decir que cada grados ya estaría poniendo un nuevo frame. Lo primero que habíamos hecho originalmente no era multiplicar si no es que nosotros estábamos poniendo dividir la cantidad de grados entre 18 esto nos hacía pensar que si yo tenía un rango de 90 grados al momento de dividir esos grados entre 18 me iba a dar los cinco frames que tenía la animación.

Originalmente si encendemos el código podemos ver que los lentes en realidad no giran sino que se cargan el último frame ¿Y eso por qué sucedió?

Estuvimos unas horas haciendo cálculos entre sí eran 45 grados o tal vez 90 grados o tal vez 180 grados completos. Hicimos muchos muchos cálculos distintos tratando de adivinar cómo estaba funcionando AR Studio hasta que realmente se nos encendió el foco… Si ustedes recuerdan un poco de sus clases del secundario de preparatoria recordarán de trigonometría que hay una cosa que se llaman radianes.

Un radian equivale a 57.29 grados y la cuestión con los radianes es que los ingenieros realmente les gusta mucho utilizar radianes. Para ingeniería es mucho más fácil realizar cálculos con radianes que con grados de manera que lo único que tuvimos que hacer fue calcular… Si Facebook está tomando de menos uno a uno radianes solamente tenemos dos valores de manera que nuestro frames nuestro cinco cuadros de animación nos vamos a dividir entre entre dos nos da 2.5 y por eso vamos a múltiplecar por 2.5 pero no queremos multiplicar -1 por 2.5 y uno por 2.5, va a ser más fácil si a nuestro valor de la rotación Y que vienen radianes… le sumamos uno de manera que en vez de ir de -1 a 1 va a ir de 0 a 2.

Le vamos a solicitar a Facebook que cuando toqué la pantalla el driver se va a reiniciar es decir mi contador se va a reiniciar. El sonido si es que ya lo tenía sonando se va a pagar y le voy a pedir nuevamente que reinicie la música. Cuando toque la pantalla el reseter me cuenta 10 segundos para permitir que suene la música durante 10 segundos y le voy a encender la opacidad a los lentes. Van a aparecer los lentes, va a desaparecer la pared y el texto blancos… Si es que yo ya los tenía activados y vuelvo a apretar la pantalla se van a desaparecer de nuevo para reiniciar todo y los lentes se van a transformar en su coordenada Y según driver. Driver recordemos que es 22.4 a 2.4 y sampler que es durante 3 segundos en 3 segundos los lentes van a bajar. Una vez que los lentes hayan bajado por completo es decir cuando ya estén tocando la nariz, se activa la pantalla blanca y el texto.

Finalmente, cuando la música termine voy a volver a desaparecer el texto y la pared a detener la música y apagar los lentes para que todo esté listo para reiniciar nuevamente.

En la versión final de este filtro que diseñamos para MercaTecnia únicamente utilizamos los lentes planos, pero si a ustedes les interesa tener los lentes en tercera dimensión para su proyecto los pueden descargar en la liga que aparece más abajo… A cambio solamente les pedimos por favor, denle me gusta este video, compártanlo con sus amigos, suscríbanse si es que todavía no lo han hecho y si tienen cualquier duda por favor dejen a los comentarios después de todo recuerden que no existen preguntas tontas solamente tontos que no preguntan.

Descargas y ligas de interés:

Descarga los archivos
Prueba el filtro con tu celular

Leave A Comment

// //