`PlainMaterial`

← prev index next →

Defines how a solid surface looks — a base color, plus how that color responds to light and space — as a reusable resource many objects can share.

Declarative element: <sk-plain-material>

Global: available as sk.PlainMaterial inside a scene <script>.

Remarks

This is the member of the Material family: like every material it is a reusable, standalone definition of a surface's appearance, referenced by the paints that apply it; here it gives a solid surface a base color enriched by an optional tonemap, color-source, and field. Because the material is shared by id, animating it updates every object that references it at once.

Key attributes. base-color is the flat surface color. tonemap references a sk-tonemap that recolors the surface by light (shadow-to-light hues); base-color-source references a ColorSource that varies the base color by space. base-color-darken-factor controls how much shadows darken when no tonemap is present. field is an optional spatial mask for per-fragment alpha — a scene-resident field, shareable with other consumers so one <sk-animation> on it drives them all together. When a tonemap and a color-source are present, tonemap-blend-mode (default multiply, so the tonemap tints the base color) and base-color-source-blend-mode (default normal, so the source defines the base color where it applies) choose how each composites over the base, and color-interpolation selects the space that blending happens in.

Related. It is put on an object by the Paint family — sk-surface-paint, sk-edge-paint, sk-stroke-paint — which name it with material="#id". Its color inputs are a sk-tonemap (by light) and a sk-color-map-source or other ColorSource (by space).

Constructor

constructor(config?: { baseColor?: ColorInput; tonemap?: Tonemap; baseColorDarkenFactor?: number; field?: Field; tonemapBlendMode?: BlendMode; baseColorSourceBlendMode?: BlendMode; backdropBlendMode?: BackdropBlendMode; colorInterpolation?: BlendColorInterpolation })

Inherited from: Material, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Property	Type	Default	Description	Declared by
`baseColor`animatable	`ColorInput`	—	Gets the base color, returning animated value if animating.	`PlainMaterial`
`tonemap`animatable	`Tonemap`	—	Gets the tonemap, or null if using default shading. Routes through	`PlainMaterial`
`baseColorDarkenFactor`animatable	`number`	—	Gets the base color darken factor, returning animated value if animating.	`PlainMaterial`
`field`animatable	`Field`	—	Gets the material-level spatial field for fragment alpha masking, or	`Material`
`tonemapBlendMode`animatable	`BlendMode`	`"multiply"`	Gets the material-level blend mode used for combining the tonemap	`PlainMaterial`
`baseColorSourceBlendMode`animatable	`BlendMode`	`"normal"`	Gets the material-level blend mode used when a `baseColorSource`	`PlainMaterial`
`backdropBlendMode`animatable	`BackdropBlendMode`	`"normal"`	Gets the blend mode applied across the material↔backdrop boundary.	`PlainMaterial`
`colorInterpolation`	`BlendColorInterpolation`	`"auto"`	The color space this material's compositing blends run in — BOTH the	`PlainMaterial`

Other Properties

Property	Type	Default	Description	Declared by
`baseBaseColor`read-only	`ColorBase`	—	Gets the base (non-animated) base color value.	`PlainMaterial`
`baseBaseColorDarkenFactor`read-only	`number`	—	Gets the base (non-animated) darken factor value.	`PlainMaterial`
`baseColorSource`animatable	`ColorSource \| null`	—	Gets the base-color-source, resolving a source-less material to the	`PlainMaterial`
`type`read-only	`string`	—	Gets the material type identifier.	`Material`
`scene`read-only	`any`	—	Gets the Scene this animatable belongs to, if any.	`SkenraAnimatable`
`animations`read-only	`SkenraAnimation[]`	—	Public getter for the animations affecting this target.	`SkenraAnimatable`

Methods

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`

Example

// Simple material with base color (default shading)
const simple = new PlainMaterial({ baseColor: Color.cyan });

// Material with explicit tonemap for different shadow/light hues
const fancy = new PlainMaterial({
    baseColor: Color.white,
    tonemap: TonemapFactory.ramp([
        { offset: 0, color: Color.darkred },
        { offset: 1, color: Color.gold }
    ])
});

// Animate base color
simple.animate([
    { offset: 0, baseColor: Color.cyan },
    { offset: 1, baseColor: Color.magenta }
], 2000);

Used in guides: Scene basics

↑ Documentation home · ← All classes