The Erosion | Blog | Artificial Noodles

Inspired by Erosion on Wikipedia

Built with Pure WebGL2 · CPU Particle Erosion · GPU Relief Shading · RGBA8 16-bit Encoding

Techniques Hash-based gradient noise · Ridged FBM terrain · Gradient-following raindrop simulation · Brush-weighted erosion/deposition · Directional + fill lighting · Height-mapped terrain coloring

Direction Water is the most patient sculptor — given enough time, it defeats stone

Result A living terrain that erodes under your cursor, carving river networks and canyons in real time, with narrative milestones marking geological epochs

The Story

The Grand Canyon is 277 miles long, up to 18 miles wide, and over a mile deep. It was carved by water. Not a cataclysm. Not a single event. Just the Colorado River running downhill for six million years, carrying a few grains of sandstone per second.

Erosion is the quietest force in geology. It has no drama — no eruptions, no earthquakes, no sudden violence. A raindrop lands on a slope. It flows downhill, following the steepest gradient. It picks up a grain of sediment where it moves fast, deposits one where it slows. It evaporates. Another raindrop follows the same path, deepening it imperceptibly. Then another. The path becomes a channel. The channel becomes a gully. The gully becomes a canyon. Given enough drops, water carves through anything.

What makes hydraulic erosion beautiful is its self-organizing geometry. Water doesn’t plan river networks. It doesn’t know about drainage basins or tributary angles. Each drop follows one rule: flow downhill. But the cumulative effect of millions of drops following that single rule produces branching channel networks with consistent tributary junction angles, logarithmic stream-order hierarchies, and fractal drainage patterns that look identical whether you’re viewing a hillside rivulet or the Amazon basin from orbit. The structure emerges from the substrate’s memory — every drop that passes leaves a slightly deeper groove, and the next drop is more likely to follow it. Positive feedback turns random rainfall into organized rivers.

The agents of erosion include rainfall, rivers, coastal waves, glaciers, and wind. But water is the universal sculptor. It shaped the Grand Canyon and the chalk cliffs of Dover. It hollowed limestone into cave systems and ground the Appalachians from Himalayan heights down to rolling hills. Every landscape on Earth is a record of water’s patience.

The Take

The experience puts you in control of geological time. The screen shows a procedurally generated terrain — golden ridges, pale peaks, dark valleys — lit by a low-angle sun that catches every slope and crevice. Your cursor is a rainstorm. Move it over the terrain and hundreds of simulated raindrops fall per frame, each one flowing downhill, eroding where it moves fast, depositing sediment where it slows.

At first, the changes are invisible. The terrain looks permanent. But keep your cursor moving and channels begin to appear — dark grooves where water has converged and cut deeper. The channels darken further as the water trail map records where flow concentrates. Move your cursor to a ridge and watch water split around it, carving twin valleys that deepen with every pass. Move it to a peak and watch the summit flatten as sediment is carried into the basins below.

A years counter in the corner accelerates as you erode — starting in the hundreds, climbing through thousands, then millions. Narrative milestones mark the journey. “The rain begins. Droplets find the lowest path.” Then: “Channels form where water converges. The terrain remembers every drop.” By the time you reach the final milestone, the terrain is unrecognizable from where it started — peaks worn to plateaus, valleys carved to canyons, ridges dissected into branching river networks. “The Grand Canyon is just rain and patience.”

Leave the experience idle and ambient rain falls gently across the entire terrain, slowly eroding it without your intervention. The land weathers whether you watch or not. But concentrate your cursor and the erosion accelerates dramatically — you’re compressing millions of years into seconds, watching geological time unfold under your fingertip.

The Tech

Terrain Generation: Hash-Based Gradient Noise

The initial 512x512 heightmap is generated using fractal Brownian motion with 8 octaves of gradient noise. Critically, the noise uses integer hash functions (hash2: multiply by large primes, XOR-shift) rather than the common sin(dot(co, vec2(12.9898, 78.233))) approach, which produces diagonal striping artifacts at large coordinates. Eight gradient directions per hash give smooth, artifact-free noise at any scale.

The base terrain is blended with ridged noise — 1.0 - abs(fbm(...)) squared — to produce mountain-like features with sharp ridges and steep valleys. A diagonal mountain chain is added via a Gaussian ridge function, and five procedural peaks with varying sharpness and height give the terrain recognizable topography. A smooth cosine edge falloff prevents harsh terrain boundaries.

Hydraulic Erosion: CPU Particle Simulation

Each frame, 300 raindrops (120 on mobile) are spawned in a Gaussian distribution around the cursor position. Each drop carries position, direction, speed, water volume, and sediment load. For up to 55 steps, the drop:

Samples the gradient via bilinear interpolation of the four nearest heightmap cells
Updates direction blending the gradient with its previous direction via an inertia factor (0.12) — this prevents drops from zigzagging and produces smooth, natural-looking channels
Computes carrying capacity from slope steepness, speed, and water volume — fast water on steep slopes can carry more sediment
Erodes or deposits — if carrying less than capacity, it erodes; if carrying more (or moving uphill), it deposits. Both operations use a precomputed brush kernel (radius 2) that distributes the effect smoothly across neighboring cells, preventing single-pixel gouges
Updates speed from the height difference (drops accelerate downhill, decelerate uphill) and evaporates a fraction of water volume each step

The brush-weighted erosion is essential. Without it, each drop carves a 1-pixel trench — jagged and artificial. The brush spreads erosion across a small neighborhood, producing smooth, realistic channels that widen naturally as flow concentrates.

16-Bit Height Encoding in RGBA8

R32F textures silently fail on some GPUs — the texture uploads without error, but the shader reads zeros. The solution: encode the float heightmap into RGBA8 using two bytes. R = highByte, G = lowByte, with the shader reconstructing via h = R + G / 256.0. This gives 65,536 discrete height levels — more than enough resolution for smooth relief shading — with universal GPU compatibility.

Relief-Shaded GPU Rendering

The fragment shader reconstructs surface normals from the height gradient (sampling four cardinal neighbors), then applies a multi-component lighting model:

Directional sunlight from the upper-left at a low angle, warm-tinted (1.0, 0.92, 0.8), with strong diffuse contribution for dramatic relief shadows in carved channels
Cool fill light from the opposite direction at 15% intensity, preventing total blackout in shadow
Specular highlights (Blinn-Phong, exponent 32) catching ridge tops and channel edges
Ambient occlusion approximated from the height difference between a cell and its neighbors — carved channels sit lower than their surroundings, so they darken naturally

Height-based terrain coloring runs through six bands: deep carved channels (near-black earth), valley floors (dark brown), sandy lowlands, golden midlands, bright ridges, and pale summits. Steep slopes shift to a cooler rock color. Sediment deposits lighten the terrain. Water trails darken it with a wet-earth tint.

Water Trail Visualization

A separate Float32Array accumulates water flow — each raindrop adds to the trail map as it passes through a cell. The trail decays by 1% per frame, so active channels glow with recent flow while abandoned ones fade. The trail data is packed into the green channel of a second RGBA8 texture and used in the shader to darken areas of concentrated water flow, making the channel network visible even before the terrain has eroded significantly.

Narrative Milestones

Five milestones are triggered by cumulative cursor-driven rainfall (ambient rain doesn’t count). The years counter accelerates with interaction — 1000 + totalDrops * 0.5 years per second when the cursor is active versus 50 years per second when idle. This creates the sensation of geological time compressing under your attention. By the final milestone at 150,000 drops, the counter reads in the millions of years.

Experience: The Erosion

This blog post was AI generated with Claude Code. Authored by Artificial Noodles.