Meadow Walk
An endless, unhurried flight over a windy meadow at dusk. There are half a million blades of grass, a
few ponds and paths worn into the hills, and the cursor sends soft waves rolling through the field.
Every number that shapes it is on a slider.
Live demo: https://kloserock97-tech.github.io/meadow-walk/
The idea
The meadow is one function. Height at any point of the ground is a warped fractal noise, and everything
that stands on the ground asks that function where the ground is: the terrain mesh, every blade of grass,
every pebble, the shadow pass and the camera. Asking it directly would mean evaluating the noise half a
million times per pass, so it is asked once. Each frame the height of the area around the camera is drawn
into a half-float texture, and all the shaders only read from it.
The camera needs the ground too, to stay above the hills and to find where the cursor points, so the
same function lives once more in JavaScript. The noise is built on an integer hash. Integer arithmetic
in JavaScript (Math.imul, >>> 0) reproduces the GPU bit for bit, which the usual fract(sin(...))
cannot do. The cursor lands on the very blade it is over.
The grass
Two layers of instanced blades, both placed entirely in the vertex shader:
- near: 360,000 tapered blades of five vertices on a 26×26 patch in front of the camera, receiving shadows,
- far: 140,000 single triangles on a 70×70 patch, wider and cheaper, without shadows.
Further away the grass is only a colour of the ground, and the fog does the rest. Each blade wraps
around the camera with mod, so the patches follow the walk without any bookkeeping. A blade skips
water and worn paths, grows in clumps, and bends under a travelling wave plus slow gusts of noise. The
wind keeps its own clock, so changing its speed changes the tempo and the field does not jump.
The cursor
Moving the cursor leaves a trail of points. Each point sends out a ring that grows, fades in and slowly
breathes out. Grass, pebbles and dust all read one shared field built from those rings. On the crest a
pebble lifts a little and slides outwards, the grass lies down, the dust rises, and when the ring has
passed everything settles back where it was. Positions are a pure function of the rings that are still
alive, so nothing can drift.
The look
A low sun and long shadows, a near-black sky, and a film-like finish: exposure, depth of field on the
foreground, bloom, a little lens fringing, ACES tone mapping, grading, a mid-tone grain and a vignette.
The grain is written by hand: stock noise redraws white noise over the whole frame every monitor
refresh, which reads as flicker on a dark image. Here it lives only in the mid-tones and changes 24
times a second, like film. The wind you can switch on is synthesised with Web Audio from filtered noise,
and the project ships no audio files.
Controls
| Folder | What's in it |
|---|
| Walk | speed, lowest and highest flight, path sway, how much the camera looks around, freeze time |
| Meadow | hill height and frequency, water level, colours of lowlands, slopes, dry crests, rock, paths and ponds |
| Grass | density, blade height and width, wind strength and speed, root, tip and dry-tip colours |
| Stones | amount, size, colour |
| Light and air | sun height, direction, colour and strength, sky light, sky colour, haze, dust amount and size |
| Cursor waves | strength, speed, how long they last |
| Look | exposure, saturation, contrast, bloom, foreground blur, lens fringing, film grain, vignette |
| View | lines of text over the field, wind sound, adaptive quality |
H hides the panel, Space freezes time, M switches the wind on and off, move the cursor over the grass.
The settings sit in a sheet at the bottom of the page, one tab per group. Drag anywhere on a row to change a value,
double-click it to type one, or use the arrow keys. The buttons in the top right switch between a light and a dark
panel, fold the sheet and reset everything.
Presets: dusk, spring, autumn, moor, frost. Copy link to this meadow writes the whole setup into the
address bar, so a version you like can be sent as a plain URL. Sliders ease into their new values, so
the hills flow into their new shape.
Performance
Almost all of the frame time goes into the grass. On an Intel Arc integrated GPU the full field runs at
about 75 fps at 2049×1078 and the next quality step at about 95. Quality adapts by itself: frame rate is
measured in 1.5-second windows, and when it drops the grass thins out gradually over a second and a
half. Resolution is never changed while the page is running, because reallocating the render targets
costs a visible hitch. The density slider and ?level=0..5 do the same by hand. ?q=low is a
lighter start for weak machines.
Running it
Node 22 or newer.
npm install
npm run dev # http://localhost:5173
npm run build # static site into dist/
npm run preview
.github/workflows/deploy.yml publishes dist/ to GitHub Pages on every push to main.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
