Tuesday January 14, 2025

Home | Contact | Support | Shaders.. Programming the GPU... | WebGPU Shader Language... Even web-pages can use the power of the GPU...

WebGPU Shader Language...

Even web-pages can use the power of the GPU...

WGSL Noise Functions - From Random Numbers to Textures

A noise function for a shader is a function which inputs at least a coordinate vector (either 2d or 3d) and possibly more control parameters and outputs a value (for the sake of simplicity between 0 and 1) such that the output value is not a simple function of the coordinate vector but contains a good mixture of randomness and smoothness.

Dependent on the type of noise, that may mean different things in practice. A noise function is usually chosen based on its ability to represent a natural shape, so it should emulate structures in nature.

Random numbers have all sorts of characteristics depending on how they're generated - these 'random functions' produce all sorts of results and are suitable for different occasions (from graphical heightmaps to machine learning).

Basic Random Number

At the core of any noise functions is a (pseudo-)random-number generator, i.e. a function which inputs a coordinate vector and outputs a value between 0 and 1. Unlike the full noise function which is supposed to have smoothness, the raw output of the random number generator may jump wildly even on a short distance and is not supposed to resemble anything.

What works well to give an essentially unpredictable output is to use a truncation on a rapidly oscillating function. The following implementations produce viable raw noise for 2d or 3d coordinates:

The Characteristics of Noise

The basic random number function above shows what is essentially a pixel to pixel uncorrelated noise - knowing the value of the function at one pixel, one can't say what the value of the adjacent pixel will be. That's not how random patterns in nature typically look. For instance, while the shape of a cloud is not predictable, if one bit of it is opaque white, it's very likely that everything nearby will also be. That is to say, in many natural random patterns there is a correlation length over which the characteristics of the pattern does not change, and only beyond this correlation length the pattern appears random and unpredictable.

If one takes a picture of a natural random pattern and runs a Fourier transformation over it, these characteristic length scales would emerge was frequencies (or wavelengths) of the Fourier analysis.

In the following, we'll frequently refer to noise 'at a certain wavelength'. The meaning is roughly that the distribution is predictable for any length scale much below that number, but random for any distance above that. This is a statement quite independent of the particular type of noise. Put a different way, noise a 1 m wavelength will create a pattern that looks completely random and point to point uncorrelated when a 10 km x 10 km chunk area is considered, but very homogeneous over a 1 cm x 1 cm patch.

Perlin Noise

Perlin noise, named after its inventor Ken Perlin, is perhaps the best known example of noise in 3d rendering. It gives a smooth, organic distribution of shapes at a certain wavelength, and by adding noise at different wavelengths, a large variety of effects can be achieved.
Basic idea

The basic algorithm is surprisingly simple - to generate Perlin noise at a wavelength L:
• create a regular grid with distance L between grid points
• assign a random number to each of the grid points
• for any coordinate vector which points to a grid point, return the number
• for any other coordinate vector, use a smooth interpolating function between the grid points

The precise shape of the interpolation function influences the visuals a lot - a linear interpolation will give harder results, a soft function like cosine or smoothstep will give a more organic look.

The following WGSL code is a 3d variant of Perlin noise, using the smoothstep function to interpolate between grid points.

fn simple_interpolate(a : f32, b : f32, x : f32) -> f32 {
    return a + smoothstep(0.0, 1.0, x) * (b - a);
}

fn interpolatedNoise3D(x : f32, y : f32, z : f32) -> f32 {
    let integer_x = x - fract(x);
    let fractional_x = x - integer_x;

let integer_y = y - fract(y);
    let fractional_y = y - integer_y;

let integer_z = z - fract(z);
    let fractional_z = z - integer_z;

let v1 = rand3D(vec3<f32>(integer_x, integer_y, integer_z));
    let v2 = rand3D(vec3<f32>(integer_x + 1.0, integer_y, integer_z));
    let v3 = rand3D(vec3<f32>(integer_x, integer_y + 1.0, integer_z));
    let v4 = rand3D(vec3<f32>(integer_x + 1.0, integer_y + 1.0, integer_z));

let v5 = rand3D(vec3<f32>(integer_x, integer_y, integer_z + 1.0));
    let v6 = rand3D(vec3<f32>(integer_x + 1.0, integer_y, integer_z + 1.0));
    let v7 = rand3D(vec3<f32>(integer_x, integer_y + 1.0, integer_z + 1.0));
    let v8 = rand3D(vec3<f32>(integer_x + 1.0, integer_y + 1.0, integer_z + 1.0));

let i1 = simple_interpolate(v1, v5, fractional_z);
    let i2 = simple_interpolate(v2, v6, fractional_z);
    let i3 = simple_interpolate(v3, v7, fractional_z);
    let i4 = simple_interpolate(v4, v8, fractional_z);

let ii1 = simple_interpolate(i1, i2, fractional_x);
    let ii2 = simple_interpolate(i3, i4, fractional_x);

return simple_interpolate(ii1, ii2, fractional_y);
}

