|
|
|
|
 |
WebGPU/WGSL Tutorials and Articles
Graphics and Compute ... |
|
|
|
 | Noise Categories - Managing the Madness! |  |
Their seems to be so many noise functions - their are hundreds if not thousands of noise algorithms - each with their own name and characteristics.
However, we try and categories the noise functions - group them together - so that we have a handful of types of noises.
Elaboration on an earlier article which was collecting noise functions ( LINK). In this article, we sort of try and organise things - and take things further. Each noise function is linked to an interactive example - so you can click on it and see a hacky version of the noise. Send me a quick email if you find a bug or think of a tidier version/better version :)
Out of the 60 example noise functions - we'll group them into 7 main categories (given below).
Noise Function Categories
Base Noise
1. Random Noise
2. Value Noise
3. Gradient Noise
4. White Noise
5. Uniform Noise
6. Blue Noise
7. Pink Noise
8. Gaussian Noise
Complex & Layered Noise
9. Fractal Noise
10. Octave Noise
11. Fractional Brownian Motion (FBM)
12. Turbulence Noise
13. Layered Noise
14. Perlin Noise
15. Fractal Cellular Noise
16. Noise Blending
17. Domain Warping
Directional Noise
18. Flow Noise
19. Anisotropic Noise
20. Gradient Squared Noise
21. Angular Gradient Noise
22. Spiral Noise
23. Stripe Noise
24. Stripe Gradient Noise
25. Directional Voronoi
Cellular Noise
26. Voronoi Noise
27. Worley Noise
28. Cellular Noise
29. Fractal Voronoi
30. Spiral Voronoi
31. Noisy Voronoi
Patterned Noise
32. Ring Noise
33. Radial Noise
34. Ripple Noise
35. Polygonal Grid Noise
36. Crosshatch Noise
37. Starburst Noise
38. Circular Wave Noise
39. Spiral Gradient Noise
40. Plasma Noise
41. Interference Noise
42. Checkerboard Noise
43. Hexagonal Noise
Animated/Temporal Noise
44. Offset Noise
45. Warped Noise
46. Seamless Noise
47. Texture Distortion Noise
48. Dynamic Noise
49. Time-Varying Voronoi
50. Animated Gradient Noise
Specialized Noise
51. Tileable Noise
52. Gradient Ridge Noise
53. Multiscale Noise
54. Spectral Noise
55. Blob Noise
56. Point Cluster Noise
57. Crystal Noise
58. Wavelet Noise
59. Ridged FBM Noise
60. Sparse Convolution Noise
The following give a small description of each example noise function from above - in addition to a mockup code implementation in WGSL (WebGPU Shader Language).
 | Base Noise |  |
1. Random Noise
Generates uncorrelated random values across the domain.
<?php
fn random(uv: vec2<f32>) -> f32 {
return fract(sin(dot(uv, vec2<f32>(12.9898, 78.233))) * 43758.5453);
}
2. Value Noise
Interpolates random values to create smooth transitions.
<?php
fn valueNoise(uv: vec2<f32>) -> f32 {
let cell = floor(uv);
let frac = fract(uv);
let randomValues = vec2<f32>(random(cell), random(cell + vec2<f32>(1.0, 0.0)));
return mix(randomValues.x, randomValues.y, frac.x);
}
3. Gradient Noise
Utilizes gradient vectors to interpolate smooth noise.
<?php
fn gradientNoise(uv: vec2<f32>) -> f32 {
let cell = floor(uv);
let grad = fract(sin(vec2<f32>(dot(cell, vec2<f32>(127.1, 311.7)), dot(cell + vec2<f32>(1.0, 0.0), vec2<f32>(269.5, 183.3)))) * 43758.5453);
return dot(grad, fract(uv));
}
4. White Noise
Produces uncorrelated, high-frequency noise.
<?php
fn whiteNoise(uv: vec2<f32>) -> f32 {
return random(uv);
}
5. Uniform Noise
Generates noise with uniform distribution.
<?php
fn uniformNoise(uv: vec2<f32>) -> f32 {
return step(0.5, random(uv));
}
6. Blue Noise
Low-frequency noise optimized for dithering.
<?php
fn blueNoise(uv: vec2<f32>) -> f32 {
return smoothstep(0.2, 0.8, random(uv));
}
7. Pink Noise
Lower frequency noise useful in audio synthesis.
<?php
fn pinkNoise(uv: vec2<f32>) -> f32 {
return pow(random(uv), 1.0 / 3.0);
}
8. Gaussian Noise
Generates noise with a Gaussian distribution.
<?php
fn gaussianNoise(uv: vec2<f32>) -> f32 {
let rand1 = random(uv);
let rand2 = random(uv + vec2<f32>(1.0, 1.0));
return sqrt(-2.0 * log(rand1)) * cos(6.283185 * rand2);
}
 | Complex/Layered Noise |  |
