`<sk-spline-distance-gradient-field>`

← prev index next →

A tube of influence around a curve — full weight near a spline, fading with distance, the field for "strongest along this path."

JavaScript API: SplineDistanceGradientField

Remarks

This is the spline-distance 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 the weight follows distance to the nearest point on a reference spline, so the influence wraps the curve as a tube.

Key attributes. spline-id names the sk-spline to measure from, by #id. inner-radius is the full-weight core hugging the curve (weight 1 within it) and outer-radius is where the weight reaches 0, fading linearly between, with an optional inherited remap-curve available to reshape the 0→1. visualize highlights the reference spline and draws the field's bounding box so its extent is clear.

Related. It shares the field="#id" model with every field. Its companion is sk-spline-progress-gradient-field (weight by progress along the spline rather than distance from it); the straight-tube analogue is sk-cylinder-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.

<!-- A tube of influence around a spline: weight fades with distance from the
     curve. 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 spline, draw the field's
     bounding box, and add draggable markers so the geometry is visible and
     tunable. -->
<sk-scene>
    <sk-spline id="path">
        <sk-svg-spline-source path="M 0 0 C 5 -10 10 5 15 0" coordinate-space="xz"
                              anchor="center" normalize-scale="6"></sk-svg-spline-source>
    </sk-spline>

    <sk-spline-distance-gradient-field id="tube" spline-id="#path"
        inner-radius="1" outer-radius="5"
        visualize="true" interactive-controls="true"></sk-spline-distance-gradient-field>

    <!-- The field drives the tonemap: a red ramp tints the blue base near the
         curve, fading back to blue with distance. 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="#tube">
        <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="8" size-y="8" size-z="7">
        <sk-edge-paint material="#edge"></sk-edge-paint>
    </sk-cube>

    <!-- A volumetric grid of sphere clones fills the box. 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="9" count-y="9" count-z="8"
            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="#tube" dsx="2" dsy="2" dsz="2"></sk-simple-point-constraint>
    </sk-cloner>
</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.
`remap-curve`animatable	`<remap-curve>`	—	Optional remapping curve to reshape the field's [0, 1] output.
`remap-phase`animatable	`<number>`	`0`	Horizontal remap phase — an animatable scalar that translates a present
`spline-id`	`<id-ref>`	`""`	Id of the spline node this field measures distance from.
`inner-radius`animatable	`<number>`	`0`	Inner radius — weight = 1 within this distance.
`outer-radius`animatable	`<number>`	`5`	Outer radius — weight = 0 beyond this distance.
`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

↑ Documentation home · ← All elements