www.xbdev.net
xbdev - software development
Wednesday January 15, 2025
Home | Contact | Support | WebGPU Graphics and Compute ...
<<
 

Advert (Support Website)



 
     
 

WebGPU/WGSL Tutorials and Articles

Graphics and Compute ...

  


Noise Functions


Wow! Are their really this many types of noise function? YES! In fact, their are more! These are the 50 popular ones that you might come across in the literature and on your travels - however, in reality - noise functions is like nature - it has no limits to its creativity and diversity.

Below you'll find a complete list of noise functions - include an implementation example in WGSL (WebGPU Shader Language) - so you can give each one a try if you want.

A cool thing about noise functions is - they can be combined and connected together in all sorts of ways to create mutants and variations! You can also tinker with the constants, or add in a few extra parameters/functions to make the noise suddenly change and become a new type of noise.

The example functions have been provided for 2d noise samples - using a 2d seed - so they can be used for generating texture patterns! Just because I think it's nice to see what the noise looks like.

The following shows the noise functions using the base noise function 
random(..)
as the input when it depends on a noise input.


A plot of all the different noise functions on a single image.
A plot of all the different noise functions on a single image.



Modify the noise functions - so their base noise input is a smoothed noise function. This creates the following outputs:


Output for the various noise functions with a smoothed noise input.
Output for the various noise functions with a smoothed noise input.





1. Simple Random Noise


Generates pseudorandom values based on the input coordinates.
fn random(uv: vec2<f32>) -> f32 {
    return fract(sin(dot(uv, vec2<f32>(12.9898, 78.233))) * 43758.5453);
}




2. Gradient Noise


Interpolates gradients based on input coordinates for a smooth result.
fn gradientNoise(uv: vec2<f32>, gradient: vec2<f32>) -> f32 {
    let coord = fract(uv);
    return dot(coord, gradient);
}




3. Checkerboard Noise


Creates a repeating checkerboard pattern.
fn checkerboardNoise(uv: vec2<f32>) -> f32 {
    let check = floor(uv.x) + floor(uv.y);
    return fract(sin(check) * 43758.5453);
}




4. Hexagonal Grid Noise


Generates hexagonally tiled random values.
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;
}




5. Marble Noise


Combines sine waves to create vein-like marble textures.
fn marbleNoise(uv: vec2<f32>) -> f32 {
    let wave = sin(uv.x * 10.0 + random(uv) * 5.0);
    return abs(wave) * 0.5 + 0.5;
}




6. Ridged Noise


Creates sharp, ridge-like features by inverting noise values.
fn ridgedNoise(uv: vec2<f32>) -> f32 {
    let n = random(uv);
    return 1.0 - abs(n * 2.0 - 1.0);
}




7. Voronoi Noise


Produces cellular structures with closest-point Voronoi effects.
fn voronoiNoise(uv: vec2<f32>) -> f32 {
    var closestDist = 1.0;
    var secondClosestDist = 1.0;
    for (var x: i32 = -1; x <= 1; x = x + 1) {
        for (var y: i32 = -1; y <= 1; y = y + 1) {
            let neighbor = vec2<f32>(f32(x), f32(y));
            let point = floor(uv) + neighbor + fract(sin(dot(uv + neighbor, vec2<f32>(12.9898, 78.233))) * 43758.5453);
            let dist = length(uv - point);
            if (dist < closestDist) {
                secondClosestDist = closestDist;
                closestDist = dist;
            } else if (dist < secondClosestDist) {
                secondClosestDist = dist;
            }
        }
    }
    return secondClosestDist - closestDist;
}




8. Sinusoidal Noise


Combines sine functions for wave-like patterns.
fn sinusoidalNoise(uv: vec2<f32>) -> f32 {
    return sin(uv.x * uv.y + random(uv) * 3.14159);
}




9. Simplex Noise Approximation


A simplified version of simplex noise for smooth textures.
fn simplexNoise(uv: vec2<f32>) -> f32 {
    let s = (uv.x + uv.y) * 0.5;
    let skewed = vec2<f32>(floor(uv.x + s), floor(uv.y + s));
    let t = (skewed.x + skewed.y) * 0.36602540378;
    let unskewed = uv - skewed + t;
    return random(unskewed);
}




10. Value Noise


Generates noise by interpolating random values across a grid.
fn valueNoise(uv: vec2<f32>) -> f32 {
    let i = floor(uv);
    let f = fract(uv);
    return mix(mix(random(i), random(i + vec2<f32>(1.0, 0.0)), f.x),
               mix(random(i + vec2<f32>(0.0, 1.0)), random(i + vec2<f32>(1.0, 1.0)), f.x), f.y);
}