9. Fractal Noise
Combines multiple layers of noise at different scales.
<?php
fn fractalNoise(uv: vec2<f32>, octaves: i32) -> f32 {
var value = 0.0;
var frequency = 1.0;
var amplitude = 1.0;
for (var i: i32 = 0; i < octaves; i = i + 1) {
value += fbm(uv * frequency) * amplitude;
frequency *= 2.0;
amplitude *= 0.5;
}
return value;
}
10. Octave Noise
A simpler layering of multiple frequencies of noise.
<?php
fn octaveNoise(uv: vec2<f32>, octaves: i32) -> f32 {
var result = 0.0;
for (var i: i32 = 0; i < octaves; i = i + 1) {
result += fbm(uv * pow(2.0, f32(i))) / pow(2.0, f32(i));
}
return result;
}
11. Fractional Brownian Motion (FBM)
A widely-used method for natural-looking noise patterns.
<?php
fn fbm(uv: vec2<f32>) -> f32 {
var value = 0.0;
var frequency = 1.0;
var amplitude = 0.5;
for (var i: i32 = 0; i < 5; i = i + 1) {
value += gradientNoise(uv * frequency) * amplitude;
frequency *= 2.0;
amplitude *= 0.5;
}
return value;
}
12. Turbulence Noise
A variant of FBM using absolute values for sharper textures.
<?php
fn turbulence(uv: vec2<f32>) -> f32 {
var value = 0.0;
var frequency = 1.0;
for (var i: i32 = 0; i < 5; i = i + 1) {
value += abs(gradientNoise(uv * frequency));
frequency *= 2.0;
}
return value;
}
13. Layered Noise
Stacks noise layers for texture complexity.
<?php
fn layeredNoise(uv: vec2<f32>, layers: i32) -> f32 {
var result = 0.0;
for (var i: i32 = 0; i < layers; i = i + 1) {
result += gradientNoise(uv * pow(2.0, f32(i))) / pow(2.0, f32(i));
}
return result;
}
14. Perlin Noise
A classic noise function used in procedural generation.
<?php
fn perlinNoise(uv: vec2<f32>) -> f32 {
let cell = floor(uv);
let grad = fract(sin(vec2<f32>(dot(cell, vec2<f32>(127.1, 311.7)), dot(cell + vec2<f32>(1.0, 0.0), vec2<f32>(269.5, 183.3)))) * 43758.5453);
return dot(grad, fract(uv));
}
15. Fractal Cellular Noise
Combines cellular noise with fractal layers.
<?php
fn fractalCellularNoise(uv: vec2<f32>, layers: i32) -> f32 {
var result = 0.0;
for (var i: i32 = 0; i < layers; i = i + 1) {
result += voronoiNoise(uv * pow(2.0, f32(i))) / pow(2.0, f32(i));
}
return result;
}
16. Noise Blending
Interpolates between multiple noise types.
<?php
fn noiseBlending(uv: vec2<f32>, weight: f32) -> f32 {
return mix(gradientNoise(uv), voronoiNoise(uv), weight);
}
17. Domain Warping
Applies noise to distort its own domain.
<?php
fn domainWarping(uv: vec2<f32>) -> f32 {
let warp = fbm(uv);
return fbm(uv + warp);
}
 | Directional Noise |  |
