Three.js Blocks

Home
Documentation
Examples
Tools

ComputeMipAwareBlueNoise

@three-blocks/coreWebGPU
new ComputeMipAwareBlueNoise(width : number, height : number, mipScaleExponent : number)

Generates a mip-aware blue noise texture using the Hilbert R1 blue noise algorithm.

Overview Blue noise textures are essential for high-quality rendering techniques such as:

  • Dithering: Reducing quantization artifacts in gradients.
  • Stochastic Sampling: Monte Carlo integration, soft shadows, and ambient occlusion.
  • Temporal Anti-Aliasing (TAA): Providing stable, high-frequency noise that integrates well over time.

Features

  • Mip-Awareness: Generates noise that remains blue (high-frequency) across mip levels, preventing aliasing artifacts when the texture is minified.
  • Hilbert R1 Algorithm: Uses a low-discrepancy sequence mapped to a Hilbert curve for optimal spatial distribution.
  • GPU Generation: Fully computed on the GPU for fast initialization.
Constructor Parameters
widthoptionalnumber
Width of the texture in pixels.
Default is 128.
heightoptionalnumber
Height of the texture in pixels.
Default is 128.
mipScaleExponentoptionalnumber

Controls the scaling of noise coordinates across mip levels.

  • 1.0: Standard scaling (doubles frequency per level).
  • 0.5: Slower scaling, preserving larger structures.

Default is 1.0.
Example
import { ComputeMipAwareBlueNoise } from '@three-blocks/core';

// Create generator
const blueNoiseGen = new ComputeMipAwareBlueNoise(512, 512);

// Generate texture (async GPU operation)
const blueNoiseTexture = await blueNoiseGen.init(renderer);

// Use in a material
const material = new THREE.MeshBasicNodeMaterial();
material.colorNode = texture(blueNoiseTexture, uv().mul(10));

Properties

.storageTexture : THREE.StorageTexture|null

Methods

init#

init(renderer : THREE.WebGPURenderer) : THREE.StorageTexture

Initializes and generates the blue noise texture using compute shaders. This method must be called before using the texture.

Parameters
rendererTHREE.WebGPURenderer
The WebGPU renderer instance used for computation.
Returns
THREE.StorageTexture — The generated storage texture.

getTexture#

getTexture() : THREE.StorageTexture|null

Returns the generated blue noise texture.

Returns
THREE.StorageTexture | null — The generated texture, or null if init() has not been called.