The base concept for a color-map: a reusable function that turns a scalar driver value into a color.
Base class — has no declarative element of its own; subclasses inherit its members.
A color-map answers "given a number between 0 and 1, what color?" — a ramp
between color stops, a two-tone dither pattern, or a layered composite of other
color-maps. It is the color half of shading: a AbstractTonemap supplies
the light-driven driver value and a color-map turns it into the pixel color.
How a color-map is used. A color-map is a standalone scene resource
referenced by id. A <sk-tonemap color-map="#id"> names it to shade a
material by light; a sk-color-map-source names it to paint a spatial
base color; and sk-composite-color-map lists several color-maps to layer
them. A color-map may also carry an optional applicability field="#id" that
masks where it applies; the consumer composes that field exactly once, so it is
never double-counted.
Member elements: sk-ramp-color-map (an N-stop color ramp whose stops
are <sk-color-stop> children); sk-composite-color-map (layers
child color-maps by id, each with a blend mode); and the two-tone dithers
sk-ordered-dither-color-map, sk-blue-noise-dither-color-map, and
sk-halftone-dither-color-map.
The example builds a dark-red→gold ramp, drives it by light through a tonemap, and applies that tonemap to a sphere's material.
Abstract base class — not instantiated directly. Construct one of its concrete subclasses; this class contributes the members below to them.
Inherited from: SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
fieldanimatable |
Field | null |
— | Gets the optional field that modulates this color-map's weight | ColorMap |
remapCurveanimatable |
SampledCurve | null |
— | Optional tone-response remap curve, mirroring the field family's | ColorMap |
remapCurveSourceread-only |
string | null |
— | The descriptor the curve was authored from, or null (imperative/none). |
ColorMap |
remapPhaseanimatable |
number |
0 |
Horizontal remap phase — an animatable scalar that translates the tone | ColorMap |
sceneread-only |
any |
— | Gets the Scene this animatable belongs to, if any. | SkenraAnimatable |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation |
Creates a new SkenraAnimation for this target per Web Animations API. | SkenraAnimatable |
removeAnimation(animation: SkenraAnimation): boolean |
Removes a specific animation from this object. | SkenraAnimatable |
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] |
Creates a constraint on this Animatable using a fluent API. | SkenraAnimatable |
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.
<sk-scene>
<sk-ramp-color-map id="ramp">
<sk-color-stop stop-offset="0" stop-color="darkred"></sk-color-stop>
<sk-color-stop stop-offset="1" stop-color="gold"></sk-color-stop>
</sk-ramp-color-map>
<sk-tonemap id="tm" color-map="#ramp"></sk-tonemap>
<sk-plain-material id="mat" base-color="white" tonemap="#tm"></sk-plain-material>
<sk-sphere radius="2"><sk-surface-paint material="#mat"></sk-surface-paint></sk-sphere>
</sk-scene>