Renders shading as a regular two-tone dither — a Bayer (or white-noise)
threshold matrix that trades smooth gradients for a retro, print-like stipple
of two colors, crisp by default or softened via softness.
JavaScript API:
OrderedDitherColorMap
This is an ordered-dither member of the ColorMap family: like every
color-map it turns a driver value into a color, but it quantizes the value into
a few levels and dithers between two colors using a fixed threshold pattern, so
mid-tones read as a stable, tileable dot grid rather than a smooth gradient.
Key attributes. low-color and high-color are the two tones (dark and
light). pattern selects the threshold matrix — bayer2/bayer4/bayer8/
bayer16 give increasingly fine ordered grids, white-noise a random one.
levels is how many quantization bands the tone is split into (2 = pure
two-tone; higher softens the banding). scale is the screen-space pixel size
of one dither cell, so larger values give a chunkier, more visible pattern.
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 grid, 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). 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-blue-noise-dither-color-map
(organic, grid-free grain) and sk-halftone-dither-color-map
(rotated dot screen). For a smooth gradient instead of a dither, 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.
<!-- Two spheres, same coarse ordered dither (bayer4, scale="4"). LEFT draws
crisp round dots (shape="circle", softness="0"); RIGHT the same dots with a
feathered edge (softness="0.7"). Compare the two to see what `softness` does;
set shape="square" to recover the plain pixel-block grid. -->
<sk-scene>
<sk-directional-light p="42deg" h="25deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.3"></sk-ambient-light>
<!-- LEFT: crisp round dots. -->
<sk-ordered-dither-color-map id="hard" levels="2" scale="4" shape="circle" softness="0"
low-color="#22223b" high-color="#f2e9e4" pattern="bayer4"></sk-ordered-dither-color-map>
<sk-tonemap id="tm-hard" color-map="#hard"></sk-tonemap>
<sk-plain-material id="mat-hard" base-color="white" tonemap="#tm-hard"></sk-plain-material>
<sk-sphere radius="1.6" x="-2.2" segments="6">
<sk-surface-paint material="#mat-hard"></sk-surface-paint>
</sk-sphere>
<!-- RIGHT: softened round dots. -->
<sk-ordered-dither-color-map id="soft" levels="2" scale="4" shape="circle" softness="0.7"
low-color="#22223b" high-color="#f2e9e4" pattern="bayer4"></sk-ordered-dither-color-map>
<sk-tonemap id="tm-soft" color-map="#soft"></sk-tonemap>
<sk-plain-material id="mat-soft" base-color="white" tonemap="#tm-soft"></sk-plain-material>
<sk-sphere radius="1.6" x="2.2" segments="6">
<sk-surface-paint material="#mat-soft"></sk-surface-paint>
</sk-sphere>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
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 |
patternanimatable |
<ordered-dither-pattern> ("bayer2" | "bayer4" | "bayer8" | "bayer16" | "white-noise") |
"bayer4" |
Threshold pattern (structural). Default 'bayer4'. |
levelsanimatable |
<number> |
2 |
Number of quantization levels (>= 2). Default 2. |
scaleanimatable |
<number> |
1 |
Screen-space pixel scale of the dither cell (>= 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. |
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 |