Hoy hablaremos de unos de los patch más útiles que se pueden implementar: es el Slider UI. Una vez que entiendas su funcionamiento y saber en qué filtro debes colocarlo, se convertirá en una aliado para la personalización de tus efectos. Trabajaremos con 2 casos específicos, primero veremos el uso con Luts y luego con face deformation. No te pierdas mi tutorial sobre Slider UI con LUTs y Face Deformation.
Slider UI de Spark AR funciona solo para instagram, por ello vamos a edit properties y des-seleccionaremos Facebook. Ahora agregaremos un rectángulo y cubrimos toda la pantalla, le creamos un material. Dicho material estará en modo flat.
Ahora habilitamos el patch editor, llamaremos al slider UI. Haremos check a visible y pasamos a agregar una textura a nuestro material. Esta imagen la obtuve de unsplash, le quitamos su compresión automática. Arrastramos la foto hacia el patch e incorporaremos un multiple, lo conectaremos. Como paso final, la textura lo conectaré también dentro del patch, de esta manera. Haremos que el valor empiece en 1, es decir, comience activo y vamos a modificar su render options. Puedes elegir substract o también multiply.
¿Qué pasa si quiero usar un LUT con slider UI?
También se puede, vamos a limpiar un poco la experiencia. Sobretodo el material lo dejaremos totalmente limpio para trabajar con LUT necesitamos el patch especializado y nuestra imagen base.
La imagen LUT tiene un trato especial poner el filtering en “none” y hacer check a la no compresion. Vamos a generar cámara texture. Ahora conectaremos todo de esta manera. La manera tradicional de usar LUT sería así pero si queremos trabajar con Slider UI, nuestro LUT tendría que conectarse primero con el multiply y luego este se conectaría con el patch de FastColorLUT. Podemos hacer un último ajuste sobre el material, ya no usaré multiply sino que será alpha el render options. vamos a probarlo.
Slider UI con Face Deformation
Con Face Deformation será más sencilla aunque no lo creas, como ya sabes en edit properties vamos a utilizar solo para trabajar con instagram. Agregaremos un face mesh. Este también incluye el face tracker, en dicho mesh le crearemos un material, para este ejemplo agregaremos dos archivos relacionados al face deformation. Uno realizado en blender en un tutorial anterior y el otro relacionado al face distortion pack que nos proporciona Spark AR. Comenzaremos con mi objeto 3D creado en blender.
Iremos hacia el face deformation del mismo face mesh y seleccionamos el face face. Debemos hacer ajustes para que dicho objeto se vea bien cerca al rostro, bueno, en el patch editor llamamos al slider UI y el face que está en el deformation lo vamos a arrastrar. No te olvides de activar al slider UI con el valor a 1 y lo conectamos. Vamos a probarlo en un momento, primero haremos un ejemplo adicional.
Borramos el face mesh anterior para crear uno nuevo. En deformation agregamos el distortion pack, agrandaremos el video preview para que veas los cambios. Arrastaremos los eye scales y lo conectaremos con el slider UI. Listo puedes dejarlo ahí, pero mejor agregraremos el elemento mouth scale. Ahora sii vamos a probarlo!
Patreon
Si desear apoyarme para mantener mi sitio web, puedes hacerlo a través de patreon y además tendrás los archivos de este tutorial llamado Spark AR Slider UI con LUTs y Face Deformation.