18. Flow Noise
Produces smoothly flowing patterns, ideal for fluid effects.
<?php
fn flowNoise(uv: vec2<f32>, time: f32) -> f32 {
let warpedUV = uv + vec2<f32>(sin(time), cos(time));
return fbm(warpedUV);
}
19. Anisotropic Noise
Stretches noise along a specific axis for directional effects.
<?php
fn anisotropicNoise(uv: vec2<f32>, direction: vec2<f32>) -> f32 {
let stretchUV = uv * direction;
return gradientNoise(stretchUV);
}
20. Gradient Squared Noise
Amplifies directional gradients for sharp features.
<?php
fn gradientSquaredNoise(uv: vec2<f32>) -> f32 {
let grad = gradientNoise(uv);
return grad * grad;
}
21. Angular Gradient Noise
Creates angular patterns for circular or star-like effects.
<?php
fn angularGradientNoise(uv: vec2<f32>) -> f32 {
let angle = atan2(uv.y, uv.x) * 0.5 / 3.14159;
return abs(fract(angle) - 0.5);
}
22. Spiral Noise
Generates spiraling patterns.
<?php
fn spiralNoise(uv: vec2<f32>, twists: f32) -> f32 {
let angle = atan2(uv.y, uv.x);
return abs(sin(angle * twists + length(uv)));
}
23. Stripe Noise
Produces parallel line patterns.
<?php
fn stripeNoise(uv: vec2<f32>, frequency: f32) -> f32 {
return abs(sin(uv.x * frequency));
}
24. Stripe Gradient Noise
Adds a gradient effect to stripe noise.
<?php
fn stripeGradientNoise(uv: vec2<f32>, frequency: f32, minValue: f32, maxValue: f32) -> f32 {
return mix(minValue, maxValue, abs(sin(uv.x * frequency)));
}
25. Directional Voronoi
Orients Voronoi noise in a specific direction.
<?php
fn directionalVoronoi(uv: vec2<f32>, direction: vec2<f32>) -> f32 {
let dirUV = uv + direction;
return voronoiNoise(dirUV);
}
 | Cellular Noise |  |
26. Voronoi Noise
Generates cell-like patterns with varying sizes.
<?php
fn voronoiNoise(uv: vec2<f32>) -> f32 {
let cell = floor(uv);
let frac = fract(uv);
var minDist = 1.0;
for (var y: i32 = -1; y <= 1; y = y + 1) {
for (var x: i32 = -1; x <= 1; x = x + 1) {
let neighbor = cell + vec2<f32>(f32(x), f32(y));
let point = neighbor + random(neighbor);
let dist = length(frac - (point - cell));
minDist = min(minDist, dist);
}
}
return minDist;
}
27. Worley Noise
Computes distances to nearest neighbors for texture variety.
<?php
fn worleyNoise(uv: vec2<f32>) -> f32 {
var minDist: f32 = 1e9;
var featurePoint: vec2<f32>;
// Generate feature points and calculate distance
for (var i: i32 = -1; i <= 1; i = i + 1) {
for (var j: i32 = -1; j <= 1; j = j + 1) {
featurePoint = floor(uv) + vec2<f32>(f32(i), f32(j)) + fract(sin(vec2<f32>(dot(floor(uv) + vec2<f32>(f32(i), f32(j)), vec2<f32>(12.9898, 78.233))) * 43758.5453));
var dist: f32 = length(uv - featurePoint);
if (dist < minDist) {
minDist = dist;
}
}
}
return minDist;
}
28. Cellular Noise
Combines cellular techniques for organic looks.
<?php
fn cellularNoise(uv: vec2<f32>) -> f32 {
return worleyNoise(uv) - voronoiNoise(uv); // or another combination of functions
}
29. Fractal Voronoi
Layers Voronoi noise for fractal patterns.
<?php
fn fractalVoronoi(uv: vec2<f32>, octaves: i32) -> f32 {
var result = 0.0;
for (var i: i32 = 0; i < octaves; i = i + 1) {
result += voronoiNoise(uv * pow(2.0, f32(i))) / pow(2.0, f32(i));
}
return result;
}
30. Spiral Voronoi
Twists Voronoi cells into spirals.
<?php
fn spiralVoronoi(uv: vec2<f32>, twists: f32) -> f32 {
return voronoiNoise(uv + vec2<f32>(sin(twists), cos(twists)));
}
31. Noisy Voronoi
Adds randomness to Voronoi cells.
<?php
fn noisyVoronoi(uv: vec2<f32>) -> f32 {
return voronoiNoise(uv) * random(uv);
}
 | Patterned Noise |  |
