FIELD — Vier Zustände eines Puffers

Ein Puffer wird nacheinander zu einem Grasfeld, einer Flut, Glut und einem Gitter: 262.144 Stränge werden in jedem Frame von einem WebGPU Compute-Pass neu berechnet.

Loading preview...
Mit diesem Prompt starten

Ein Puffer wird nacheinander zu einem Grasfeld, einer Flut, Glut und einem Gitter: 262.144 Stränge werden in jedem Frame von einem WebGPU Compute-Pass neu berechnet.

Websites Agent ausprobieren
Erstelle eine WebGPU-Seite mit einer prozeduralen Szene namens FIELD: vier Zustände eines Puffers. Die gesamte Seite läuft mit einem einzigen festen Puffer, den vier Szenen nacheinander wiederverwenden: ein windgepeitschtes Grasfeld, eine auf- und ablaufende Flut, verglimmende Glut und ein regelmäßiges Gitter. 262.144 Grashalme oder die entsprechenden Partikel in den späteren Szenen werden in jedem Frame vollständig durch einen Compute-Pass neu geschrieben. Daher ist nichts auf dem Bildschirm eine Textur und nichts ein Modell; jeder Strang wird berechnet. Beim Herunterscrollen wechseln die vier Zustände fließend ineinander, während im Hintergrund weiterhin derselbe Puffer wiederverwendet wird. Jeder Zustand ist auf der Seite mit kurzen Implementierungshinweisen versehen, die erklären, wie der Effekt funktioniert, sowie mit einer Echtzeit-Anzeige der Bildrate. Wenn der Browser WebGPU nicht unterstützt, zeigt die Seite statt der Szene eine aussagekräftige Fallback-Meldung, damit Besuchende wissen, warum nichts dargestellt wird. Statische Einzelseiten-Datei.
Parameterregler hinzufügen

Für Gras, Flut, Glut und Gitter gibt es jeweils Live-Regler für Dichte, Windgeschwindigkeit und Farbe. Beim Ziehen eines Reglers verändert sich die Szene sofort; Implementierungshinweise und Bildratenanzeige bleiben bestehen.

Websites Agent ausprobieren
Erstelle eine WebGPU-Seite mit einer prozeduralen Szene namens FIELD: vier Zustände eines Puffers. Die gesamte Seite läuft mit einem einzigen festen Puffer, den vier Szenen nacheinander wiederverwenden: ein windgepeitschtes Grasfeld, eine auf- und ablaufende Flut, verglimmende Glut und ein regelmäßiges Gitter. 262.144 Grashalme oder die entsprechenden Partikel in den späteren Szenen werden in jedem Frame vollständig durch einen Compute-Pass neu geschrieben. Daher ist nichts auf dem Bildschirm eine Textur und nichts ein Modell; jeder Strang wird berechnet. Beim Herunterscrollen wechseln die vier Zustände fließend ineinander, während im Hintergrund weiterhin derselbe Puffer wiederverwendet wird. Jeder Zustand ist auf der Seite mit kurzen Implementierungshinweisen versehen, die erklären, wie der Effekt funktioniert, sowie mit einer Echtzeit-Anzeige der Bildrate. Wenn der Browser WebGPU nicht unterstützt, zeigt die Seite statt der Szene eine aussagekräftige Fallback-Meldung, damit Besuchende wissen, warum nichts dargestellt wird. Statische Einzelseiten-Datei.
Fünften Zustand hinzufügen

Fügt nach dem Gitter einen fünften Zustand hinzu: ein ruhiges Feld fallender Schneeflocken, das beim Scrollen ebenso fließend eingeblendet wird wie die ersten vier Zustände.

Websites Agent ausprobieren
Erstelle eine WebGPU-Seite mit einer prozeduralen Szene namens FIELD: vier Zustände eines Puffers. Die gesamte Seite läuft mit einem einzigen festen Puffer, den vier Szenen nacheinander wiederverwenden: ein windgepeitschtes Grasfeld, eine auf- und ablaufende Flut, verglimmende Glut und ein regelmäßiges Gitter. 262.144 Grashalme oder die entsprechenden Partikel in den späteren Szenen werden in jedem Frame vollständig durch einen Compute-Pass neu geschrieben. Daher ist nichts auf dem Bildschirm eine Textur und nichts ein Modell; jeder Strang wird berechnet. Beim Herunterscrollen wechseln die vier Zustände fließend ineinander, während im Hintergrund weiterhin derselbe Puffer wiederverwendet wird. Jeder Zustand ist auf der Seite mit kurzen Implementierungshinweisen versehen, die erklären, wie der Effekt funktioniert, sowie mit einer Echtzeit-Anzeige der Bildrate. Wenn der Browser WebGPU nicht unterstützt, zeigt die Seite statt der Szene eine aussagekräftige Fallback-Meldung, damit Besuchende wissen, warum nichts dargestellt wird. Statische Einzelseiten-Datei.
Orbit-Modus hinzufügen

Fügt zusätzlich zu den Scroll-Übergängen eine Kamerarotation per Ziehen mit der Maus hinzu, sodass dasselbe in jedem Frame neu berechnete Feld aus einem anderen Winkel betrachtet werden kann.

Websites Agent ausprobieren
Erstelle eine WebGPU-Seite mit einer prozeduralen Szene namens FIELD: vier Zustände eines Puffers. Die gesamte Seite läuft mit einem einzigen festen Puffer, den vier Szenen nacheinander wiederverwenden: ein windgepeitschtes Grasfeld, eine auf- und ablaufende Flut, verglimmende Glut und ein regelmäßiges Gitter. 262.144 Grashalme oder die entsprechenden Partikel in den späteren Szenen werden in jedem Frame vollständig durch einen Compute-Pass neu geschrieben. Daher ist nichts auf dem Bildschirm eine Textur und nichts ein Modell; jeder Strang wird berechnet. Beim Herunterscrollen wechseln die vier Zustände fließend ineinander während im Hintergrund weiterhin derselbe Puffer wiederverwendet wird. Jeder Zustand ist auf der Seite mit kurzen Implementierungshinweisen versehen, die erklären, wie der Effekt funktioniert, sowie mit einer Echtzeit-Anzeige der Bildrate. Wenn der Browser WebGPU nicht unterstützt, zeigt die Seite statt der Szene eine aussagekräftige Fallback-Meldung, damit Besuchende wissen, warum nichts dargestellt wird. Statische Einzelseiten-Datei.