Layers several color-maps into one — stacking them back-to-front, each blended onto the ones below with its own blend mode — the way to build a rich, multi-part color response that a single ramp or dither could not express alone.
JavaScript API:
CompositeColorMap
This is the layering member of the ColorMap family: like every
color-map it turns a driver value into a color, but instead of computing that
color directly it composites a list of child color-maps. The children are
listed back-to-front (first is the bottom layer); each is blended onto the
accumulated result of the layers beneath it, and the final stacked color is
what this map emits. A field on a child restricts where that child
contributes, so one layer can be masked to part of the surface while the layers
below show through.
Key attributes. color-maps is the ordered, space-separated id-reference
list of the child maps (back-to-front). blend-modes is the matching
space-separated list of per-layer blend modes (normal, screen, multiply,
…), one per child; the mode lives on the composite entry, not on the child, so
the same color-map can appear in different composites with different modes. The
composite emits only the raw stacked color — the consumer (sk-tonemap
or sk-color-map-source) applies its field and the base-color
compositing exactly once, so nothing is double-counted.
Related. Its children are any color-maps — sk-ramp-color-map,
the dither maps (sk-ordered-dither-color-map,
sk-blue-noise-dither-color-map, sk-halftone-dither-color-map),
or even nested composites. It is driven from LIGHT by a sk-tonemap or
from SPACE by a sk-color-map-source (a field's spatial weight becomes
the driver t). To layer color-sources rather than color-maps, the analogue
is sk-composite-color-source.
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 color-MAPS combined into one map, then driven onto a car body by a
single field. BACK: a purple -> pink -> orange ramp. FRONT: a halftone dot
screen (semi-opaque dots over transparent gaps) blended `multiply`, so the
dots darken the ramp and the gaps are a no-op. The composite is one map, so
ONE color-map-source with ONE `intensity-field` drives both children with
the same `t` — the same look as the composite-color-SOURCE example, but the
combination happens at the color-map level, driven once. -->
<sk-scene>
<sk-directional-light p="42deg" h="130deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.4"></sk-ambient-light>
<!-- One vertical field (its +Z ramp rotated to +Y with p="-90deg"): drives
the whole composite map up the model. -->
<sk-linear-gradient-field id="up" y="-3" extent="6" p="-90deg"></sk-linear-gradient-field>
<!-- BACK: the colour ramp. -->
<sk-ramp-color-map id="ramp">
<sk-color-stop stop-offset="0" stop-color="#833AB4"></sk-color-stop>
<sk-color-stop stop-offset="0.5" stop-color="#FD1D89"></sk-color-stop>
<sk-color-stop stop-offset="1" stop-color="#FCB045"></sk-color-stop>
</sk-ramp-color-map>
<!-- FRONT: a halftone dot screen — semi-opaque dots over transparent gaps. -->
<sk-halftone-dither-color-map id="screen" shape="circle" dot-spacing="5" min-dot="0.2" max-dot="0.8" softness="0.2"
low-color="rgba(0,0,0,0.5)" high-color="rgba(0,0,0,0)"></sk-halftone-dither-color-map>
<!-- Combine the two MAPS: ramp with `normal`, dots with `multiply`. -->
<sk-composite-color-map id="comp" color-maps="#ramp #screen"
blend-modes="normal multiply"></sk-composite-color-map>
<!-- One source drives the whole composite from SPACE with one field. -->
<sk-color-map-source id="src" color-map="#comp" intensity-field="#up"></sk-color-map-source>
<sk-plain-material id="mat" base-color="white" base-color-source="#src"></sk-plain-material>
<sk-mesh src="/js-assets/skenra/demos/html/scenes/beetle.obj"
normalize-scale="3" anchor="center">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-animation duration="9000ms" iterations="Infinity">
<sk-keyframe offset="0" h="0deg"></sk-keyframe>
<sk-keyframe offset="1" h="360deg"></sk-keyframe>
</sk-animation>
</sk-mesh>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
remap-curveanimatable |
<remap-curve> |
— | Optional tone-response remap curve, mirroring the field family's |
remap-phaseanimatable |
<number> |
0 |
Horizontal remap phase — an animatable scalar that translates the tone |
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 |
color-maps |
<id-ref-list> (<id-ref>[,<id-ref>]*) |
"" |
The color-maps <id-ref-list> as a property. Reads / writes the |
blend-modes |
<blend-mode-list> (<blend-mode>[,<blend-mode>]*) |
"" |
The companion blend-modes list as a property. Reads / writes the |
color-interpolation |
<blend-color-interpolation> ("auto" | "srgb" | "srgb-linear") |
"auto" |
The color space this composite runs its per-layer BLEND + src-over math |
One or more color-map children layered front-to-back per CSS Compositing Level 1.