The base concept for a paint: the binding that applies a material to one part of a node's geometry.
Base class — has no declarative element of its own; subclasses inherit its members.
A material only describes an appearance; a paint is what actually puts it on an object. Each paint pairs a node with a material and a paint target — the part of the geometry it covers: the filled surface, the wireframe edges, or a spline's stroke. A single node can carry several paints, and they stack in document order.
Structural relationship. A paint is attached to the node it paints, and
references the material it applies by id with material="#id"; the material
is a separate scene resource, not part of the paint. Because translucency is a
property of the material, every paint that references a translucent material is
drawn in the translucent pass.
Member elements, one per paint target: sk-surface-paint fills a
mesh's faces; sk-edge-paint draws its wireframe edges (typically layered
over a surface); sk-stroke-paint draws a spline's path as a ribbon of a
given width.
The example gives one sphere two paints — a filled surface and its wireframe edges — each referencing its own 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 |
|---|---|---|---|---|
materialanimatable |
Material |
— | Gets the material this paint applies. | Paint |
noderead-only |
SceneNode |
— | Gets the node this paint is applied to. | Paint |
paintTargetread-only |
PaintTarget |
— | Gets the paint target. | Paint |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
show |
boolean |
true |
Gets whether this paint is visible. | Paint |
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-plain-material id="fill" base-color="goldenrod"></sk-plain-material>
<sk-plain-material id="wire" base-color="rgba(0,0,0,0.4)"></sk-plain-material>
<sk-sphere radius="2" segments="1">
<sk-surface-paint material="#fill"></sk-surface-paint>
<sk-edge-paint material="#wire"></sk-edge-paint>
</sk-sphere>
</sk-scene>