<sk-blue-noise-dither-color-map>

← prev index next →

Renders shading as an organic two-tone stipple — a blue-noise threshold pattern that dithers between two colors without the visible grid of an ordered matrix, for a natural, hand-stippled look.

JavaScript API: BlueNoiseDitherColorMap

Remarks

This is the blue-noise member of the ColorMap family: like every color-map it turns a driver value into a color, but it quantizes the value and dithers between two colors using a blue-noise threshold texture, so the dots scatter evenly with no directional structure or clumping — the quality that distinguishes it from the regular Bayer grid of sk-ordered-dither-color-map. (The 64×64 threshold texture is tiled across the screen, so at a large scale its repeat can become visible.)

Key attributes. low-color/high-color are the two tones. levels is the number of quantization bands (2 = pure two-tone). scale is the screen-space size of the noise pattern (larger = coarser stipple). shape and softness are the same pair sk-halftone-dither-color-map exposes: shape (default circle) is the dot silhouette — circle draws round dots, square the plain pixel-block look, diamond a rotated square — and softness ([0, 1], default 0) anti-aliases the dot edge, from crisp at 0 to feathered, most visibly at scale > 1 (at scale = 1 a cell is one pixel, so there is nothing to feather). shadow-dot-density and highlight-dot-density bleed a fraction of the opposite tone's dots into the darkest / lightest regions, so pure black and pure white keep a little texture instead of going flat. It emits only the raw dither color — the consuming sk-tonemap applies its field and base-color compositing once.

Related. Its two-tone siblings are sk-ordered-dither-color-map (regular Bayer grid) and sk-halftone-dither-color-map (rotated dot screen). For a smooth gradient, use sk-ramp-color-map. It is driven by a sk-tonemap and can be a layer of a sk-composite-color-map.

Serve these docs to run the live example. WebGPU needs a secure context — open this page via grunt serve rather than double-clicking the file. The Markup tab works from disk.

Attributes

AttributeTypeDefaultDescription
remap-curveanimatable <remap-curve> — Reshapes the tone response: a remap-curve descriptor or a pre-built curve. Default none.
remap-phaseanimatable <number> 0 Horizontal remap phase — an animatable scalar that translates the tone
screen-anchor <id-ref> — Node whose projected screen position re-origins the dither screen reference by id
id <id> — The element's unique identifier — the standard HTML global id attribute.
fieldanimatable <id-ref> — Gets the optional field that modulates this color-map's weight reference by id
levelsanimatable <number> 2 Number of quantization levels (>= 2). Default 2.
scaleanimatable <number> 1 Screen-space pattern scale (>= 1). Default 1.
softnessanimatable <number> 0 Anti-aliases the quantization decision, [0, 1]. Default 0 (hard).
shapeanimatable <dither-shape> ("circle" | "square" | "diamond" | "line") "circle" Dot shape (structural). Default circle.
shadow-dot-densityanimatable <number> 0 Fraction of lit dots persisting into shadows, [0, 0.5). Default 0.
highlight-dot-densityanimatable <number> 0 Fraction of shadow dots persisting into highlights, [0, 0.5). Default 0.
low-coloranimatable <color> — Color for low-value (dark / shadow / dot) bins. Animatable. Default: opaque black.
high-coloranimatable <color> — Color for high-value (bright / lit / background) bins. Animatable. Default: opaque white.
color-interpolation <color-interpolation> ("auto" | "srgb" | "srgb-linear" | "oklab") "auto" The color space the dither interpolates its low↔high blend in — the

↑ Documentation home · ← All elements