Fuegos artificiales

Experimento para animar partículas por GPU. Toda la animación vive en el vertex shader, y JavaScript solo avanza un valor de progreso entre 0 y 1 con GSAP.

• Cohete: un solo vértice con 10 puntos de estela. Cada punto se detiene un poco antes que el anterior, interpolado con mix(inicio, fin, 1 − (1 − p)³) durante un segundo.
• Estallido: 200 partículas repartidas de forma uniforme sobre una esfera (acos(2r − 1)), cada una con 10 puntos de estela de tamaño decreciente. Las posiciones, tamaños, multiplicadores de tiempo y desfases de estela se calculan una sola vez como atributos del BufferGeometry.
• Vertex shader: con remap divide el progreso en tramos:
  • explosión rápida con salida cúbica
  • curva de gravedad
  • caída lenta
  • tamaño que abre y cierra
  • parpadeo con sin.

Los puntos de menos de un píxel se sacan de pantalla.

float explodingProgress = remap(progress, 0.0, 0.3, 0.0, 1.0);
explodingProgress = clamp(explodingProgress, 0.0, 1.0);
explodingProgress = 1.0 - pow(1.0 - explodingProgress, 3.0);
newPosition *= explodingProgress;

• Fragment shader: usa la textura de la partícula como alfa, con mezcla aditiva.

Al estallar, cada cohete deja una nube de humo de su color (Cloud de Drei) que dura diez segundos. El suelo es un plano reflectante con cuadrícula infinita. El área de lanzamiento es un shader que dibuja solo el borde.

Cada fuego crea su geometría y su material y los libera al terminar, así que se pueden lanzar muchos seguidos. El parpadeo es solo de tamaño, sin cambio de brillo. Los colores son una paleta fija de cuatro. En móvil no hay teclado: se lanza tocando la plataforma.