Una colección de cinco simulaciones de arte procedural aceleradas por GPU que corren en el navegador. Construido con Three.js y compute shaders GPGPU, empaquetado como una librería npm liviana que se puede embeber en cualquier página web.
Las simulaciones empezaron como experimentos en Unity (documentados en mi articulo sobre compute shaders) y evolucionaron a un proyecto web independiente. Cada una toma un algoritmo simple y lo escala a cientos de miles de particulas, todo calculado en la GPU.
Simulaciones
Boids recrea el algoritmo de bandada de Craig Reynolds de 1986. Cientos de miles de agentes siguen tres reglas (separación, alineamiento, cohesión) y producen comportamiento de enjambre orgánico. Dinámica depredador-presa, hash espacial para rendimiento y post-procesado bloom le dan un aspecto bioluminiscente de fondo marino.
Reacción-Difusión implementa el modelo Gray-Scott: dos sustancias quimicas esparciéndose por una superficie a velocidades distintas, produciendo patrones de Turing como manchas, rayas y ramas de coral. Difusión anisotrópica e iluminación simulada lo hacen parecer tridimensional.
Physarum simula moho mucilaginoso (Physarum polycephalum). Miles de agentes depositan un rastro quimico, detectan su entorno y giran hacia concentraciones más altas. El resultado es una red de transporte eficiente que refleja cómo el organismo resuelve laberintos y optimiza rutas en la naturaleza.
Curl Noise genera campos de ruido suaves y libres de divergencia que impulsan el movimiento de particulas. Las particulas trazan trayectorias fluidas sin simulación de fluidos real, creando patrones orgánicos de flujo.
Fluido es un solver de Navier-Stokes en tiempo real. La interacción con el mouse inyecta velocidad y tinte en la simulación, produciendo dinámicas de fluido coloridas y arremolinadas.
Detalles Técnicos
Todas las simulaciones usan DataTexture de Three.js y fragment shaders personalizados para computación GPGPU. El estado de las particulas (posición, velocidad, concentraciones quimicas) vive en texturas de punto flotante que la GPU lee y escribe cada frame. El renderizado usa meshes instanciados o quads de pantalla completa según el tipo de simulación.
La librería expone una única función mount() que recibe un contenedor DOM y devuelve controles para cambiar simulaciones y limpiar recursos. Está publicada en npm como @benjadiazp/procedural-art.
Pueden probar las cinco simulaciones en la demo en vivo.
