Showcase 10 · WebGPU
Eine Million
Eine Million Teilchen, die sich alle gegenseitig spüren, live im Browser. Jedes Teilchen zieht jedes andere an: Zwei Spiralgalaxien kollidieren, reißen einander lange Gezeitenarme heraus und verschmelzen. Ziehen Sie mit der Maus oder dem Finger über die Bühne, um eine zusätzliche Masse hineinzuwerfen.
Die Live-Demo benötigt JavaScript und WebGPU oder WebGL 2. Das Bild zeigt die kollidierenden Galaxien; die Erklärung unten ist auch ohne sie lesbar.
- Teilchen
- –
- Interaktionen/s
- –
- Backend
- –
- Bilder/s
- –
So funktioniert es
Direkt jedes Paar zu rechnen wären eine Billion Kräfte pro Bild. Stattdessen verteilt ein Compute-Shader die Masse aller Teilchen auf ein Gitter (Partikel-Gitter-Verfahren). Das Schwerefeld auf diesem Gitter entsteht aus einer Poisson-Gleichung, die ein Mehrgitterlöser auf der Grafikkarte in jedem Bild mit einem Durchgang über alle Gitterstufen löst. Jedes Teilchen liest daraus seine Beschleunigung und spürt damit die Anziehung aller anderen. Die Galaxien starten als rotierende Scheiben in einem dunklen Halo; ihre Gezeitenarme entstehen allein aus der Physik.
Mit WebGPU laufen bis zu eine Million Teilchen. Fehlt WebGPU, übernimmt WebGL 2 mit einem Viertel der Teilchen und rechnet dasselbe Verfahren mit Fragment-Shadern statt Compute-Shadern. Wird ein Bild zu langsam, sinkt die Teilchenzahl stufenweise. Die Anzeige zeigt, wie viele Teilchen gerade rechnen, welches Backend läuft und wie viele Wechselwirkungen pro Sekunde das sind: alle Teilchenpaare, die das Schwerefeld in jedem Schritt verbindet. Alle Farben stammen aus den Design-Tokens.