Move your mouse to rotate the camera and explore the 3D volumetric cloud. The cloud is generated using Perlin Noise with multiple octaves (Fractal Brownian Motion):

Perlin Noise works by:

1. Grid-based gradients: At each integer grid point, assign a random gradient vector
2. Distance vectors: For any point, compute vectors to the 8 surrounding grid corners (in 3D)
3. Dot products: Compute dot product between each gradient and its corresponding distance vector
4. Interpolation: Smoothly interpolate the 8 dot product values using a smoothstep function

For a 3D point $\mathbf{p}$, Perlin Noise:

1. Find the 8 grid corners: $\mathbf{i} = \lfloor \mathbf{p} \rfloor$, $\mathbf{f} = \text{fract}(\mathbf{p})$
2. Get gradients at each corner: $\mathbf{g}_{000}, \mathbf{g}_{100}, \ldots, \mathbf{g}_{111}$
3. Compute dot products: $d_{ijk} = \mathbf{g}_{ijk} \cdot (\mathbf{f} - \mathbf{i}_{ijk})$
4. Trilinear interpolation: $\text{noise} = \text{trilinear}(d_{000}, d_{100}, \ldots, \mathbf{u})$

Where $\mathbf{u} = s(\mathbf{f})$ is the smooth interpolation factor.

The smoothstep function ensures continuity:

This creates a smooth S-curve that eliminates discontinuities at grid boundaries. The function satisfies $s(0) = 0$, $s(1) = 1$, and has zero derivatives at both endpoints.

By combining multiple octaves of Perlin Noise at different frequencies and amplitudes, we create Fractal Brownian Motion:

Where:

• $a_i = a_0 \cdot r^i$ is the amplitude of octave $i$ (typically $r = 0.5$)
• $f_i = f_0 \cdot 2^i$ is the frequency of octave $i$ (typically $f_0 = 1$)

This creates natural-looking patterns with detail at multiple scales—perfect for clouds, terrain, marble, wood grain, and more.

The demo above uses FBM to create volumetric clouds:

• Multiple octaves create detail at various scales
• Density is computed from noise values
• Lighting uses noise gradients as normals

Perlin Noise excels at terrain:

• Use noise as height maps
• Combine multiple octaves for realistic landscapes
• Add domain warping for more complex patterns

Create endless variations:

• Marble: Use noise as a coordinate for sine waves
• Wood: Use noise along one axis for grain patterns
• Stone: Combine multiple noise layers

Perlin Noise is remarkably efficient:

• Runs at 60 FPS on modern hardware
• Even works well on mobile GPUs
• Can generate complex scenes in a single shader pass

The key is the grid-based structure, which allows efficient computation without expensive random number generation per pixel.

• Graphics Gems II (1991) - "An Image Synthesizer" by Ken Perlin
  • Amazon: Graphics Gems II
• Perlin Noise on Wikipedia
• Improved Perlin Noise - Ken Perlin's improved version

• Graphics Gems GLSL - Fast Noise Functions - Alternative noise implementations
• Graphics Gems GLSL Series Index - Return to series index