Layers several color-sources into one spatial base color — stacking them back-to-front, each blended over the ones below with its own blend mode — the way to build a rich, multi-part surface color no single source could express.
Declarative element:
<sk-composite-color-source>
Not on the sk.* global — construct via the declarative element or a module import.
This is the layering member of the ColorSource family: like every
color-source it gives a material a base color that varies across the surface,
but instead of computing one color it composites a stack of child
color-sources. Children stack back-to-front over the flat base-color, each
blended onto the accumulated result beneath it and weighted by its own
applicability field, so where no child applies the stack simply IS the flat
base. It is the spatial sibling of sk-composite-color-map.
Key attributes. color-sources is the ordered, space-separated id-reference
list of the child sources (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.
A child's own per-fragment alpha gates its layer coverage together with its
applicability field. For the source-over blend modes (normal, multiply,
screen, …), a fully transparent child sample is a no-op that leaves the
accumulated stack below unchanged, and a partially transparent sample
contributes proportionally to its alpha — so the transparent gaps of a
halftone-dot child reveal the layers beneath rather than darkening them under
multiply. (The additive plus-lighter mode sums coverage instead, so a
transparent child there still lowers the accumulated alpha.) Composites may
nest, and at most ONE raster child is supported per material (single texture
binding). The composite's own applicability field is applied by its consumer
exactly once.
Related. Its children are any color-sources — sk-color-map-source,
sk-raster-color-source, sk-paper-texture-color-source, or nested
composites. A material selects it with base-color-source="#id" (see
sk-plain-material). Its light-driven analogue for layering is
sk-composite-color-map.
constructor(config?: { children?: ColorSource[] })Inherited from: ColorSource, VisualizableSceneNode, SceneNode, SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
childrenconfig-only |
ColorSource[] |
— | Initial child color-sources (back-to-front), each normal blend. |
CompositeColorSourceConfig |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
layersread-only |
readonly ColorSource[] |
— | Ordered list of child color-sources (back-to-front). | CompositeColorSource |
layerEntriesread-only |
readonly CompositeColorSourceLayer[] |
— | Ordered list of layer entries (back-to-front), each with its blend mode. | CompositeColorSource |
colorSources |
string |
"" |
The color-sources <id-ref-list> as a property. Reads / writes |
CompositeColorSource |
blendModes |
string |
"" |
The companion blend-modes list as a property. Reads / writes the |
CompositeColorSource |
fieldanimatable |
Field | null |
— | Gets the optional applicability field that masks where this source | ColorSource |
visualize |
boolean |
false |
Whether the visualization is visible (wireframe splines + center marker). | VisualizableSceneNode |
xanimatable |
number |
0 |
Gets the X position component. | SceneNode |
yanimatable |
number |
0 |
Gets the Y position component. | SceneNode |
zanimatable |
number |
0 |
Gets the Z position component. | SceneNode |
hanimatable |
number |
0 |
Gets the heading (Y-axis) rotation in radians. | SceneNode |
panimatable |
number |
0 |
Gets the pitch (X-axis) rotation in radians. | SceneNode |
banimatable |
number |
0 |
Gets the bank (Z-axis) rotation in radians. | SceneNode |
quaternionanimatable |
Quaternion |
— | Gets the rotation as a quaternion. | SceneNode |
sxanimatable |
number |
1 |
Gets the X-axis scale factor. | SceneNode |
syanimatable |
number |
1 |
Gets the Y-axis scale factor. | SceneNode |
szanimatable |
number |
1 |
Gets the Z-axis scale factor. | SceneNode |
hRad |
number |
0 |
Gets the heading (Y-axis) rotation in radians. | SceneNode |
pRad |
number |
0 |
Gets the pitch (X-axis) rotation in radians. | SceneNode |
bRad |
number |
0 |
Gets the bank (Z-axis) rotation in radians. | SceneNode |
hDeg |
number |
0 |
Gets the heading (Y-axis) rotation in degrees. | SceneNode |
pDeg |
number |
0 |
Gets the pitch (X-axis) rotation in degrees. | SceneNode |
bDeg |
number |
0 |
Gets the bank (Z-axis) rotation in degrees. | SceneNode |
xBasebase value |
number |
— | Gets the base (non-animated) value of X position. | SceneNode |
yBasebase value |
number |
— | Gets the base (non-animated) value of Y position. | SceneNode |
zBasebase value |
number |
— | Gets the base (non-animated) value of Z position. | SceneNode |
hBasebase value |
number |
0 |
Gets the base (non-animated) value of heading (Y-axis rotation). | SceneNode |
pBasebase value |
number |
0 |
Gets the base (non-animated) value of pitch (X-axis rotation). | SceneNode |
bBasebase value |
number |
0 |
Gets the base (non-animated) value of bank (Z-axis rotation). | SceneNode |
quaternionBasebase value |
Quaternion |
— | Gets the base (non-animated) quaternion rotation. | SceneNode |
sxBasebase value |
number |
— | Gets the base (non-animated) value of X-axis scale. | SceneNode |
syBasebase value |
number |
— | Gets the base (non-animated) value of Y-axis scale. | SceneNode |
szBasebase value |
number |
— | Gets the base (non-animated) value of Z-axis scale. | SceneNode |
draggable |
boolean |
false |
Gets whether this node can be dragged. | SceneNode |
parentread-only |
SceneNode | null |
— | The parent node in the scene graph, or null at the root. |
SceneNode |
sceneread-only |
any |
— | Gets the Scene this node belongs to, if any. | SceneNode |
posread-only |
Point3D |
— | Gets the world-space position of this node. | SceneNode |
matrixread-only |
Float32Array<ArrayBufferLike> |
— | Gets the computed 4x4 transformation matrix. | SceneNode |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
addLayer(colorSource: ColorSource): void |
Convenience: appends a child color-source (rendered on top) with | CompositeColorSource |
removeLayer(colorSource: ColorSource): void |
Convenience: removes a child color-source via the color-sources attribute. |
CompositeColorSource |
addMaterialPaint(material: Material, paintTarget: PaintTarget, options?: any): Paint |
Applies a material to this node for a specific paint target. | SceneNode |
getPaints(): ReadonlyMap<PaintTarget, Paint> |
— | SceneNode |
getOwnPaints(): readonly Paint[] |
Gets only the paints directly applied to this node (not inherited). | SceneNode |
removePaint(paint: Paint): void |
Removes a paint from this node. | SceneNode |
getWorldPosition(): number[] |
Returns this node’s origin in world space. | SceneNode |
getWorldMatrix(): Float32Array<ArrayBufferLike> |
Returns this node’s world transform — its local transform composed with all ancestor transforms. | SceneNode |
setViewportPosition(camera: AbstractCamera, x: number, y: number, z: number = 0.5): boolean |
Sets the node's local translation so that it appears at the specified viewport position. | SceneNode |
getViewportPosition(camera?: AbstractCamera): [number, number, number] | null |
Returns the node's current world position projected to viewport CSS pixel coordinates. | SceneNode |
setNDCPosition(camera: AbstractCamera, ndcX: number, ndcY: number, ndcZ: number = 0.5): boolean |
Sets the node's local translation so that it appears at the specified NDC position in the viewport. | SceneNode |
getBoundsInSpace(targetSpaceMatrix: Float32Array): { minX: number; maxX: number; minY: number; maxY: number; minZ: number; maxZ: number; } | null |
Computes the axis-aligned bounding box (AABB) of this node and its descendants | SceneNode |
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 |