Three.js Blocks

Home
Documentation
Examples
Tools

blueNoise

@three-blocks/coreWebGPUWebGL
blueNoise(p : Node<ivec2>, level : Node<int>) : Node<float>

Hilbert R1 Blue Noise generator with normalized float output. Combines Hilbert curve spatial ordering with R1 low-discrepancy sequence to produce high-quality blue noise values in [0,1] range.

Algorithm

  • Maps 2D coordinates to 1D via Hilbert curve (space-filling curve)
  • Applies R1 sequence (low-discrepancy) for temporal stability
  • Produces blue noise spectrum (minimal low-frequency content)

Use Cases

  • Temporal anti-aliasing (TAA) jitter patterns
  • Dithering and ordered dithering
  • Stochastic sampling for ray tracing
  • Volumetric noise without banding
Parameters
pNode<ivec2>
2D screen-space integer coordinates.
levelNode<int>
Hilbert curve recursion level (typically 5-10, higher = finer pattern).
Returns
Node<float> — Normalized blue noise value in [0..1].
Example
import { blueNoise } from '@three-blocks/core';
import { int, screenCoordinate, uniform } from 'three/tsl';

// Temporal AA jitter
const screenCoord = screenCoordinate.xy.mul(resolution);
const jitter = blueNoise(screenCoord.toInt(), int(8));
const offset = jitter.mul(2.0).sub(1.0).mul(pixelSize);
const jitteredUV = uv.add(offset);

// Dithering threshold
const threshold = blueNoise(fragCoord.toInt(), int(6));
const dithered = color.greaterThan(threshold).select(1.0, 0.0);