FIELD — Four States of One Buffer

One buffer becomes a grass field, a tide, embers and a lattice in turn: 262,144 strands recomputed by a WebGPU compute pass every frame.

Try Websites Agent

Loading preview...

Start with this prompt

One buffer becomes a grass field, a tide, embers and a lattice in turn: 262,144 strands recomputed by a WebGPU compute pass every frame.

Try Websites Agent

Build a WebGPU procedural scene page called FIELD: four states of one buffer. The whole page runs on a single fixed buffer that four scenes reuse in turn: a wind-blown grass field, a rising and falling tide, dying embers, and a regular lattice. 262,144 grass blades, or the equivalent particles in the later scenes, are rewritten wholesale by a compute pass on every frame, so nothing on screen is a texture and nothing is a model; every strand is computed. As the visitor scrolls down, the four states transition smoothly into one another while the same buffer keeps being reused underneath. Each state is annotated on the page with short implementation notes explaining how the effect works, together with a real-time frame rate readout. When the browser does not support WebGPU, the page shows a graceful fallback message instead of the scene, so the visitor knows why nothing renders. Single-file static page.

Add parameter sliders

Grass, tide, embers and lattice each get live sliders for density, wind speed and color, so dragging a slider reshapes the scene immediately; the implementation notes and frame rate readout stay in place.

Try Websites Agent

Build a WebGPU procedural scene page called FIELD: four states of one buffer. The whole page runs on a single fixed buffer that four scenes reuse in turn: a wind-blown grass field, a rising and falling tide, dying embers, and a regular lattice. 262,144 grass blades, or the equivalent particles in the later scenes, are rewritten wholesale by a compute pass on every frame, so nothing on screen is a texture and nothing is a model; every strand is computed. As the visitor scrolls down, the four states transition smoothly into one another while the same buffer keeps being reused underneath. Each state is annotated on the page with short implementation notes explaining how the effect works, together with a real-time frame rate readout. When the browser does not support WebGPU, the page shows a graceful fallback message instead of the scene, so the visitor knows why nothing renders. Single-file static page.

Add a fifth state

Adds a fifth state after the lattice: a field of quietly falling snow, which transitions in on scroll with the same smoothness as the first four states.

Try Websites Agent

Build a WebGPU procedural scene page called FIELD: four states of one buffer. The whole page runs on a single fixed buffer that four scenes reuse in turn: a wind-blown grass field, a rising and falling tide, dying embers, and a regular lattice. 262,144 grass blades, or the equivalent particles in the later scenes, are rewritten wholesale by a compute pass on every frame, so nothing on screen is a texture and nothing is a model; every strand is computed. As the visitor scrolls down, the four states transition smoothly into one another while the same buffer keeps being reused underneath. Each state is annotated on the page with short implementation notes explaining how the effect works, together with a real-time frame rate readout. When the browser does not support WebGPU, the page shows a graceful fallback message instead of the scene, so the visitor knows why nothing renders. Single-file static page.

Add an orbit mode

Adds mouse-drag orbiting on top of the scroll transitions, so the same per-frame recomputed field can be viewed from another angle.

Try Websites Agent

Build a WebGPU procedural scene page called FIELD: four states of one buffer. The whole page runs on a single fixed buffer that four scenes reuse in turn: a wind-blown grass field, a rising and falling tide, dying embers, and a regular lattice. 262,144 grass blades, or the equivalent particles in the later scenes, are rewritten wholesale by a compute pass on every frame, so nothing on screen is a texture and nothing is a model; every strand is computed. As the visitor scrolls down, the four states transition smoothly into one another while the same buffer keeps being reused underneath. Each state is annotated on the page with short implementation notes explaining how the effect works, together with a real-time frame rate readout. When the browser does not support WebGPU, the page shows a graceful fallback message instead of the scene, so the visitor knows why nothing renders. Single-file static page.