11. Fractal Brownian Motion (FBM)


Combines multiple layers of noise at varying frequencies and amplitudes for rich textures.
fn fbm(uv: vec2<f32>) -> f32 {
    var value = 0.0;
    var amplitude = 0.5;
    var frequency = 1.0;
    for (var i: i32 = 0; i < 5; i = i + 1) {
        value += amplitude * random(uv * frequency);
        frequency *= 2.0;
        amplitude *= 0.5;
    }
    return value;
}




12. Turbulence


Uses the absolute value of FBM to generate textures resembling turbulent flows. While FBM noise combines multiple layers of noise (often with fractional brownian motion) to generate smooth, continuous patterns with both positive and negative values; however, turbulence noise uses absolute values of noise to create chaotic patterns, typically with no smoothing and non-negative values.
fn turbulence(uv: vec2<f32>) -> f32 {
    var value: f32 = 0.0;
    var frequency: f32 = 1.0;
    var amplitude: f32 = 1.0;

    for (var i: i32 = 0; i < 5; i = i + 1) {
        value += abs(random(uv * frequency)) * amplitude;
        frequency *= 2.0;
        amplitude *= 0.5;
    }

    return value;
}




13. Worley Noise


Generates a cellular effect based on the distance to the nearest feature point.
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;
}




14. Flow Noise


Adds directional movement to the noise.
fn flowNoise(uv: vec2<f32>, time: f32) -> f32 {
    return random(uv + vec2<f32>(sin(time), cos(time)));
}




15. Gradient Squared Noise


Generates smoother results by squaring gradients.
fn gradientSquaredNoise(uv: vec2<f32>) -> f32 {
    let gradient = fract(uv) - 0.5;
    return dot(gradient, gradient);
}




16. Cellular Noise


Generates repeating cellular patterns using feature points.
fn cellularNoise(uv: vec2<f32>) -> f32 {
    var minDist = 1.0;
    for (var x: i32 = -1; x <= 1; x = x + 1) {
        for (var y: i32 = -1; y <= 1; y = y + 1) {
            let neighbor = vec2<f32>(f32(x), f32(y));
            let point = fract(sin(dot(uv + neighbor, vec2<f32>(12.9898, 78.233))) * 43758.5453);
            let dist = length(uv - point);
            minDist = min(minDist, dist);
        }
    }
    return minDist;
}




17. Offset Noise


Adds an offset to noise for variation.
fn offsetNoise(uv: vec2<f32>, offset: vec2<f32>) -> f32 {
    return random(uv + offset);
}




18. Spiral Noise


Generates a spiraling pattern of noise.
fn spiralNoise(uv: vec2<f32>) -> f32 {
    let angle = atan2(uv.y, uv.x);
    return sin(angle * 10.0 + length(uv) * 5.0);
}




19. Radial Noise


Uses radial coordinates for concentric patterns.
fn radialNoise(uv: vec2<f32>) -> f32 {
    let r = length(uv);
    return sin(r * 10.0 + random(uv));
}




20. Stripe Noise


Produces alternating stripes.
fn stripeNoise(uv: vec2<f32>) -> f32 {
    return step(0.5, fract(uv.x * 10.0));
}




21. Perlin Noise


Classic gradient noise designed for smooth textures, ideal for natural effects.
fn fade(t: f32) -> f32 {
    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
}

fn perlinNoise(uv: vec2<f32>) -> f32 {
    let i = floor(uv);
    let f = fract(uv);
    let fade_f = vec2<f32>(fade(f.x), fade(f.y));
    return mix(
        mix(random(i), random(i + vec2<f32>(1.0, 0.0)), fade_f.x),
        mix(random(i + vec2<f32>(0.0, 1.0)), random(i + vec2<f32>(1.0, 1.0)), fade_f.x),
        fade_f.y
    );
}




22. Ring Noise


Creates concentric ring patterns with subtle randomness.
fn ringNoise(uv: vec2<f32>) -> f32 {
    let r = length(uv);
    return fract(sin(r * 10.0) * 43758.5453);
}




23. Layered Noise


Combines multiple noise layers with increasing frequency for complexity.
fn layeredNoise(uv: vec2<f32>) -> f32 {
    var value = 0.0;
    for (var i: i32 = 0; i < 3; i = i + 1) {
        value += random(uv * f32(i + 1)) / f32(i + 1);
    }
    return value;
}




24. Stripe Gradient Noise


Smooth gradient stripes modulated by noise.
fn stripeGradientNoise(uv: vec2<f32>) -> f32 {
    return abs(sin(uv.x * 10.0 + random(uv) * 3.14159));
}




