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.