The base concept for a material: a reusable, standalone definition of how a surface looks, referenced by the paints that apply it.
Base class — has no declarative element of its own; subclasses inherit its members.
A material captures appearance — a base color and how that color responds to light and space — as a scene resource, separate from the geometry it paints. One material can be shared by many objects, and animating the material updates every object that references it at once.
How a material is used. A material is a resource that lives in the scene and
is referenced by id: a Paint names it with material="#id" and
applies it to a node's surface, edges, or stroke. The material never attaches to
a node itself; the paint is the binding. Its base color can be enriched by
referenced inputs — a ColorSource for a spatial base color
(base-color-source), a AbstractTonemap for a light-driven color
response (tonemap), and a SpatialField to mask where the material is
visible (field).
Member element. sk-plain-material is the concrete material: a base
color with optional color-source, tonemap, and field references.
The example applies one material to a sphere through a surface paint, and
animates the material's base-color with a child sk-animation.
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 material-level spatial field for fragment alpha masking, or | Material |
typeread-only |
string |
— | Gets the material type identifier. | Material |
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 |
|---|---|---|
getSupportedPaintTargets(): PaintTarget[] |
Gets all paint targets supported by this material. | Material |
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="mat" base-color="cyan">
<sk-animation duration="1000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" base-color="cyan"></sk-keyframe>
<sk-keyframe offset="1" base-color="magenta"></sk-keyframe>
</sk-animation>
</sk-plain-material>
<sk-sphere radius="2"><sk-surface-paint material="#mat"></sk-surface-paint></sk-sphere>
</sk-scene>