Weight that ramps along a spline from start to end — the field for "grade this effect by how far along the path you are."
JavaScript API:
SplineProgressGradientField
This is the spline-progress member of the SpatialField family: like every
field it turns where into how much
— a scalar weight over space that consumers read by #id (field="#id") to vary
an effect from place to place. Here "where" is measured along a reference spline:
the weight is the normalized arc-length position of the nearest point on the curve.
Key attributes. spline-id names the sk-spline to measure along, by
#id. Sampling anywhere in space takes the nearest point on the curve, so the
weight is 0 at the spline's start, 1 at its end, and normalized in between; the
inherited remap-curve can reshape the ramp. visualize draws the reference so
the direction of increase is clear.
Related. It shares the field="#id" model with every field. Its companion is
sk-spline-distance-gradient-field (weight by distance from a spline
rather than progress along it); other shapes include
sk-linear-gradient-field and sk-spherical-gradient-field. Typical
consumers are a sk-tonemap (mask the shading), a
sk-simple-point-constraint (per-clone strength), and
sk-field-constraint (drive one property).
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.
<!-- Weight tracks PROGRESS along a spline (0 at the start → 1 at the end),
independent of distance. References the spline by id via spline-id. A spatial
field is consumed by reference (field="#id") from materials, tonemaps, and
point constraints alike. Here ONE field drives two consumers at once: a
tonemap (the surface colour) and a cloner's point constraint (per-clone
scale). `visualize`/`interactive-controls` highlight the reference spline and
add draggable markers so the gradient is visible and tunable. -->
<sk-scene>
<sk-spline id="path">
<sk-svg-spline-source path="M -8 0 L 8 0" coordinate-space="x-z"></sk-svg-spline-source>
</sk-spline>
<sk-spline-progress-gradient-field id="progress" spline-id="#path"
visualize="true" interactive-controls="true">
</sk-spline-progress-gradient-field>
<!-- The field drives the tonemap: a red ramp tints the blue base toward the
end of the path (high progress), fading back to blue. The two stops give
the red the same shadow→light shading the base colour gets, so the clones
keep their 3D form instead of flattening to one flat colour. -->
<sk-ramp-color-map id="tint__cm" field="#progress">
<sk-color-stop stop-offset="0" stop-color="#b30f00"></sk-color-stop>
<sk-color-stop stop-offset="1" stop-color="#ff584a"></sk-color-stop>
</sk-ramp-color-map>
<sk-tonemap id="tint" color-map="#tint__cm"></sk-tonemap>
<sk-plain-material id="mat" base-color="#7fa8ff" tonemap="#tint" tonemap-blend-mode="normal"></sk-plain-material>
<sk-plain-material id="edge" base-color="rgba(128, 128, 128, 0.15)"></sk-plain-material>
<!-- A reference box outlines the clone region with faint grey edges only
(no surface paint) — legible in light and dark themes. -->
<sk-cube size-x="16" size-y="2" size-z="2">
<sk-edge-paint material="#edge"></sk-edge-paint>
</sk-cube>
<!-- A volumetric grid of sphere clones fills the box along the path. The
field tints each clone via the tonemap, and the point constraint grows
each clone by the same field weight (scale 1 + 2·weight, via dsx/dsy/dsz). -->
<sk-cloner mode="vertex">
<sk-grid-points-source count-x="17" count-y="3" count-z="3"
spacing-x="1" spacing-y="1" spacing-z="1"></sk-grid-points-source>
<sk-sphere radius="0.07">
<sk-surface-paint material="#mat"></sk-surface-paint>
</sk-sphere>
<sk-simple-point-constraint field="#progress" dsx="2" dsy="2" dsz="2"></sk-simple-point-constraint>
</sk-cloner>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
remap-curveanimatable |
<remap-curve> |
— | Optional remapping curve to reshape the field's [0, 1] output. |
remap-phaseanimatable |
<number> |
0 |
Horizontal remap phase — an animatable scalar that translates a present |
spline-id |
<id-ref> |
"" |
Id of the spline node whose progress drives this field. |
visualize |
<boolean> |
false |
Whether to show visualization (wireframe splines + center marker). Default: false |
interactive-controls |
<boolean> |
false |
Whether to show interactive controls (draggable markers). Requires visualize. Default: false |