32. Ring Noise
Produces concentric rings.
<?php
fn ringNoise(uv: vec2<f32>) -> f32 {
return abs(sin(length(uv) * 10.0));
}
33. Radial Noise
Creates circular, radial patterns.
<?php
fn radialNoise(uv: vec2<f32>) -> f32 {
return fract(length(uv) * 5.0);
}
34. Ripple Noise
Mimics ripples in water.
<?php
fn rippleNoise(uv: vec2<f32>) -> f32 {
return sin(length(uv) * 10.0) * 0.5 + 0.5;
}
35. Polygonal Grid Noise
Creates a grid of polygons like hexagons.
<?php
fn polygonalGridNoise(uv: vec2<f32>, sides: f32) -> f32 {
let angle = atan2(uv.y, uv.x) + 3.14159;
let segment = floor(angle / (6.28318 / sides));
return fract(segment + random(uv));
}
36. Crosshatch Noise
Produces crosshatching patterns.
<?php
fn crosshatchNoise(uv: vec2<f32>, frequency: f32) -> f32 {
let lineX = step(0.5, sin(uv.x * frequency) * 0.5 + 0.5);
let lineY = step(0.5, sin(uv.y * frequency) * 0.5 + 0.5);
return lineX * lineY;
}
37. Starburst Noise
Radiates lines from a central point.
<?php
fn starburstNoise(uv: vec2<f32>) -> f32 {
return abs(sin(atan2(uv.y, uv.x) * 10.0));
}
38. Circular Wave Noise
Produces expanding concentric waves.
<?php
fn circularWaveNoise(uv: vec2<f32>, time: f32) -> f32 {
return sin(length(uv) * 10.0 - time);
}
39. Spiral Gradient Noise
Generates a gradient that spirals outward.
<?php
fn spiralGradientNoise(uv: vec2<f32>, frequency: f32, amplitude: f32) -> f32 {
let angle = atan2(uv.y, uv.x);
let dist = length(uv);
// Create a spiral pattern with frequency and amplitude controls
let spiral = sin(angle * frequency + dist * amplitude);
// Blend the spiral pattern with noise
let noise = random(uv);
// Fade the effect based on distance
let fade = smoothstep(0.0, 1.0, dist);
// Combine the spiral and noise with the fade
return mix(noise, spiral, fade);
}
40. Plasma Noise
Produces a plasma-like, colorful pattern resource.
<?php
fn plasmaNoise(uvin: vec2<f32>) -> f32 {
var scale:f32 = 0.1;
var time: f32 = 0.5;
var uv = uvin*scale;
let layer1 = sin(uv.x * 10.0 + time) * cos(uv.y * 10.0 + time);
let layer2 = sin(uv.x * 20.0 + uv.y * 20.0 + time * 2.0) * 0.5;
let layer3 = cos(uv.x * 40.0 - uv.y * 40.0 + time * 4.0) * 0.25;
let noise = layer1 + layer2 + layer3;
return noise * 0.5 + 0.5; // Normalize to range [0, 1]
}
41. Interference Noise
Simulates wave interference.
<?php
fn interferenceNoise(uv: vec2<f32>) -> f32 {
return sin(uv.x * 5.0) + cos(uv.y * 5.0);
}
42. Checkerboard Noise
Produces a checkerboard pattern.
<?php
fn checkerboardNoise(uv: vec2<f32>) -> f32 {
let check = floor(uv.x) + floor(uv.y);
return fract(sin(check) * 43758.5453);
}
43. Hexagonal Noise
Creates a hexagonal tiling pattern.
<?php
fn hexagonalNoise(uv: vec2<f32>) -> f32 {
// Constants to define hexagonal grid
let k = vec2<f32>( sqrt(3.0), 1.0);
// Transform UV coordinates to hexagonal grid space
let uv_hex = vec2<f32>(
uv.x * k.x + uv.y * k.y,
uv.y * k.x - uv.x * k.y
);
// Calculate hexagonal cell coordinates
let cell = floor(uv_hex);
let f = fract(uv_hex);
// Calculate noise values for the corners of the hexagon
let corners = array<vec2<f32>, 6>(
vec2<f32>(0.0, 0.0),
vec2<f32>(1.0, 0.0),
vec2<f32>(0.5, 0.866),
vec2<f32>(-0.5, 0.866),
vec2<f32>(-1.0, 0.0),
vec2<f32>(-0.5, -0.866)
);
var noise_value: f32 = 0.0;
var min_distance: f32 = 1e10;
for (var i: u32 = 0u; i < 6u; i = i + 1u) {
let corner = cell + corners[i];
let dist = distance(uv_hex, corner);
if (dist < min_distance) {
min_distance = dist;
noise_value = fract(sin(dot(corner, vec2<f32>(12.9898, 78.233))) * 43758.5453);
}
}
return noise_value;
}
 | Animated/Temporal Noise |  |
