Noise

GPU-accelerated Perlin and Simplex noise generator. Writes animated 2D noise to a caller-provided GPUTexture via a compute shader — no render pass required.

Usage

import { createNoise } from './noise';

const noise = createNoise(device);

const texture = device.createTexture({
  size: [512, 512],
  format: 'rgba8unorm',
  usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING
});

// Per frame
noise.update(texture, { time: elapsed, scale: 2.0 });

// texture is now filled — bind it in your pipeline

// Clean up when done
noise.destroy();

API

createNoise(device)

Returns a Noise instance. No options — dimensions come from the target texture.

noise.update(target, options?)

Dispatches the compute shader to write noise into the target texture.

• target — GPUTexture to write into (must have STORAGE_BINDING usage, format rgba8unorm)

Option	Type	Default	Description
time	number	0	Animation time (drives UV scrolling)
scale	number	2.0	Noise frequency scale
offset	[number, number]	[0, 0]	UV offset
octaves	number	6	FBM octave count
persistence	number	0.5	Amplitude multiplier per octave
lacunarity	number	2.0	Frequency multiplier per octave
type	'perlin' | 'simplex'	'simplex'	Noise algorithm
domainWarp	boolean	false	Enable domain warping
warpStrength	number	1.0	Domain warp intensity

noise.destroy()

Releases the uniform buffer. Does not destroy the target texture (you own it).

Algorithm

Perlin noise uses gradient-based interpolation on a regular grid with quintic smoothing (6t^5 - 15t^4 + 10t^3), producing smooth, continuous noise without visible grid artifacts.

Simplex noise evaluates on a simplex (triangular) grid instead, which has less directional bias and scales better to higher dimensions. It uses the same hash-based gradient approach but fewer lookups per evaluation.

FBM (Fractal Brownian Motion) layers multiple octaves of the base noise at increasing frequency and decreasing amplitude. More octaves add fine detail; persistence controls how quickly the amplitude decays; lacunarity controls how quickly the frequency increases.

Domain warping uses a second noise evaluation to distort the input coordinates before the main evaluation, creating organic, swirling patterns.

WGSL loading

The default import uses Vite's ?raw suffix:

import shaderSource from './noise.wgsl?raw';

If you're not using a bundler, load via fetch:

const shaderSource = await fetch(new URL('./noise.wgsl', import.meta.url)).then((r) => r.text());

Modifying

Change the texture format

Edit the storageTexture format in noise.ts and the textureStore output in noise.wgsl. For example, to output raw floats:

• In noise.ts: change format: 'rgba8unorm' to format: 'r32float' in the bind group layout
• In noise.wgsl: change texture_storage_2d<rgba8unorm, write> to texture_storage_2d<r32float, write>, and textureStore(output, ..., vec4f(...)) to store a single float

Use a custom hash function

Replace the hash2 and hash1 functions in noise.wgsl. Any function that maps vec2f → vec2f (or vec2f → f32) with good distribution will work. The current implementation uses Dave Hoskins' hash-without-sine approach.

Inline the noise into your own shader

Copy the perlin, simplex, fbm, and domain_warp functions from noise.wgsl directly into your own shader. They're self-contained — they only depend on the hash and grad functions above them.

Extend to 3D

The Perlin and Simplex algorithms extend naturally to 3D. You'd need:

• A 3D hash function (vec3f → vec3f)
• 3D gradient vectors (8 corners for Perlin, 4 simplex vertices)
• Updated skew/unskew constants for Simplex: SKEW = 1/3, UNSKEW = 1/6
• An extra interpolation dimension in Perlin, or an extra simplex corner