EIGENES EXPERIMENT / SEPTEMBER 2026
Eine durchgehende Szene
Ein Grafikexperiment für dieses Portfolio. Rust, wgpu und WGSL halten Positionen und Geschwindigkeiten auf der GPU. Bei der Auswahl eines Projekts ändert sich die Zielform. Derselbe Canvas bleibt über Seitenwechsel hinweg bestehen, während die HTML-Inhalte separat aktualisiert werden.
Die silbernen Partikel und die Tiefenwirkung orientieren sich an einem Pmndrs-Beispiel; die organischen Formen und Freiräume an Standbildern aus Phantom Garden. Flächenfunktionen, Bewegung und Seitenübergänge wurden eigens für diese Website implementiert.
DATEN & BERECHNUNG
Surface Morphing
Eine feste ID und ein Integer-Hash liefern 2D-Samples und Schichtindizes. Dieselben Sample-IDs bestimmen Positionen in zehn Formen — darunter Bänder, Schalen, Knoten, Rahmen und Umlaufbahnen. So bleibt die Zuordnung zwischen den Seiten erhalten.
Der Compute-Shader liest Position und Geschwindigkeit jedes Partikels und berechnet eine gedämpfte Federkraft zur Zielfläche. Analytische Curl-Felder steuern die Oberflächenbewegung und die frei driftenden Partikel.
Oberflächenverformung und freie Drift haben getrennte Stärken. Eine feste Teilmenge von etwa 9 % der Partikel driftet bei jeder Form mit gleicher Stärke. Bei Repeated cells bleiben die Zellmittelpunkte fest; die übrigen Partikel rotieren innerhalb ihrer Zelle.
Eine kurze Historie der Mausbewegung liefert Richtung und Geschwindigkeit für lokale Kräfte. Das Zellraster reagiert über Partikelgröße und Helligkeit; driftende Partikel werden zusätzlich verschoben. Scrollen verändert Ansicht und Schichtabstände. Ein begrenzter Zeitschritt verhindert große Sprünge beim Zurückkehren zum Tab.
Position + velocityGPU-Storage-Buffer · 32 Byte pro PartikelJedes Partikel aktualisiert nur seinen eigenen Zustand. Da keine Zustände benachbarter Partikel gelesen werden, sind hier keine Ping-Pong-Puffer nötig. Nach dem Compute-Pass liest der Render-Schritt denselben Puffer.
RENDERING & LIFETIME
Rendering & Lifetime
Tiefe und Größenvariation mischen feine Punkte mit größeren Bokeh-Partikeln. Die Tiefenwirkung basiert auf Sprites, nicht auf einem physikalischen Vollbild-DOF-Pass. Partikelzahl und DPR sind begrenzt, um die Kosten überlappender transparenter Partikel zu reduzieren.
Der Canvas bleibt beim Navigieren bestehen. Ein neues Ziel setzt Positionen und Geschwindigkeiten nicht zurück. In ausgeblendeten Tabs stoppt die Schleife. Bei reduzierter Bewegung wird die endgültige Form ohne laufende Animation angezeigt.
Wenn WebGPU nicht verfügbar ist, versucht die Website einen WebGL2-Fallback mit Vertex-Morphing. Er nähert die Verformung aus derselben Eingabehistorie an, hält aber keinen Compute-Simulationszustand und bietet keine Geschwindigkeitsansicht. Falls beide Pfade ausfallen, bleiben die Inhalte mit einem statischen Hintergrund lesbar.
QUELLCODE & REPRODUKTION
Quellcode
WGSL-Shader, Rust-Renderer, Browser-Controller und Build-Anleitung sind hier verfügbar.
field.wgslFormen · Simulation · RenderingZielfunktionen, Compute, Point Spriteslib.rsRust / wgpuGerät · Puffer · Pipelines · Framescontroller.tsBrowser-SteuerungNavigation · Eingabe · Pause · Fallbacksource.zipEigenständige Implementierung herunterladenRust-Crate, WGSL, Browser-Code und Build-Anleitung