Animar un personaje en realidad aumentada sin disparar el peso del proyecto es posible si dominas los gráficos procedurales en Spark AR. Esta técnica te permite generar texturas, degradados y animaciones desde nodos, evitando importar múltiples imágenes y optimizando cada kilobyte de tu filtro.

Los Signed Distance Fields, los nodos step y smooth step, y los gradient step son las piezas clave para construir un fantasma con respiración, captura y cambios de color, todo controlado desde el editor visual.

Por qué usar gráficos procedurales en lugar de imágenes

Cuando un personaje es protagónico, necesita más vida que un sprite estático. Puedes lograrlo con imágenes importadas o con nodos procedurales, y la diferencia se nota en el archivo final.

• Los gráficos procedurales pesan considerablemente menos que un set de imágenes.
• Permiten animar atributos como radio, lados o centro con flechas que se conectan a otros nodos.
• Son más versátiles para responder a interacciones como captura, aparición o respiración.

¿Qué es un gráfico procedural en Spark AR? Es una textura generada con nodos matemáticos en lugar de una imagen importada. Se crea combinando figuras, cortes y degradados que ocupan muy poco espacio en disco [02:30].

Una buena práctica antes de animar es crear un fantasma debug: un plano fijo al lado de la pantalla con el material asignado, para monitorear los cambios sin que el personaje se mueva [01:15].

Cómo funciona un Signed Distance Field en Spark AR

El primer nodo que entra en juego es el SDF, abreviatura de Signed Distance Field o campo de distancias con signo. No representa solo una figura: representa la figura base y la distancia de todos los demás puntos hacia ella [03:10].

En el editor verás puntos con alfa al 100 % que poco a poco se vuelven blancos. Esto sigue la misma lógica de las texturas en Spark, donde el cero se ve transparente y el uno se ve blanco. El rango siempre va de 0 a 1, tanto en alto como en ancho.

Qué hace el nodo SDF Polygon

Al agregar un SDF Polygon puedes definir un polígono de cinco lados centrado en la textura, con un radio pequeño. Pero a simple vista la figura no se distingue, porque el SDF entrega un campo continuo, no un recorte.

Para revelar la figura necesitas un nodo de corte. Y aquí entran step y smooth step.

¿Para qué sirve el nodo step? Convierte el SDF en un corte binario: pinta de blanco los valores de cero o más y de negro los valores negativos, revelando la figura sólida [04:40].

Cuándo usar step y cuándo usar smooth step

La elección entre estos dos nodos define el estilo visual del personaje. Si quieres bordes duros, step es tu aliado. Si buscas un degradado suave, smooth step es la opción correcta.

Para el fantasma del ejemplo se usa un SDF Circle, porque la idea es que parezca una pequeña esponjita o partícula circular. Con step el círculo se ve nítido, pero sin transición.

Cómo lograr un degradado suave con smooth step

Smooth step permite definir un rango entre dos valores, por ejemplo de 0.1 a 0, y genera una transición progresiva en lugar de un corte abrupto. El resultado es una figura coloreada por dentro, con bordes suaves y mayor definición [06:20].

Si aumentas el rango a 0.2, el efecto se vuelve más blurreado. Esto te da control fino sobre qué tan difuso o sólido luce el personaje.

• Usa step para íconos, siluetas y formas geométricas precisas.
• Usa smooth step para personajes con halo, partículas o elementos orgánicos.
• Ajusta los valores de inicio y fin para controlar el grosor del degradado.

Cómo aplicar color con gradient step en un SDF

Los nodos SDF generan una textura de un solo canal, no un color RGB. Eso significa que la salida funciona como un gradiente que puedes mapear a colores reales con el nodo gradient step [07:30].

La estrategia es encadenar varios gradient step para construir paletas más ricas. En el ejemplo se usan dos:

• El primero va de 0 a 0.5, con color inicial blanco al 0 % de transparencia y un color intermedio azul.
• El segundo va de 0.5 a 1, terminando en un tono más claro.

La regla para encadenarlos es simple: si uno termina en 0.1, el siguiente debe empezar en 0.1. Así puedes apilar dos, cinco o veinte gradient step sin que se rompa la transición.

¿Cómo conecto un SDF a un color RGB? Pasa la salida del SDF por un smooth step y luego por uno o varios gradient step encadenados. Cada gradient step asigna un color a un rango del valor original [08:15].

Ajustar la opacidad del color final ayuda a conseguir un efecto blurreado, ideal para fantasmas, auras o partículas.

Cómo conectar el gráfico procedural a la lógica del personaje

En el Patch Asset del fantasma vive toda la lógica del personaje, incluyendo el switch que cambia el color cuando el puntero se acerca [02:50]. Al desconectar temporalmente esa condición y enchufar la salida procedural al canal de color, todos los fantasmas adoptan la nueva textura al regresar al main y presionar play.

Desde aquí puedes hacer que el personaje:

• Cambie de color al ser capturado.
• Cambie de forma o crezca durante la animación de aparición.
• Responda a interacciones sin depender de imágenes externas.

Queda pendiente resolver el orden de profundidad, el típico problema de qué está enfrente y qué detrás, pero eso se ataca en una clase posterior. ¿Qué animación procedural le pondrías a tu personaje primero, una de respiración o una de captura? Cuéntalo en los comentarios.