Paints a material's base color straight from an image — projecting a loaded raster onto a surface like a slide projector — the way to stamp a logo, decal, or texture onto geometry instead of computing the color.
Declarative element:
<sk-raster-color-source>
Not on the sk.* global — construct via the declarative element or a module import.
This is the image-driven 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 that color it samples a loaded raster and returns the
texel's RGBA — including its alpha — wherever the source applies. It is a full
scene node, so its own transform and every ancestor's carries the image, and it
projects with foreshortening: a tilted source narrows its decal on the
receiving surface, never widens it.
Key attributes. src is the image URL (http(s), relative, or a data:
URI); SVG sources are rasterized and sampled like any other. projection-plane
is a signed two-axis token (default xz) mapping image u/v onto world axes —
a standing XY surface reads upright with x-y. width/height size one raster
copy in local units (0 = AUTO: width → one unit, height → the image's aspect
ratio); anchor (a box keyword or content(x, y) in image pixels, default
center) sits at the source's local origin. tile is none (one bounded
decal, default) or repeat (seamless tiling). visualize draws the projection
quad so the placement is visible while composing.
Projection & loading. With projection="auto" (default) the paint drives
the parametrization — stroke paints project stroke-parametrically, surface
paints planarly; projection="uv" samples the mesh's authored texture
coordinates instead. The raster loads asynchronously: until it arrives the flat
base-color shows through, and a load event re-renders the consumers once
texel data is available. Scene readiness does not await the load.
Related. A material selects it with base-color-source="#id" (see
sk-plain-material). Its scalar-driven sibling is
sk-color-map-source; to layer it under or over other sources, use
sk-composite-color-source (at most one raster child per material).
constructor(config?: VisualizableSceneNodeConfig)Inherited from VisualizableSceneNode.
Inherited from: ColorSource, VisualizableSceneNode, SceneNode, SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
src |
string | null |
— | The raster URL (http(s)/relative/data:). Assigning starts a load. |
RasterColorSource |
projection |
RasterProjection |
"auto" |
Projection mode. | RasterColorSource |
projectionPlane |
string |
"xz" |
The signed 2-axis <coordinate-space> token naming which LOCAL axes |
RasterColorSource |
tileanimatable |
RasterTile |
"none" |
Tile mode outside the unit uv square (a params flag — data-only). | RasterColorSource |
widthanimatable |
number |
0 |
Local units one raster copy spans along u — or, sampled from a stroke | RasterColorSource |
heightanimatable |
number |
0 |
Local units one raster copy spans along v. 0 = AUTO: derived from the | RasterColorSource |
anchor |
string |
"center" |
The image point pinned to the source's local origin: a box-anchor | RasterColorSource |
loadedread-only |
boolean |
— | True once the current src has decoded. |
RasterColorSource |
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 |
|---|---|---|
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 |