🏔 Perlin Noise — Procedural Terrain & Texture Generator

Perlin noise is a type of gradient noise: pseudo-random unit gradient vectors are assigned to the corners of a lattice, and the noise value at any point is found by taking the dot product between each nearby gradient and the offset vector to that point, then blending the results with a smooth fade curve. Unlike pure white noise, this produces continuous, natural-looking variation rather than harsh static, which is why it is the standard building block for procedural terrain and textures.

fBm stands for fractional Brownian motion, the technique of summing several "octaves" of the same noise function at increasing frequencies and decreasing amplitudes. In this simulation each octave's frequency is multiplied by the Lacunarity slider (default 2, meaning it doubles) while its amplitude is multiplied by the Gain/persistence slider (default 0.5), and up to 8 octaves are combined this way to add fine detail on top of broad shapes.

All five modes share the same underlying fBm field but colour or post-process it differently. Greyscale shows the raw height value directly; Terrain maps height through a water-sand-grass-rock-snow colour ramp; Contours draws iso-lines like a topographic map; Warp/flow feeds the noise back into its own coordinates (domain warping) for swirling, smoke-like shapes; and Ridged takes the absolute value of each octave before summing, which carves sharp mountain-ridge-like features instead of smooth hills.

The noise function used here is genuinely three-dimensional (x, y and a time-driven z), not a 2D texture that gets scrolled. Every frame, the Animation speed value advances a "Z offset" clock that becomes the third coordinate fed into the noise function, so the whole 2D slice morphs smoothly and continuously through the underlying 3D noise volume, with no repeating pattern or visible seam.

Entirely on the GPU. The noise, fade curve, fBm summation, domain warping and colour ramps are all implemented as GLSL code inside a Three.js fragment shader, so every pixel on screen evaluates its own noise value in parallel each frame. That is what allows octaves, scale and warp to be pushed to their maximum values while the visualisation keeps repainting smoothly in real time.