Hacer que el fuego parezca vivo: Simulación de fluidos en tiempo real en Ignitement
En la publicación de hoy como invitado, el desarrollador en solitario Sørb desglosa la técnica artística detrás del impresionante fuego y los efectos visuales de lava en su próxima acción roguelite, Ignitement.
Lo primero que notas al mirar Ignitement son los efectos visuales. Hay algo inmediatamente diferente en ellos, especialmente el fuego. No es solo que look animado, se siente vivo, reactivo y profundamente integrado en el mundo.
Entonces, ¿qué está pasando bajo el capó?
¿Por qué deberías preocuparte por los efectos visuales de fuego?
El fuego y los efectos similares a los fluidos en general son notoriamente difíciles de lograr en los juegos. Los sistemas de partículas tradicionales pueden verse geniales, pero a menudo carecen de una verdadera interacción con el mundo. En el otro extremo del espectro, las simulaciones completas en 3D suelen ser demasiado costosas para el juego en tiempo real.
Pocos juegos han explorado la simulación de fluidos como mecánica central. En Little Infernode Tomorrow Corporation (arriba), el comportamiento del fuego es fundamental para la experiencia, mientras que Plasma Pong de Steve Mason (abajo) basa todo su juego en el movimiento reactivo y fluido. Estos ejemplos destacan lo potentes que pueden ser los sistemas basados en fluidos cuando influyen directamente en el juego.
La idea central
En lugar de depender de sistemas de partículas, Ignitement utiliza una simulación de fluido totalmente dinámica en tiempo real.
A primera vista, esto podría parecer caro.
“Pero ¿no pone en peligro el rendimiento de tu PC?”
Al menos no la hardware.
La simulación es completamente en 2D y se ejecuta a través de Graphics.Blit, actualizando un pequeño conjunto de texturas (principalmente de 1024×1024 y 512×512). En la práctica, esto lo hace comparable en costo a algunos efectos de postprocesamiento.
Otra elección deliberada fue mantener los shaders de fragmento en lugar de los shaders de cómputo. Esto permite que el sistema aproveche la filtración y la interpolación de texturas integradas, a la vez que mantiene una alta compatibilidad, incluso en hardware antiguo o en posibles objetivos de consola.
Para que sea más fácil de seguir, podemos dividir el sistema en tres partes:
- Simulación
- Procesamiento de gráficos
- Iluminación
Desglose de la simulación de fluidos
En su núcleo, el sistema es una simulación de fluido estándar implementada completamente a través de Graphics.Blit pases. La simulación funciona con varias texturas, cada una de las cuales representa una propiedad física diferente:
- Densidad (1024×1024, RGBA media) Esta es tu humo, todo lo que hace que el aire se sienta denso y visible.
- Velocidad (512×512, RGBA media) Esto controla cómo se mueven las cosas. Si algo fluye, se desplaza o remueve, es por esto.
- Temperatura (1024×1024, medio canal único) Determina qué tan calientes son las diferentes regiones.
- Reacción (1024×1024, RGBA medio) Aquí es donde vive el fuego real, su intensidad, propagación y comportamiento.
Teniendo en cuenta esta estructura, el solucionador de fluidos se puede describir con este pseudo-código:
void Simulate(float dt)
{
//feed data to simulation
RenderEmittersAndObstaclesToTexture();
ApplyDiffusion(dt); //fluid spreading
ApplyAdvection(dt); //moving data along the velocity field
ApplyExtinguishmentImpulse(dt); //fire producing smoke (reaction>density)
ComputeVorticityConfinement(dt); //increase swirlyness of fluid
//calculate divergence free velocity field
ComputeDivergence();
ComputePressure();
ComputeProjection();
AdvectParticles(dt); //move particles along velocity field
}
Los datos de la reacción incluso escapan de la GPU de vez en cuando. Se reduce la muestra y se vuelve a leer en la CPU para impulsar efectos de juego como el daño. Así que sí, el fuego no solo parece peligroso, ¡en realidad lo es!
El propio dominio de la simulación no está fijo en el mundo. En su lugar, sigue a la cámara y se desplaza a medida que el jugador se mueve. Esto crea la ilusión de una simulación continua y sin fin, aunque en realidad solo se está calculando una región relativamente pequeña en un momento dado. Humo por todas partes, coste en ninguna parte.
Procesamiento de gráficos
Una vez que todos esos datos estén en su lugar, el siguiente paso es hacerlo parecer algo a lo que realmente quieras mirar.
Fuego
El fuego se renderiza a partir de la textura de reacción, que se trata un poco como un mapa de alturas. Un truco al estilo paralla en el shader de fragmento le da un aspecto pseudo 3D, añadiendo profundidad sin el coste de los volúmenes reales.
Humos
El humo y la niebla provienen principalmente de la información de temperatura. Estos se interpretan en el sombreado para producir formas suaves y en evolución que se sienten sorprendentemente volumétricos para algo que, técnicamente, es solo un par de texturas desplazadas.
Brasas
Y, por supuesto, ningún fuego está completo sin brasas.
Estas son partículas impulsadas por GPU que toman muestras del campo de velocidad, lo que significa que siguen naturalmente el flujo de la simulación. No se necesita lógica adicional, simplemente siguen el flujo (literalmente).
Estas partículas de brasas se actualizan y se transportan mediante una implementación personalizada de GPU (sin Shuriken, sin Graph de VFX). Así que solo un ComputeBuffer para todos los datos de partículas, una llamada ComputeShader.Dispatch para actualizarlos y una llamada Graphics.DrawProcedural para renderizarlos en la pantalla.
Iluminación
Cálculo del mapa de luces
La iluminación se gestiona mediante un truco simple que acaba haciendo mucho trabajo pesado.
La textura de reacción se reduce y se desenfoca, convirtiéndola en un mapa de luces dinámico. No es físicamente preciso, pero no es necesario. ¡Solo necesita verse bien!
Aplicación de iluminación al entorno
Al renderizar objetos, la iluminación se reduce a una sola consulta de textura en un shader personalizado.
En lugar de muestrear directamente en la superficie, la consulta se desplaza ligeramente a lo largo de la normal de la superficie:
worldPosition + worldNormal * c
Este pequeño desplazamiento tiene un gran impacto. Se crea la impresión de que la luz está llegando desde el entorno, otorgando a las superficies una sensación convincente de profundidad y direccionalidad.
Todo eso, a partir de una muestra de textura. No está mal.
Si quieres saber los detalles, aquí está la función de sombreado que utilizo:
void Simulate(float dt)
{
//feed data to simulation
RenderEmittersAndObstaclesToTexture();
ApplyDiffusion(dt); //fluid spreading
ApplyAdvection(dt); //moving data along the velocity field
ApplyExtinguishmentImpulse(dt); //fire producing smoke (reaction>density)
ComputeVorticityConfinement(dt); //increase swirlyness of fluid
//calculate divergence free velocity field
ComputeDivergence();
ComputePressure();
ComputeProjection();
AdvectParticles(dt); //move particles along velocity field
}
Simplemente puse esta función y todas las variables uniformes necesarias en un archivo .cginc y lo utilizo convenientemente en cualquier sombreado que quiera leer el mapa de luz.
Ampliación del mapa de luz más allá de la iluminación
Uno de los efectos secundarios más agradables de esta configuración es que el mapa de luz no es solo para la iluminación.
En Ignitement, partes de la UI también lo utilizan. Los elementos con mapas normales toman muestras del mapa de luz para simular reflejos. Por ejemplo, el Glass del contenedor de salud capta el fuego circundante, lo que hace que parezca conectado al mundo en lugar de simplemente estar encima de él.
Esto también abre la puerta a efectos más inusuales.
En una zona, el entorno está compuesto por "paredes de carne" (¿por qué no?). Estas utilizan el mapa de luz para controlar qué tan fuertemente se mueven. Cuanto más intenso es el fuego cercano, más reaccionan las paredes, dando la impresión de que el entorno en sí está vivo y no está particularmente contento de estar en llamas.
Aún mejor, todo esto se hace en el sombreador de vértices, lo que lo hace extremadamente económico para algo que se ve tan dinámico.
¿Cómo afectan los efectos visuales del fuego a la jugabilidad?
Los efectos visuales son agradables, pero un buen sistema de efectos visuales por sí solo no hace un buen juego. En Ignitement, el fuego afecta directamente al juego: cualquier enemigo que lo toque recibe un debuff de quemadura que inflige daño con el tiempo.
Para que esto funcione, los datos de simulación deben estar disponibles en la CPU. Cada fotograma, la textura de reacción se reduce y se vuelve a leer utilizando AsyncGPUReadback.RequestIntoNativeArray. En lugar de realizar consultas costosas por objeto en la GPU, el sistema lee la textura una vez y realiza búsquedas económicas en la CPU para cada enemigo. Con un umbral simple, esto se comporta efectivamente como un único colisionador altamente dinámico que coincide perfectamente con la forma del fuego en cualquier momento dado.
Limitaciones y compensaciones
Por supuesto, este enfoque no es perfecto.
Debido a que la simulación es en 2D, cualquier cosa que suceda verticalmente es más una aproximación que una solución físicamente correcta. Además, cambiar el dominio de la simulación requiere un poco de cuidado para evitar costuras visibles o saltos.
Dicho esto, estos compromisos son muy intencionales. Mantienen el sistema rápido, escalable y ampliamente compatible, a la vez que ofrecen resultados que parecen ricos y reactivos.
Puntos clave
- Las simulaciones de fluidos en 2D pueden llegar mucho más lejos de lo que podría esperar
- La reutilización de datos de simulación es donde ocurre gran parte de la magia
- "Se ve bien" a menudo supera "es físicamente correcto"
- La lectura de GPU a CPU es perfectamente viable cuando se mantiene pequeña
- Un sistema bien diseñado puede impulsar los gráficos, el juego y la interfaz de usuario al mismo tiempo
Al construir todo sobre una simulación de fluidos compartida, Ignitement consigue un estilo visual cohesivo en el que el fuego, la iluminación, la interfaz de usuario e incluso partes del entorno hablan el mismo idioma.
El resultado no son solo mejores efectos visuales, es un mundo que se siente más conectado, más reactivo y más vivo.
Y todo eso comienza con unas pocas texturas, un par de sombreados… e incendiando todo.
Si te gusta la simulación de fluidos y los juegos tipo survivor/roguelike, no dudes en lista de deseos Ignitement en Steam y Únete al Discord. Explora más juegos hechos con Unity en nuestro hub Página del curador de Steam, y echa un vistazo a más historias de desarrolladores de Unity en el Blog de Unity y Hub de recursos.