Llevé cinco experimentos de arte procedural al navegador: Boids, Reacción-Difusión, Physarum, Curl Noise y Fluido. Usan Three.js, WebGL y shaders propios, y están publicados en npm como @benjadiazp/procedural-art.
El proyecto salió de mis experimentos con compute shaders en Unity. Quería que cualquiera pudiera abrir las simulaciones y probarlas sin instalar un motor.
Las simulaciones
Boids usa tres reglas locales para crear bandadas: separación, alineamiento y cohesión. Mi versión agrega depredadores y presas, con hash espacial para reducir las búsquedas de vecinos.
Reacción-Difusión usa el modelo Gray-Scott para crear manchas, rayas y ramificaciones. Cambiar las tasas de alimentación y eliminación cambia lo que crece sobre la superficie. La iluminación hace que la simulación plana parezca tridimensional.
Physarum está inspirado en el moho mucilaginoso. Los agentes dejan rastros, detectan la concentración alrededor y giran hacia ellos. Los rastros van formando redes mientras corre la simulación.
Curl Noise mueve partículas por un campo de ruido libre de divergencia. Produce trayectorias fluidas sin resolver una simulación de fluidos.
Fluido resuelve un modelo de fluidos en tiempo real. Mover el mouse agrega velocidad y color al fluido.
Cálculos en la GPU
Las simulaciones guardan su estado en texturas de punto flotante. Los fragment shaders actualizan ese estado mediante pasadas de renderizado: es computación GPGPU con WebGL, distinta de los compute shaders de Unity. Según la simulación, el resultado se dibuja con geometría instanciada o un quad de pantalla completa.
La librería expone una función mount() que recibe un contenedor DOM. Devuelve métodos para cambiar la simulación, listar las disponibles y liberar sus recursos. La página que la integra puede configurar los controles y sus textos.
Puedes probar las cinco en la demo o usar el paquete npm en tu propia página.
