FIELD

WEBGPU· TSL· GSAP

1. IMeadow
2. IITide
3. IIIEmber
4. IVLattice

— fps · — strands · meadow

Real-time · zero assets

A field that keeps changing its mind.

262,144 strands of grass, rewritten by a compute pass every frame. Nothing is loaded — not a texture, not a model. Scroll, and the same buffer becomes water, then fire, then a grid.

Scroll

I — Growth

Meadow

Every blade is placed by the compute pass on a Vogel disc, biased toward the lens so the grass thins out exactly as fast as it shrinks on screen. One world-space wind field bends all of them at once — and the light comes through the blades rather than off them, which is the only reason grass ever looks like grass.

Strands

262,144

Geometry

12 verts / 10 tris

Textures

None

II — Flow

Tide

Nothing is destroyed to get here. The strands lie down, turn to face the gradient of a wave field, and become foam on the crests. Same buffer, same draw call — only the numbers that describe a strand have moved.

Surface

3 directional + 3 octaves

Alignment

∇h, rotated 90°

Foam

Crests only

III — Heat

Ember

Cut a strand loose from the ground and it rises. Height collapses to a spark, emission climbs, and the field turns into weather — forty thousand embers drifting off a scorched ridge, each one still the same twelve vertices, each one sized in screen space so it stays a point of light however close it gets.

Alight

15% of the field

Lifetime

12 – 33 s

Drift

Coupled to the wind field

IV — Order

Lattice

Finally the field admits what it is. Positions snap to a 1.9 m grid, heights quantise to five steps, and whether a cell lights at all becomes a property of the cell rather than of the strand — so the meadow resolves into the structure that was underneath it the whole time.

Cell

1.9 m, axis-aligned

Quantisation

5 height steps

Cells lit

45%

Four states. One draw call.

The whole scene is a height field, a wind field, and a description of what a strand is right now. Everything you scrolled through came out of the same four storage buffers, written once per frame and read a different way each time.

Renderer

three.js WebGPURenderer

Shading

TSL node graph — no shader strings

Compute

1 dispatch · 262,144 threads · per frame

Geometry

1 strand · 12 vertices · instanced

Assets

0 textures · 0 models · 0 heightmaps

Storage

4 × vec4 per strand · 16 MB

Motion

GSAP ScrollTrigger + Lenis

FIELD — an experiment in procedural rendering · 2026

FIELD

initialising webgpu

WebGPU required

This one needs a newer engine.

The field is drawn by a WebGPU compute pass, which this browser doesn’t expose yet. Chrome, Edge, or Safari 26+ on a desktop will run it.