25. Circular Wave Noise


Combines sine waves in a circular pattern.
fn circularWaveNoise(uv: vec2<f32>) -> f32 {
    let angle = atan2(uv.y, uv.x);
    let radius = length(uv);
    return sin(angle * 5.0 + radius * 10.0);
}




26. Seamless Noise


Ensures the noise pattern repeats seamlessly across tiles.
fn seamlessNoise(uv: vec2<f32>, repeat: vec2<f32>) -> f32 {
    let tiledUV = fract(uv / repeat) * repeat;
    return random(tiledUV);
}




27. Randomized Grid Noise


Generates a grid pattern with randomized cells.
fn randomizedGridNoise(uv: vec2<f32>) -> f32 {
    let cell = floor(uv);
    return random(cell);
}




28. Zigzag Noise


Creates zigzag patterns based on alternating gradients.
fn zigzagNoise(uv: vec2<f32>) -> f32 {
    return abs(sin(uv.x * 5.0) * cos(uv.y * 5.0));
}




29. Waveform Noise


Produces waveforms modulated by random values.
fn waveformNoise(uv: vec2<f32>) -> f32 {
    return sin(uv.x * 10.0 + random(uv) * 3.14159);
}




30. Fractal Cellular Noise


Combines cellular noise at multiple scales for complex patterns.
fn fractalCellularNoise(uv: vec2<f32>) -> f32 {
    var value = 0.0;
    var scale = 1.0;
    for (var i: i32 = 0; i < 4; i = i + 1) {
        value += cellularNoise(uv * scale) / scale;
        scale *= 2.0;
    }
    return value;
}




31. Noise Warping


Applies noise to distort UV coordinates.
fn warpedNoise(uv: vec2<f32>) -> f32 {
    let warpedUV = uv + vec2<f32>(random(uv), random(uv + vec2<f32>(1.0)));
    return random(warpedUV);
}




32. Spiral Gradient Noise


Generates a spiral pattern with smooth gradients.
fn spiralGradientNoise(uv: vec2<f32>) -> f32 {
    let angle = atan2(uv.y, uv.x);
    return sin(angle * 10.0 + length(uv) * 5.0);
}




33. Distance Field Noise


Creates patterns based on distances to a central point.
fn distanceFieldNoise(uv: vec2<f32>) -> f32 {
    let center = vec2<f32>(0.5, 0.5);
    return length(uv - center) + random(uv);
}




34. Starburst Noise


Produces a starburst effect with radial lines emanating from the center.
fn starburstNoise(uv: vec2<f32>) -> f32 {
    let angle = atan2(uv.y - 0.5, uv.x - 0.5);
    return abs(sin(angle * 10.0 + length(uv - vec2<f32>(0.5, 0.5)) * 5.0));
}




35. Offset Stripe Noise


Generates offset stripes modulated by random values.
fn offsetStripeNoise(uv: vec2<f32>) -> f32 {
    return step(0.5, fract(uv.x * 10.0 + random(uv) * 5.0));
}




36. Noise Gradient Mapping


Maps noise values onto a gradient.
fn noiseGradientMapping(uv: vec2<f32>) -> f32 {
    let n = random(uv);
    return mix(0.2, 1.0, n);
}




37. Ripple Noise


Creates concentric ripples using sine waves.
fn rippleNoise(uv: vec2<f32>) -> f32 {
    let dist = length(uv - vec2<f32>(0.5, 0.5));
    return sin(dist * 20.0 + random(uv));
}




38. Polygonal Grid Noise


Produces repeating polygons like triangles or hexagons.
fn polygonalGridNoise(uv: vec2<f32>, sides: f32) -> f32 {
    // Scale UV to ensure uniform size of polygons
    let scaledUV = uv * sides;

    // Compute the angle and map it into polygonal segments
    let angle = atan2(scaledUV.y, scaledUV.x) + 3.14159;
    let segment = floor(angle / (6.28318 / sides));

    // Compute randomness based on segment and grid position
    return fract(segment + random(floor(scaledUV)));
}




39. Angular Gradient Noise


Uses the angle of UV coordinates to create gradients.
fn angularGradientNoise(uv: vec2<f32>) -> f32 {
    let angle = atan2(uv.y, uv.x);
    return abs(sin(angle * 5.0 + random(uv)));
}




40. Noisy Voronoi


Adds noise to Voronoi patterns for irregular cells.
fn noisyVoronoi(uv: vec2<f32>) -> f32 {
    var minDist = 1.0;
    for (var x: i32 = -1; x <= 1; x = x + 1) {
        for (var y: i32 = -1; y <= 1; y = y + 1) {
            let neighbor = vec2<f32>(f32(x), f32(y));
            let point = floor(uv) + neighbor + random(uv + neighbor);
            let dist = length(uv - point);
            minDist = min(minDist, dist);
        }
    }
    return minDist;
}




