Hunderttausend Treibende in einem Wind, den sie nicht sehen.
Jeder Partikel hält seine Position in einer Float-Textur. Jeden Frame liest ein Fragment-Shader die Textur, sampelt ein dreidimensionales Curl-Noise-Feld an der Position des Partikels und schreibt eine neue Position zurück. Das Resultat ist ein divergenzfreier Strom: Partikel wirbeln, ohne sich aufzustapeln. Ein zweites Material liest die Textur dann im Vertex-Shader und zeichnet pro Texel einen additiven Punkt. Die ganze Simulation lebt auf der GPU, die CPU setzt nur ein paar Uniforms pro Frame.
Three.js · GPGPU · 100k Partikel · Curl von Simplex-Noise
Maus bewegt die Wolke · Klick verstärkt den Wirbel · 50k/100k/200k-Buttons rechts unten
Wochenend-Skizze · Three.js r169 + GPUComputationRenderer
Der Zustand lebt auf der GPU
Jeder Partikel ist ein Texel in einer 317-mal-317-Float-Textur. Der Fragment-Shader ist die Simulation: er liest die Textur, berechnet eine neue Position, schreibt sie in eine zweite Textur, und die beiden tauschen sich (Ping-Pong). Die CPU berührt nie einen einzelnen Partikel. Deshalb bleiben 100k auf einem Laptop bei 60fps.
Warum Curl-Noise
Schlichtes Perlin- oder Simplex-Noise hat Divergenz: sampelt man es als Geschwindigkeitsfeld, fallen Partikel in Senken zusammen. Der Curl-Operator (∂/∂y der z-Komponente minus ∂/∂z der y-Komponente, zyklisch) erzeugt ein divergenzfreies Feld. Partikel treiben mit dem Wind, stapeln sich aber nie, das ist die visuelle Textur, die diese Ästhetik definiert.
Die Maus als Abstosser
Bewege den Cursor und ein weicher Gauss-Abstosser drückt die Partikel im 3D-Raum nach aussen. Klick und Drag verdoppelt die Stärke. Die Mauspositiion wird vom Bildschirm-Raum auf die z=0-Ebene der Simulation projiziert, damit die Tiefe der Wolke unter dem Cursor stimmt.
Der nächste Schritt
Gleiches Gerüst, anderes Geschwindigkeitsfeld: tausche das Curl-Noise gegen ein Set von Attraktoren oder den Gradienten eines Signed-Distance-Felds um ein 3D-Logo, und dieselben Partikel formen sich um die neue Geometrie. So generalisiert die Houdini-Ästhetik im Browser.