fn Noise3D(coord : vec3<f32>, wavelength : f32) -> f32 {
    return interpolatedNoise3D(coord.x / wavelength, coord.y / wavelength, coord.z / wavelength);
}

Sparse Dot Noise

The idea underlying sparse dot noise is partially similar to Worley noise, except that it's computationally cheaper because it makes the sparseness assumption. Suppose you have a surface which is covered by comparatively rare, dot-like structures. They're irregularly spaced, but at a mean distance of the noise wavelength. Since they are rare, one can safely assume any two won't overlap.

The algorithm to generate such a situation is as follows:
• create a regular grid
• assign random numbers to the grid points
• use one of these to determine whether there is a point in the cell
• if yes, use the next one to determine its radius
• and the last two to position it in the cell such that it can't overlap with any other cell
• draw the dot itself given position and radius

This contains a lot of bodges, especially placing it such that it can't overlap, and if we'd choose a large probability to have a dot in the cell and a large radius, this would never look irregular. This is where the Worley noise algorithm invests lots of effort. However, distributing the dots sparsely, i.e. probability to have a dot small per cell and radius being small as compared to cell area, this actually works nicely.

A WGSL realization of the above algorithm is given by the following code which inputs the maximal dot radius and the dot density per cell as additional control parameters:

fn dotNoise2D(x : f32, y : f32, fractionalMaxDotSize : f32, dDensity : f32) -> f32 {
    let integer_x = x - fract(x);
    let fractional_x = x - integer_x;

let integer_y = y - fract(y);
    let fractional_y = y - integer_y;

if (rand2D(vec2<f32>(integer_x + 1.0, integer_y + 1.0)) > dDensity) {
        return 0.0;
    }

let xoffset = (rand2D(vec2<f32>(integer_x, integer_y)) - 0.5);
    let yoffset = (rand2D(vec2<f32>(integer_x + 1.0, integer_y)) - 0.5);
    let dotSize = 0.5 * fractionalMaxDotSize * max(0.25, rand2D(vec2<f32>(integer_x, integer_y + 1.0)));

let truePos = vec2<f32>(0.5 + xoffset * (1.0 - 2.0 * dotSize), 0.5 + yoffset * (1.0 - 2.0 * dotSize));

let distance = length(truePos - vec2<f32>(fractional_x, fractional_y));

return 1.0 - smoothstep(0.3 * dotSize, 1.0 * dotSize, distance);
}

fn DotNoise2D(coord : vec2<f32>, wavelength : f32, fractionalMaxDotSize : f32, dDensity : f32) -> f32 {
    return dotNoise2D(coord.x / wavelength, coord.y / wavelength, fractionalMaxDotSize, dDensity);
}

Domain (Voronoi) Noise

We have already mentioned above that it's sometimes useful to have a function which segments a surface into domains which can then be textured separately. If the segmentation is to have an organic look, Perlin noise works fine. However, for man-made structures, often a less organic segmentation pattern is useful. Consider for example patches of managed forest or fields (especially in Europe) - they are usually bounded by straight lines, but they may be rather complex polygons rather than simple squares or rectangles. Voronoi noise is a tool to achieve such a segmentation.

The algorithm to generate such a situation is as follows:
• create a regular grid at the desired wavelength
• create a random value associated with each grid point
• by calling the random number function displaced from the grid point, generate an x and y shift
• move the grid points by their x and y shifts
• for any coordinate inside a cell, find the shortest distance to a grid point considering only the four corners of the cell
• return the value associated with that point

(the last two steps are known as Voronoi partitioning). There is (again) a good degree of sloppiness to this algorithm, in particular a distorted regular grid doesn't give the same amount of randomness than covering a surface with randomly placed points, and limiting the Voronoi partitioning to the four grid points framing the cell also sometimes implies that the wrong domain is assigned. However, in doing so, the algorithm avoids the expensive search over multiple nearest neighbour candidates and performs reasonably fast, while yielding results which look good enough.

A WGSL realization of the above algorithm is given by the following code which inputs the domain distortion from a regular grid in x and y directions as additional control parameters:

