Turns a list of 3D control points into a smooth spline curve — the way to define a curve from explicit positions (a Bézier, B-spline, Catmull-Rom, or polyline) rather than from vector artwork.
JavaScript API:
PointsSplineSource
This is the control-points member of the spline-source family: a spline-source
supplies the curve geometry for a AbstractSpline, so it lives as the
single geometry child of a sk-spline (or is built into a
sk-points-spline, the convenience leaf that wraps this source behind
points). Once hosted, the curve draws with a stroke paint, carries an
sk-align-to-spline-constraint, or seeds points and fields — like any
spline.
Key attributes. points is the list of [x, y, z] control points — full 3D,
so the curve is not confined to a plane. basis chooses how the curve threads
them: bezier treats them as Bézier control handles, bspline produces a taut
approximating curve, catmullRom passes smoothly through every point, and
linear connects them with straight segments. wrap sets the endpoint
behaviour — open leaves a curve with two ends, closed joins the last point
back to the first into a loop, and pinned clamps the curve to touch its first
and last control points. widths is an optional list parallel to points
that tapers the stroke's cross-section along the curve (absent → uniform width).
A spline-source is also a points-source, so a sk-cloner given one as its
points-source places clones along the curve; distribution then selects the
sampling — control-points (one per authored point, the default), tessellated
(one per polyline vertex), or arc-length-spaced (distribution-count
evenly-spaced samples).
Related. It is one input modality of the spline-source family alongside
sk-svg-spline-source (SVG path data), sk-morph-spline-source
(blend two sources), sk-trail-spline-source (a moving node's wake), and
the GPU sources sk-compute-buffer-spline-source /
sk-custom-wgsl-spline-source. Its host is a sk-spline; the
built-in shortcut for control-point input is sk-points-spline.
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.
<!-- The points source is the single geometry child of a <sk-spline>. It defines a
genuinely 3D closed curve: `basis="catmullRom"` passes smoothly THROUGH the
eight corners of a cube and `wrap="closed"` joins it into a loop — a shape a
flat 2D arc could not produce. The `widths` list narrows the ribbon toward
one side of the loop and widens it back again. Change `basis` to `linear` to
see the raw cube-edge polyline the smoothing rounds off. -->
<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>
<sk-points-spline-source basis="catmullRom" wrap="closed"
points="[[-1.6,-1.6,-1.6],[1.6,-1.6,-1.6],[1.6,1.6,-1.6],[-1.6,1.6,-1.6],[-1.6,1.6,1.6],[1.6,1.6,1.6],[1.6,-1.6,1.6],[-1.6,-1.6,1.6]]"
widths="[2.4,2.0,1.6,1.2,0.8,1.2,1.6,2.0]"></sk-points-spline-source>
<sk-stroke-paint material="#ink" width="1.5"></sk-stroke-paint>
</sk-spline>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
pointsrequired |
<3d-vector-list> (<3d-vector>[,<3d-vector>]*) |
— | 3D control points for USD BasisCurves-style input. |
basis |
<points-basis> ("bezier" | "bspline" | "catmullRom" | "linear") |
— | Curve basis type. |
wrap |
<points-wrap> ("open" | "closed" | "pinned") |
— | Wrap type. |
widths |
<number-list> (<number>[,<number>]*) |
— | Optional per-control-point widths, parallel to points. Interpolated |
distribution |
<spline-distribution> ("control-points" | "tessellated" | "arc-length-spaced") |
— | — |
distribution-count |
<number> |
— | — |