44. Offset Noise
Introduces an offset effect, often used for animation.
<?php
fn offsetNoise(uv: vec2<f32>, time: f32) -> f32 {
return random(uv + time);
}
45. Warped Noise
Distorts the noise field over time to create dynamic effects.
<?php
fn warpedNoise(uv: vec2<f32>, time: f32) -> f32 {
let warpedUV = uv + sin(time + uv) * 0.5;
return random(warpedUV);
}
46. Seamless Noise
Creates a continuous, looping noise pattern, typically used in textures.
<?php
fn seamlessNoise(uv: vec2<f32>) -> f32 {
let repeatUV = fract(uv);
return random(repeatUV);
}
47. Texture Distortion Noise
Distorts texture coordinates for dynamic texture animation.
<?php
fn textureDistortionNoise(uv: vec2<f32>, time: f32) -> f32 {
let distortedUV = uv + sin(uv + time) * 0.1;
return random(distortedUV);
}
48. Dynamic Noise
Changes its characteristics over time for evolving patterns.
<?php
fn dynamicNoise(uv: vec2<f32>, time: f32) -> f32 {
let dynamicUV = uv + time * 0.1;
return random(dynamicUV);
}
49. Time-Varying Voronoi
Modifies the Voronoi cells over time for moving patterns.
<?php
fn timeVaryingVoronoi(uv: vec2<f32>, time: f32) -> f32 {
let timeShiftedUV = uv + time * 0.1;
return voronoiNoise(timeShiftedUV);
}
50. Animated Gradient Noise
Creates animated gradients by adjusting the direction over time.
<?php
fn animatedGradientNoise(uv: vec2<f32>, time: f32) -> f32 {
let angle = time + atan2(uv.y, uv.x);
let gradient = vec2<f32>(cos(angle), sin(angle));
return dot(uv, gradient);
}
 | Specialized Noise |  |