fn voronoiNoise2D(x: f32, y: f32, xrand: f32, yrand: f32) -> f32 {
    let integer_x = x - fract(x);
    let fractional_x = x - integer_x;

let integer_y = y - fract(y);
    let fractional_y = y - integer_y;

var val: array<f32, 4>;
    val[0] = rand2D(vec2<f32>(integer_x, integer_y));
    val[1] = rand2D(vec2<f32>(integer_x + 1.0, integer_y));
    val[2] = rand2D(vec2<f32>(integer_x, integer_y + 1.0));
    val[3] = rand2D(vec2<f32>(integer_x + 1.0, integer_y + 1.0));

var xshift: array<f32, 4>;
    xshift[0] = xrand * (rand2D(vec2<f32>(integer_x + 0.5, integer_y)) - 0.5);
    xshift[1] = xrand * (rand2D(vec2<f32>(integer_x + 1.5, integer_y)) - 0.5);
    xshift[2] = xrand * (rand2D(vec2<f32>(integer_x + 0.5, integer_y + 1.0)) - 0.5);
    xshift[3] = xrand * (rand2D(vec2<f32>(integer_x + 1.5, integer_y + 1.0)) - 0.5);

var yshift: array<f32, 4>;
    yshift[0] = yrand * (rand2D(vec2<f32>(integer_x, integer_y + 0.5)) - 0.5);
    yshift[1] = yrand * (rand2D(vec2<f32>(integer_x + 1.0, integer_y + 0.5)) - 0.5);
    yshift[2] = yrand * (rand2D(vec2<f32>(integer_x, integer_y + 1.5)) - 0.5);
    yshift[3] = yrand * (rand2D(vec2<f32>(integer_x + 1.5, integer_y + 1.5)) - 0.5);

var dist: array<f32, 4>;
    dist[0] = sqrt((fractional_x + xshift[0]) * (fractional_x + xshift[0]) + (fractional_y + yshift[0]) * (fractional_y + yshift[0]));
    dist[1] = sqrt((1.0 - fractional_x + xshift[1]) * (1.0 - fractional_x + xshift[1]) + (fractional_y + yshift[1]) * (fractional_y + yshift[1]));
    dist[2] = sqrt((fractional_x + xshift[2]) * (fractional_x + xshift[2]) + (1.0 - fractional_y + yshift[2]) * (1.0 - fractional_y + yshift[2]));
    dist[3] = sqrt((1.0 - fractional_x + xshift[3]) * (1.0 - fractional_x + xshift[3]) + (1.0 - fractional_y + yshift[3]) * (1.0 - fractional_y + yshift[3]));

var i_min: i32 = 0;
    var dist_min: f32 = 100.0;
    for (var i: i32 = 0; i < 4; i = i + 1) {
        if (dist[i] < dist_min) {
            dist_min = dist[i];
            i_min = i;
        }
    }

return val[i_min];
}

fn VoronoiNoise2D(coord: vec2<f32>, wavelength: f32, xrand: f32, yrand: f32) -> f32 {
    return voronoiNoise2D(coord.x / wavelength, coord.y / wavelength, xrand, yrand);
}

Topology-Driven Noise - Vertical Strata

Topology-Driven Noise - Slope Lines

fn slopeLines2D(x: f32, y: f32, sx: f32, sy: f32, steepness: f32) -> f32 {
    let integer_x = x - fract(x);
    let fractional_x = x - integer_x;

let integer_y = y - fract(y);
    let fractional_y = y - integer_y;

let O = vec2<f32>(0.2 + 0.6 * rand2D(vec2<f32>(integer_x, integer_y + 1.0)), 0.3 + 0.4 * rand2D(vec2<f32>(integer_x + 1.0, integer_y)));
    let S = vec2<f32>(sx, sy);
    let P = vec2<f32>(-sy, sx);
    let X = vec2<f32>(fractional_x, fractional_y);

let radius = 0.0 + 0.3 * rand2D(vec2<f32>(integer_x, integer_y));

let b = (X.y - O.y + O.x * S.y / S.x - X.x * S.y / S.x) / (P.y - P.x * S.y / S.x);
    let a = (X.x - O.x - b * P.x) / S.x;

return (1.0 - smoothstep(0.7 * (1.0 - steepness), 1.2 * (1.0 - steepness), 0.6 * abs(a))) * (1.0 - smoothstep(0.0, 1.0 * radius, abs(b)));
}

fn SlopeLines2D(coord: vec2<f32>, gradDir: vec2<f32>, wavelength: f32, steepness: f32) -> f32 {
    return slopeLines2D(coord.x / wavelength, coord.y / wavelength, gradDir.x, gradDir.y, steepness);
}

Non-Linear Filters

Non-linear filtering as such isn't a technique specific to one noise type, though it has perhaps most applications with Perlin noise. As indicated above, the idea is to map the output of the noise function (which is anywhere between 0 and 1) into the same domain, but non-linearly. For instance, one could map all values below 0.9 to one number and the rest to another number. Such filtering can bring out a surprising number of unexpected shapes out of noise functions.

Advert (Support Website)

Visitor: