Draws the rolling trail left behind a moving node — the way to render a wake, comet tail, or motion streak that follows an object and fades out over the last N positions it visited.
JavaScript API:
TrailSplineSource
This is the motion-driven 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. Unlike the static sources, its
curve is not authored — it is fed one new head position at a time. Each head
position beyond a small distance threshold is prepended to a fixed-capacity ring
buffer (oldest trimmed at the far end), and the buffer is re-evaluated as a
Catmull-Rom curve, so the spline is a smooth polyline through the object's recent
path. Every vertex has width 1.0; taper the trail with the host spline's
width profile.
Key attributes. max-points is the trail length — the ring-buffer capacity
(minimum 2); a larger value keeps a longer tail. head-pos is the current head
position in world space and is what actually grows the trail: it is animatable,
but the usual wiring is a child sk-follow-constraint mapping a moving
node's pos onto this source's head-pos, so the trail tracks that node
automatically. Like every spline-source it also carries the family's
distribution / distribution-count controls: a spline-source is itself a
points-source, so a sk-cloner given one places clones along the trail
curve, and these controls choose how it is sampled into those positions.
Related. It is one input modality of the spline-source family alongside
sk-svg-spline-source, sk-points-spline-source,
sk-morph-spline-source, and the GPU sources
sk-compute-buffer-spline-source / sk-custom-wgsl-spline-source.
It is typically driven by a sk-follow-constraint; its host is a
sk-spline, whose curve then draws with a stroke paint or carries an
sk-align-to-spline-constraint.
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.
<!-- A comet orbits, and the spline renders the wake it leaves. The comet's
position is driven by an animated <sk-orbit-constraint>; a
<sk-follow-constraint> inside the trail source maps that moving `pos`
onto the trail's `head-pos`, so each new position extends the curve. Watch
the trail: `max-points` sets how much of the recent path stays drawn — the
tail trims as the comet moves on. -->
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<!-- The moving object: a comet orbiting the origin. -->
<sk-sphere id="comet" radius="0.3">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-orbit-constraint radius="4" azimuth="0deg" elevation="20deg">
<sk-animation duration="5000ms" iterations="Infinity" easing="linear">
<sk-keyframe offset="0" azimuth="0deg"></sk-keyframe>
<sk-keyframe offset="1" azimuth="360deg"></sk-keyframe>
</sk-animation>
</sk-orbit-constraint>
</sk-sphere>
<!-- The trail it leaves behind, following the comet's position. -->
<sk-spline>
<sk-trail-spline-source max-points="64">
<sk-follow-constraint source="#comet"
mappings='[{"source":"pos","target":"headPos"}]'></sk-follow-constraint>
</sk-trail-spline-source>
<sk-stroke-paint material="#mat" width="3"></sk-stroke-paint>
</sk-spline>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
max-points |
<number> |
— | Maximum number of control points in the trail. |
head-posanimatable |
<3d-position> ([<number>, <number>, <number>]) |
[0, 0, 0] |
The head position of the trail (world space). |
distribution |
<spline-distribution> ("control-points" | "tessellated" | "arc-length-spaced") |
— | How clone points are placed along the trail — at the control points, at |
distribution-count |
<number> |
— | The number of evenly spaced points to place when the distribution is |