41. Fisheye Noise


Applies a fisheye lens effect to noise.
fn fisheyeNoise(uv: vec2<f32>) -> f32 {
    let center = vec2<f32>(0.5, 0.5);
    let dist = length(uv - center);
    let warpedUV = uv + dist * (uv - center);
    return random(warpedUV);
}




42. Texture Distortion Noise


Distorts texture coordinates with noise.
fn textureDistortionNoise(uv: vec2<f32>, strength: f32) -> f32 {
    let offset = vec2<f32>(random(uv), random(uv + vec2<f32>(1.0))) * strength;
    return random(uv + offset);
}




43. Crosshatch Noise


Creates crosshatch patterns with noise variations.
fn crosshatchNoise(uv: vec2<f32>) -> f32 {
    return step(0.5, fract(uv.x * 10.0)) * step(0.5, fract(uv.y * 10.0));
}




44. Perlin Warp Noise


Warps Perlin noise using additional noise layers.
fn perlinWarpNoise(uv: vec2<f32>) -> f32 {
    let warpedUV = uv + vec2<f32>(random(uv), random(uv + vec2<f32>(1.0)));
    return perlinNoise(warpedUV);
}




45. Spiral Voronoi Noise


Combines Voronoi noise with a spiral pattern.
fn spiralVoronoiNoise(uv: vec2<f32>) -> f32 {
    let voronoi = voronoiNoise(uv);
    let angle = atan2(uv.y, uv.x);
    return voronoi + sin(angle * 10.0);
}




46. Anisotropic Noise


Generates directional noise with anisotropic distortion.
fn anisotropicNoise(uv: vec2<f32>) -> f32 {
    let stretchedUV = vec2<f32>(uv.x * 2.0, uv.y * 0.5);
    return random(stretchedUV);
}




47. Plasma Noise


Creates plasma-like patterns with layered sine functions.
fn plasmaNoise(uv: vec2<f32>) -> f32 {
    return sin(uv.x * 10.0) + sin(uv.y * 10.0) + sin((uv.x + uv.y) * 5.0);
}




48. Noise Blending


Blends multiple noise functions together.
fn blendedNoise(uv: vec2<f32>) -> f32 {
    return (random(uv) + valueNoise(uv) + perlinNoise(uv)) / 3.0;
}




49. Interference Noise


Simulates interference patterns using overlapping sine waves.
fn interferenceNoise(uv: vec2<f32>) -> f32 {
    return sin(uv.x * 10.0) * sin(uv.y * 10.0);
}




50. Dynamic Noise


Generates time-dependent noise for animations.
fn dynamicNoise(uv: vec2<f32>, time: f32) -> f32 {
    return random(uv + vec2<f32>(sin(time), cos(time)));
}



Resources & Links


• WebGPU Lab Demo - Code/Online Steps Through All Noise Samples LINK

• Generate Output with ALL The Noise Examples LINK





















WebGPU Development Pixels - coding fragment shaders from post processing to ray tracing! WebGPU by Example: Fractals, Image Effects, Ray-Tracing, Procedural Geometry, 2D/3D, Particles, Simulations WebGPU Games WGSL 2d 3d interactive web-based fun learning WebGPU Compute WebGPU API - Owners WebGPU Development Cookbook - coding recipes for all your webgpu needs! WebGPU & WGSL Essentials: A Hands-On Approach to Interactive Graphics, Games, 2D Interfaces, 3D Meshes, Animation, Security and Production Kenwright graphics and animations using the webgpu api 12 week course kenwright learn webgpu api kenwright programming compute and graphics applications with html5 and webgpu api kenwright real-time 3d graphics with webgpu kenwright webgpu for dummies kenwright webgpu api develompent a quick start guide kenwright webgpu by example 2022 kenwright webgpu gems kenwright webgpu interactive compute and graphics visualization cookbook kenwright wgsl webgpu shading language cookbook kenwright WebGPU Shader Language Development: Vertex, Fragment, Compute Shaders for Programmers Kenwright wgsl webgpugems shading language cookbook kenwright WGSL Fundamentals book kenwright WebGPU Data Visualization Cookbook kenwright Special Effects Programming with WebGPU kenwright WebGPU Programming Guide: Interactive Graphics and Compute Programming with WebGPU & WGSL kenwright Ray-Tracing with WebGPU kenwright



 
Advert (Support Website)

 
 Visitor:
Copyright (c) 2002-2024 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.