Windcrest

A hill where every blade of grass is real geometry. A few hundred thousand blades are drawn in one instanced call, and the CPU animates none of them. Everything you can see is on a slider: how much grass there is and how it grows, what the wind does to it, how it is lit, and the two tricks that keep it from shimmering.

Live demo: https://kloserock97-tech.github.io/windcrest/

This is the grass from the first screen of my portfolio, taken out of the scene and put on a panel.

The idea

A blade is seven vertices with a little data attached: where it stands, which way it faces, how long it is, and which tuft it belongs to. That data is written once, when the meadow is planted, and the CPU does not touch it again.

Every frame the vertex shader works out where the tip of each blade is, from the wind at that spot, the cursor and the camera. No state is carried from one frame to the next, and three things follow from that:

• The blade count is a slider. At 20 thousand or at 600 thousand the meadow keeps its shape and only gets denser.
• Time can be frozen. Press Space and the hill stops in the middle of a gust.
• The CPU does no work per blade. It uploads a clock and a wind direction, and the grass is one draw call.

How the meadow grows

Blades are planted by rejection sampling. A random spot on the disc survives with the density the meadow should have there: slow noise thins some patches, and near the rim the grass fades out, so the meadow has no hard edge.

Then each blade finds its cell in a jittered Voronoi grid, steps a little towards the cell centre and remembers how far to lean. Blades of one cell share a height and a tone. This turns a flat carpet into tufts with gaps between them. Tuft size and lean into tufts change it live.

Blades are 9 to 18 centimetres long. Shorter grass is smaller than a pixel at this distance, and all the screen can do with it is shimmer.

Wind

The wind comes in patches. Two layers of value noise scroll downwind at different speeds and are thresholded, which leaves calm areas between the gusts. A weak travelling wave stays underneath so the slope still reads as one surface.

A blade keeps its length. The further the tip is pushed sideways, the lower it sits, so a gust flattens the grass and never stretches it. Flattened blades also turn their pale underside up, and that is the silver patch you see running across the hill.

The noise uses an integer hash. A sine-based hash loses precision at the coordinates blades live at, and the wind starts to band.

Two tricks against shimmer

Thin geometry is hard to draw calmly. A blade that is half a pixel wide hits a pixel centre on one frame and misses it on the next, and antialiasing does not fix that.

1. Minimum width in pixels. The shader knows the size of a pixel at the blade's distance and never lets a blade get thinner than that. Set min width to zero to see what it prevents.
2. Widening with distance. Fewer blades land on a pixel as distance grows, so the ones that remain get wider and the turf does not thin out into speckle. Blades seen edge-on get wider too.

On top of that the blade edge is drawn with alpha to coverage: the distance to the edge, measured in pixels through fwidth, becomes a share of MSAA samples. A slanted blade stops being a staircase.

Light

Lighting is computed per vertex. Blades overlap several layers deep, so anything done per fragment is paid many times over. Three things make a flat ribbon read as grass:

• A rounded normal: the edges of the ribbon look sideways and the middle looks forward, so the strip shades like a round stem without extra geometry.
• Light through the tips when you look towards the sun. It is kept off the very tip, where it would collect into a line of bright dots.
• Self-shadowing: almost no sky reaches the roots, so the turf has depth.

Far away the blade normal settles onto the slope normal, and light stops jumping from pixel to pixel.

Controls

Group	What it does
blades / radius	how many blades and how wide the meadow is
tuft size / lean into tufts	the Voronoi cell and how strongly blades gather into it
blade length / width / shape	size of a blade, and 7 vertices or a 3-vertex far LOD
strength / direction / gust size / flutter	the wind: how hard, where from, how big the patches are, how much a blade shivers
cursor radius	how wide the trail you leave in the grass is
sun height / direction / power, light through tips	the sun
sky light, from above, from below, haze, horizon, zenith	the sky and the air
root / middle / tip / dry tips	grass colour along the blade, and the share of sun-bleached blades
min width / widen with distance / alpha to coverage	the anti-shimmer tricks, each can be switched off

H hides the panel, Space freezes time, drag to orbit, scroll to zoom, move the pointer 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.

Five presets are included (sunset, midday, gale, august, moonlit). Copy link to this look puts the whole setup in the address bar, so a version you liked can be sent to someone as a plain URL.

midday	gale	moonlit

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