🌿 Perlin Noise

Perlin noise (Ken Perlin, 1983 — Academy Award) is a gradient noise function: pseudo-random gradients are assigned to lattice points, and the noise value at any position is the smoothly interpolated dot product with surroundings gradients. Unlike white noise, Perlin noise is smooth and continuous, making it ideal for natural-looking textures. Adding multiple octaves (fractional Brownian motion, fBm) at successively doubled frequencies and halved amplitudes produces terrain, clouds, fire and wood-grain. This version runs entirely on the GPU as a Three.js + GLSL fragment shader, so every slider repaints in real time. 🇺🇦 Українська

Render mode

fBm Parameters

Playback

ModeGreyscale
Octaves6
Z offset0.000
StatePlaying

How Perlin Noise Works

Each lattice cell has corners with pseudo-random unit gradient vectors. For a query point (x,y), compute offset vectors to each corner, dot with gradients, then blend with a smooth fade curve t³(6t²−15t+10). The result is continuous and roughly in [−1,+1]. fBm sums noctaves layers: noise(x·fi, y·fi) · gi, where f=lacunarity (default 2) and g=gain/persistence (default 0.5). High octaves add fine detail; high gain makes terrain rougher. Ridged/turbulence takes the absolute value of each octave to carve sharp ridges, and domain warping feeds noise back into its own coordinates for swirling, flow-like textures. Scrolling the Z slice over time gives a smooth morphing "4D" animation. Perlin noise (Ken Perlin, 1983) is the workhorse behind procedural terrain, clouds, water and textures across games and film.

About this simulation

This visualiser evaluates a classic 3D gradient (Perlin) noise function entirely on the GPU using a Three.js fragment shader, assigning pseudo-random gradients to lattice points and smoothly interpolating between them with a quintic fade curve. Multiple frequency layers are summed as fractional Brownian motion (fBm) — each octave doubles in frequency (lacunarity) while its amplitude shrinks by the gain/persistence factor — to build detailed, natural-looking noise fields. The third noise dimension is scrolled by time, producing continuous animation without any visible seams. Optional domain warping and a ridged/turbulence mode let the same underlying noise produce flowing, smoke-like distortions or sharp mountain-ridge silhouettes.

🔬 What it shows

A live GLSL fBm field rendered every frame: up to 8 octaves of classic Perlin gradient noise are summed with configurable lacunarity and gain, then mapped to five different colourings — plain greyscale height, a water/sand/grass/rock/snow terrain ramp, topographic-style contour lines, a warped flow-field tint, and an absolute-value ridged/turbulence look.

🎮 How to use

Pick a render mode (Greyscale, Terrain, Contours, Warp/flow, Ridged), then adjust Scale/frequency, Octaves (1–8), Lacunarity, Gain/persistence and Domain warp to reshape the noise field. The Animation speed slider scrolls the noise through its third dimension over time, Pause/Reset freeze or restore the defaults, and the "About & help" button opens an in-page modal with the same explanation.

💡 Did you know?

Ken Perlin invented this noise function in 1983 while working on visual effects for the film Tron, to replace the harsh, mechanical look of earlier procedural textures with something organic. The technique was so influential that he received a Technical Achievement Academy Award for it in 1997, and fBm built from Perlin noise still underlies most procedural terrain, cloud and fire effects in games and film today.

Frequently asked questions

What is Perlin noise, exactly?

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.

What does fBm mean and how does this simulation use it?

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.

What do the different render modes actually change?

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.

How is the animation generated without visible looping or seams?

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.

Is this Perlin noise computed on the CPU or the GPU?

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.