¡Hola! Hoy les traigo un nuevo tutorial de realidad aumentada especializado en Spark AR. Siempre he querido crear filtros con colores fríos donde aparezcan efectos neon y otros elementos estéticos. A propósito de esto, algunas personas en Instagram me escribieron preguntando al respecto, por eso hoy les presentaré un filtro Spark AR Neon + LUT. Espero que te sirva de inspiración para crear cosas geniales ¡Comencemos!
Tutorial paso a paso: SPARK AR Neon + LUT
Creando el efecto Neon:
- Primero vamos a crear el efecto Neón. Para ello, trabajaremos con Photoshop. Utilizamos una plantilla simple, el fondo será de color negro. Vamos a seleccionar la herramienta texto, le pondremos un color diferente que el del fondo, usaré blanco.
- Presionamos CTRL y marcamos la capa de texto, fijate cómo aparece un cuadrado gris. Iremos a crear una nueva capa, esta acción permite marcar los bordes del texto.
- Ahora con la capa 1 iremos a edición para utilizar la herramienta “contornear”.
- Agregaremos un estilo de capa y seleccionamos “resplandor exterior”. Las formas de creación pueden variar pero este sería el estandar.
- El modo de fusión está en “normal”, la opacidad debe rondar entre los 60 – 70%. Este es el color que yo he elegido: el azul. El elemento “extender” genera todo ese halo, así que es recomendable que dosifiques, también tienes que dosificar el elemento “rango”.
- El mismo proceso debes realizarlo con la opción de “resplandor interior”, este tiene los mismos elementos que el anterior, solo tienes que observar detenidamente la elección que he realizado.
- Como último paso entramos a filtro y buscamos desenfoque gaussiano, porque siempre las luces neon tienen cierto estilo blur.
- El radio que utilizaremos es de 1.5% aunque puedes bajarlo mucho más, ahora para exportarlo vamos a deseleccionar el “fondo”, también vamos a recortar para que su visualización sea mejor. Exportamos en formato PNG.
- ¡Listo! Para crear otras luces de neon tenemos que ir nuevamente al estilo de capa para cambiar los colores seleccionados, es decir pasaremos de azul hacia verde. Vamos a continuar trabajando, cuando tengamos todos tus textos neon vamos hacia Spark AR.
Construyendo el filtro:
- Utilizamos una plantilla en blanco y vamos a agregar un face tracker y luego agregamos un plano.
- Crearemos un material, flat será la opción para el shader type, en estos momentos agregamos la primera textura de Neón, tendremos que ajustar su escala para que se visualice bien el efecto. ¡Ya lo tenemos!
- Vamos a colocarlo por encima de la cabeza, cambiamos el nombre del plano para tener un mejor orden.
- Ahora duplicaremos el primer plano, le cambiaremos de posición. Haremos esta misma dinámica para todos los textos neón, siempre los coloco en diferente posición para que se aprecien mejor.
- Un proceso muy importante es que cada material tenga deshabilitado el use depth test. ¡Listo!
- Continuemos trabajando, cada plano tendrá un nuevo material y por supuesto una nueva textura asociada al texto neón, tenemos que repetir el proceso con todos los 6 planos. ¡Lo voy a probar! Se ve bien.
- Ahora quiero unir este efecto con un LUT que he preparado. ¡Vamos a ello!
Uniendo el efecto con el LUT
- Abrimos Photoshop, hace unas semanas publiqué un video respecto a la creación de LUT. Realizaremos el mismo proceso realizado en ese tutorial. En este caso estoy usando Photoshop 2021, iremos realizando un ajuste de curvas.
- Quiero generar un LUT donde los colores magenta y azul predominen, luego podemos interactuar con el brillo y contraste. También trabajaremos con otros elementos, cuando hayas terminado lo exportamos como “tabla de consulta de colores”. El formato CUBE es el que nos importa en esta ocasión. ¡Listo! Ahora vamos a tomar el LUT neutral.
- Creamos una nueva capa de relleno o de ajuste y seleccionamos “consulta de colores”. Aquí seleccionamos cargar 3D LUT, importamos nuestro nuevo archivo CUBE. Ya lo tenemos, podemos exportar este archivo en PNG. También puedes hacer más ajustes adicionales. Regresemos a Spark AR.
- Importamos el popular patch “FastColorLut”. Mostramos el patch editor, acto seguido creamos un rectangulo, este debe cubrir toda la pantalla. Luego creamos un material, recuerda shader type en flat.
- Para la textura tendremos que habilitar el texture camera y agregarla.
- En el patch editor agregaremos la textura del material, el camera texture, el patch fastcolorlut y por supuesto el LUT en formato PNG que hemos creado. Este archivo siempre tendrá activado el “no compression”. ¡Conectamos todo! ¡Tenemos todo!
- Ahora tenemos una apariencia totalmente distinta! con este LUT, el neón destaca más.
- Puedes elegir el LUT que desees, también sería bueno optimizar para suavizar los colores dentro del mismo LUT, pero eso quizá es para otro tutorial. Espero que te haya gustado este paso a paso Spark AR Neon + LUT.
- Ponlo en práctica y me cuentas cómo te fue. ¡Nos vemos en el metaverso!
Patreon
Si desear apoyarme para mantener mi sitio web, puedes hacerlo y también recibirás los archivos de mis tutoriales de Spark AR accediendo a mi patreon.
