`<sk-spline>`

← prev index next →

A spline you place directly in the scene and give any spline-source as its geometry — the general-purpose way to draw a curve when you need a source that the convenience leaves cannot build (GPU, morphing, or a moving node's trail).

JavaScript API: Spline

Remarks

This is the source-host member of the AbstractSpline family: it is a spline you position, transform and paint like any other, but it owns no geometry of its own — it draws whichever spline-source you give it. The source arrives as the single geometry child (<sk-svg-spline-source>, <sk-points-spline-source>, <sk-morph-spline-source>, <sk-compute-buffer-spline-source>, <sk-custom-wgsl-spline-source>, or <sk-trail-spline-source>); a stroke paint child then renders the resulting curve as a ribbon. Sources compose — a sk-morph-spline-source blends two other sources, recursively.

Key attributes. Like every spline this leaf has no geometry attributes of its own — the curve comes entirely from its spline-source child. What it does carry are the standard node controls: the transform (x/y/z, h/p/b, sx/sy/sz/s) positions and orients the whole curve in the scene, id lets an sk-align-to-spline-constraint reference it by #id, and cast-shadow toggles whether the drawn ribbon casts a shadow.

Related. For the two everyday input modalities, the convenience leaves build the source themselves and expose its parameters as their own attributes: sk-path-spline (SVG path data) and sk-points-spline (control points). This source-hosting spline is the choice when the curve needs a source those leaves cannot produce. The full geometry-provider set is the spline-source family — sk-svg-spline-source, sk-points-spline-source, sk-morph-spline-source, sk-trail-spline-source, and the GPU sources sk-compute-buffer-spline-source / sk-custom-wgsl-spline-source. The base concept is AbstractSpline.

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-spline> hosts ANY spline-source as its geometry child. Here a morph
     source blends between two point curves — a flat square (progress 0) and a
     3D zig-zag (progress 1) — the kind of source the convenience leaves cannot
     build. `morph-progress` (animated 0→1) drives the blend; the stroke paint
     renders whatever the current blend produces as a ribbon. -->
<sk-scene>
    <sk-directional-light p="55deg" h="25deg" intensity="1.0"></sk-directional-light>
    <sk-ambient-light intensity="0.45"></sk-ambient-light>

    <sk-plain-material id="ink" base-color="#4f86c6"></sk-plain-material>

    <sk-spline id="blend">
        <sk-morph-spline-source morph-progress="0">
            <!-- Source A: a flat square in the XZ ground plane. -->
            <sk-points-spline-source basis="linear" wrap="closed"
                points="[[-2,0,-2],[2,0,-2],[2,0,2],[-2,0,2]]"></sk-points-spline-source>
            <!-- Source B: a 3D zig-zag rising out of the plane. -->
            <sk-points-spline-source basis="catmullRom" wrap="open"
                points="[[-2,0,-2],[-1,2.5,0],[0,-1,2],[1,2.5,0],[2,0,-2]]"></sk-points-spline-source>
            <sk-animation duration="4000ms" iterations="Infinity" easing="linear">
                <sk-keyframe offset="0" morph-progress="0"></sk-keyframe>
                <sk-keyframe offset="1" morph-progress="1"></sk-keyframe>
            </sk-animation>
        </sk-morph-spline-source>
        <sk-stroke-paint material="#ink" width="1.5"></sk-stroke-paint>
    </sk-spline>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`id`	`<id>`	—	The element's unique identifier — the standard HTML global `id` attribute.
`draggable`	`<boolean>`	`false`	Gets whether this node can be dragged.
`x`animatable	`<number>`	`0`	X position.
`y`animatable	`<number>`	`0`	Y position.
`z`animatable	`<number>`	`0`	Z position.
`h`animatable	`<angle>`	`0`	Heading (Y-axis rotation) in radians.
`p`animatable	`<angle>`	`0`	Pitch (X-axis rotation) in radians.
`b`animatable	`<angle>`	`0`	Bank (Z-axis rotation) in radians.
`quaternion`animatable	`<quaternion> ({ <number>, <number>, <number>, <number> })`	—	Rotation as quaternion (overrides h, p, b if provided)
`sx`animatable	`<number>`	`1`	X-axis scale factor.
`sy`animatable	`<number>`	`1`	Y-axis scale factor.
`sz`animatable	`<number>`	`1`	Z-axis scale factor.
`s`	`<number>`	—	Uniform scale factor for all axes (overrides sx, sy, sz if provided) write-only
`overlay`	`<boolean>`	`false`	Whether this node renders as an overlay with depth-aware translucency.
`overlay-occluded-opacity`	`<number>`	`0.3`	Alpha multiplier for overlay fragments occluded by scene geometry.
`cast-shadow`	`<boolean>`	`true`	Whether this spline casts shadows.

Event handler attributes

Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.

onclick, ondblclick, onauxclick, oncontextmenu, onpointerdown, onpointerup, onpointermove, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture, onwheel, ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondrop, ondragend

Children

Exactly one *-spline-source child (svg / points / trail / gpu / morph).

Used in guides: Scene basics

↑ Documentation home · ← All elements