Hoy tenemos la segunda parte de mi video sobre skin color tone. En la primera parte les enseñé a capturar el color de tu rostro para ser aplicado como máscara para tus experiencias. Esta vez trabajaremos para agregar unos ojos y boca al estilo cartoon que seguirán nuestro movimiento real para lograr un filtro divertido. Con esta técnica podremos crear personajes distintos. Ya sabes que todos mis archivos los dejo en mi Patreon.

Si quieres ver la primera parte este es el vídeo:

Tutorial paso a paso: Efecto virtual skin color tone

  • Antes de continuar te recomiendo ver el video anterior, nos quedamos en la configuración inicial del efecto. Gracias al comentario de un usuario que me hizo ver algunos patch que han estado sueltos. En Patreon dejaré el archivo actualizado. 
  • Lo que haremos ahora es agregar nuestros ojos al estilo cartoon. Creamos un plano, tenemos que ajustar su escala y agregar un nuevo material. Acto seguido, arrastramos el face tracker hacia el patch editor. Ahora llamaremos al eyelid, me gusta utilizar este patch porque tiene varias opciones. En este tutorial, vamos a mostrar varios patches relacionados al rostro, no nos vamos a quedar solo con una.
  • Conectamos el position del primer plano y lo conectamos con left eye center. El plano se hundió y no se ve tan bien, para ordenar la escena y mover libremente los planos, usaremos un null object. El plano debe estar dentro del null object y conectaremos su position para mover el plano sin problemas.
  • Ahora agregaremos la textura de eyes ya va tomando forma. Hagamos algunos ajustes al plano.
  • Como nos falta el otro ojo, realizaremos el mismo proceso. Para mejor orden, le pondremos nombres adecuados a los planos: eye 1 y eye 2. El null object de este nuevo eye será conectado con el right eye center. No te olvides de hacer ajustes a este plano, podemos quitar por un momento el face mesh para posicionar bien los ojos.
  • Ahora vamos a importar nuestros iris, para eso iremos hacia la librería y utilizamos la esfera primitiva. Este objeto 3D estará dentro de la jerarquía face. Como sabes, estos objetos ya vienen con un material, le debemos cambiar de color, utilizaré el color negro. Para posicionarlo correctamente llamaremos al patch ‘eyeball’.
  • Conectaremos el position de la esfera al left iris y con el sphere principal podemos mover la posición adecuadamente. Repetimos la misma lógica para la próxima esfera, pero lo conectaremos con el right iris. Lo importante es tener la libertad de posicionar correctamente los objetos.
  • Vamos a duplicar una esfera y modificamos su escala, quiero que este aparezca cuando alcemos las cejas, para transmitir el sentimiento de emoción. Esta estará posicionada en el left iris. Recuerda mover adecuadamente su posición. Duplicamos esta esfera y repetimos el proceso para el right iris. Hacemos los ajustes correspondientes para que se vean bien.
  • Hacemos un poco de espacio para lo que está por venir, llamamos a un eyebrows raised y vamos a utilizar los visibles de las esferas grandes, los conectamos. Le modificamos sus nombres para ordenar nuestro proyecto.
  • Hacemos más espacio dentro del patch editor porque agregaremos la boca, para eso creamos un null object que lo llamaremos mouth y luego agregamos dos planos. La boca tendrá dos situaciones: cuando esté cerrada y cuando esté abierta. 
  • Llevamos al patch editor, el position del mouth e importamos el patch llamado nose., conectamos la posición del null object via bridge, movemos los planos close y open. Close tendrá un material y una textura única, para el plano open también utilizaremos una imagen única. Falta una interacción más por hacer.
  • Presta bastante atención a esta parte, llamamos al patch ‘mouth open’, lo conectamos con el face tracker, luego utilizamos un greather than y también un  less or equal. Les modificamos sus second inputs y los conectamos, creamos dos pulse y luego un switch. Serán conectados de esta manera para que se realice la interacción correcta, de abrir y cerrar la boca, mostrando adecuadamente las imágenes relacionadas.
  • Por último, llamamos a los visibles de los planos y los conectamos al switch con la diferencia que el plano ‘close‘ tendrá antes un ‘not’. Ahora sí estamos listos. ¡Vamos a probarlo!
Spark AR efecto virtual skin color tone

¿Qué te parece el efecto virtual skin color tone? Me gustan bastante las interacciones, son tan expresivas, recuerda que puedes seguir editando elementos y agregando mejoras, como por ejemplo párpados animados, un lengua, etc. Haz tuyo al proyecto y mejóralo. ¡Nos vemos en el siguiente tutorial!

Si desear apoyarme para mantener mi sitio web y también recibir los archivos de mis tutoriales, puedes hacerlo accediendo a mi patreon.




Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.