51. Tileable Noise
Generates repeating noise patterns, typically used for textures.
<?php
fn tileableNoise(uv: vec2<f32>) -> f32 {
return random(fract(uv));
}
52. Gradient Ridge Noise
Adds ridges to gradient noise for more pronounced features.
<?php
fn gradientRidgeNoise(uv: vec2<f32>) -> f32 {
let gradient = gradientNoise(uv);
return abs(gradient) * 2.0 - 1.0;
}
53. Multiscale Noise
Combines multiple noise functions at different scales.
<?php
fn multiscaleNoise(uv: vec2<f32>, scales: i32) -> f32 {
var result = 0.0;
for (var i: i32 = 0; i < scales; i = i + 1) {
result += random(uv * pow(2.0, f32(i))) / pow(2.0, f32(i));
}
return result;
}
54. Spectral Noise
Noise with controlled frequency components, often for sound design.
<?php
fn spectralNoise(uv: vec2<f32>, frequency: f32) -> f32 {
return random(uv * frequency);
}
55. Blob Noise
Creates irregular blob-like structures.
<?php
fn blobNoise(uv: vec2<f32>, size: f32) -> f32 {
var minDist: f32 = 0.0; // Initialize with a large value
for (var y: i32 = -1; y <= 1; y = y + 1) {
for (var x: i32 = -1; x <= 1; x = x + 1) {
let neighbor = vec2<f32>(f32(x), f32(y));
let point = floor(uv) + neighbor + random(floor(uv) + neighbor);
let dist = length(uv - point) * 2.0;
if ( dist < 1.5 && minDist==0.0)
{
minDist = 8.0;
}
minDist = min(minDist, dist) ;
}
}
return exp(-minDist / size);
}
56. Point Cluster Noise
Generates clustered points for dense structures.
<?php
fn pointClusterNoise(uv: vec2<f32>) -> f32 {
return step(0.5, random(uv));
}
57. Crystal Noise
Creates crystal-like sharp, angular noise patterns.
<?php
fn crystalNoise(uv: vec2<f32>) -> f32 {
var minDist: f32 = 1.0; // Initialize with a large value
var facet: vec2<f32> = vec2<f32>(0.0, 0.0);
for (var y: i32 = -1; y <= 1; y = y + 1) {
for (var x: i32 = -1; x <= 1; x = x + 1) {
let neighbor = vec2<f32>(f32(x), f32(y));
let point = floor(uv) + neighbor + random(floor(uv) + neighbor);
let dist = length(uv - point);
if (dist < minDist) {
minDist = dist;
facet = point;
}
}
}
let angle = atan2(uv.y - facet.y, uv.x - facet.x);
return abs(sin(angle * 10.0));
}
58. Wavelet Noise
Uses wavelets to generate smooth, multi-scale noise.
<?php
fn waveletNoise(uv: vec2<f32>, scale: f32) -> f32 {
let noise = sin(uv.x * scale + random(uv) * scale) * cos(uv.y * scale + random(uv.yx) * scale);
return abs(noise);
}
59. Ridged FBM Noise
A variant of FBM that enhances high-frequency features.
<?php
fn ridgedFBM(uv: vec2<f32>, octaves: i32) -> f32 {
var result = 0.0;
var amplitude = 1.0;
for (var i: i32 = 0; i < octaves; i = i + 1) {
result += amplitude * (1.0 - abs(fbm(uv * pow(2.0, f32(i))))) / pow(2.0, f32(i));
amplitude *= 0.5;
}
return result;
}
60. Sparse Convolution Noise
Noise with sparse, scattered values used for specialized effects.
<?php
fn sparseConvolutionNoise(uv: vec2<f32>) -> f32 {
var scale: f32 = 2.0;
var total: f32 = 0.0;
var weight: f32 = 0.0;
for (var y: i32 = -1; y <= 1; y = y + 1) {
for (var x: i32 = -1; x <= 1; x = x + 1) {
let neighbor = vec2<f32>(f32(x), f32(y));
let offset = random(neighbor) * scale;
let point = uv + neighbor + offset;
let value = random(point);
let dist = length(neighbor);
let influence = 1.0 / (1.0 + dist);
total += value * influence;
weight += influence;
}
}
return total / weight;
}
 | Resources & Links |  |
• WebGPU Code Samples/Interactive (LINK)
• Lots of noise functions on a single image (LINK)
• Earlier article when research the and collecting different noise functions (just functions) (LINK)
• Diary/run through of noise (LINK)
|
|
|
|
|
|
|
|