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.
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 ausprobierenErstelle 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ü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 ausprobierenErstelle 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ü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 ausprobierenErstelle 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ü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 ausprobierenErstelle 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.



