Paints a material's base color from a color-map driven by a field's spatial weight — the spatial twin of the tonemap, letting where a point is choose its color instead of how much light it receives.
JavaScript API:
ColorMapSource
This is the map-driven member of the ColorSource family: like every
color-source it gives a material a base color that varies across the surface,
and it does so by reusing the whole ColorMap machinery — a field's
[0,1] weight is the driver t, and the color-map turns t into the color.
It is the symmetric sibling of sk-tonemap: the tonemap drives a
color-map with light, this source drives the same color-map with space.
Key attributes. Three independent references, never conflated:
color-map (REQUIRED) names the color-evaluation node; intensity-field is
the DRIVER whose [0,1] weight becomes the t handed to the color-map; and
field (from the ColorSource base) is the APPLICABILITY mask — where
the source shows versus the flat base-color — which composes
multiplicatively with the color-map's own field. Both fields follow the same
absence convention: an omitted intensity-field drives t = 1 everywhere
(the color-map's last stop), and an omitted field applies the source at full
weight everywhere.
Because intensity-field DRIVES the color-map (it picks t) rather than
masking it, a color-map with a single flat colour paints that one colour
wherever the field is non-zero — the weight only chooses which stop, and
every stop is the same. To make the field fade an effect in (e.g. an edge
highlight that appears only where the weight is high), put the variation in
the color-map itself — a ramp from transparent to the colour, so the weight
sweeps t through the alpha. If instead you want to gate a single flat colour
by the field, use it as the field APPLICABILITY mask, not intensity-field.
Related. It reuses any color-map — sk-ramp-color-map, a dither
map, or a sk-composite-color-map (a stack of field-masked layers,
driven from space here exactly as sk-tonemap drives it from light). A
material selects it with base-color-source="#id" (see
sk-plain-material). Its light-driven counterpart is
sk-tonemap; to layer several sources, use
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.
<!-- The base color is painted by SPACE, not light. A three-band ramp (the
Italian flag — green, white, red, with STEP stops so the bands are hard,
not blended) is driven along an imported scooter by a linear-gradient
field running front-to-back. The field's [0,1] weight picks which band, so
the model is painted green at the front, white through the middle, red at
the back — colour that tracks POSITION, independent of the lighting. -->
<sk-scene>
<sk-directional-light p="42deg" h="130deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.4"></sk-ambient-light>
<!-- The Italian flag as three hard bands: each STEP stop holds its colour
up to the next offset, so t in [0,1/3) is green, [1/3,2/3) white,
[2/3,1] red. -->
<sk-ramp-color-map id="flag">
<sk-color-stop stop-offset="0" stop-color="#008C45" interpolation="step"></sk-color-stop>
<sk-color-stop stop-offset="0.3333" stop-color="#F4F5F0" interpolation="step"></sk-color-stop>
<sk-color-stop stop-offset="0.6667" stop-color="#CD212A" interpolation="step"></sk-color-stop>
</sk-ramp-color-map>
<sk-color-map-source id="tricolore" color-map="#flag"
intensity-field="#front-back"></sk-color-map-source>
<sk-plain-material id="mat" base-color="white"
base-color-source="#tricolore"></sk-plain-material>
<!-- The field and the scooter share a group, so rotating the GROUP turns
the driver field WITH the model — the flag bands stay locked to the
geometry (green front / white middle / red back) while it spins. A
field is a scene node, so its gradient axis follows its parent. -->
<sk-scene-node>
<!-- Driver: a linear field along the scooter's length (+Z), front to back. -->
<sk-linear-gradient-field id="front-back" z="-3" extent="6"></sk-linear-gradient-field>
<sk-mesh src="/js-assets/skenra/demos/html/scenes/scooter.obj"
normalize-scale="3" anchor="center">
<sk-surface-paint material="#mat"></sk-surface-paint>
</sk-mesh>
<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-scene-node>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
color-maprequired |
<id-ref> |
— | The referenced color-map, or null when unresolved. Setting it reference by id |
intensity-fieldanimatable |
<id-ref> |
— | Gets the driver field feeding the [0,1] scalar the concrete source turns reference by id |
fieldanimatable |
<id-ref> |
— | Gets the optional applicability field that masks where this source reference by id |
xanimatable |
<number> |
0 |
Gets the X position component. |
yanimatable |
<number> |
0 |
Gets the Y position component. |
zanimatable |
<number> |
0 |
Gets the Z position component. |
hanimatable |
<angle> |
0 |
Gets the heading (Y-axis) rotation in radians. |
panimatable |
<angle> |
0 |
Gets the pitch (X-axis) rotation in radians. |
banimatable |
<angle> |
0 |
Gets the bank (Z-axis) rotation in radians. |
visualize |
<boolean> |
false |
Whether the visualization is visible (wireframe splines + center marker). |
interactive-controls |
<boolean> |
false |
Whether interactive controls are shown (draggable markers for adjusting parameters). |