A pill-shaped falloff around a segment — full weight near a capsule (a rod with rounded ends), fading with distance, the field for a smooth stadium of influence.
JavaScript API:
CapsuleGradientField
This is the capsule 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 a line segment
with hemispherical caps, so the influence is a smoothly rounded rod.
Key attributes. The capsule is a segment along the local axis with endpoints
at ±height/2; distance is measured to the nearest point on that segment.
inner-radius is the full-weight core (weight 1 within it), outer-radius is
where the weight reaches 0, fading linearly between, and the inherited
remap-curve can reshape the 0→1. Because the field is a scene-graph node, the
capsule axis is its local Y axis — rotate the field to aim it, move it to place
it. visualize draws the inner/outer shells.
Related. It shares the field="#id" model with every field: its closest
relative is sk-cylinder-gradient-field (an axis segment measured the same
way); other shapes include sk-spherical-gradient-field and
sk-cube-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.
<!-- Fade based on distance from a capsule (line-segment) core. A spatial field is a
scene resource addressed by id and 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` draw the
field's core and draggable markers so its geometry is visible and tunable. -->
<sk-scene>
<sk-capsule-gradient-field id="fld" inner-radius="1.2" outer-radius="4" height="6"
visualize="true" interactive-controls="true"></sk-capsule-gradient-field>
<!-- The field drives the tonemap: a red ramp tints the blue base where the
field weight is high, 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="#fld">
<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="#fld" 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 |
inner-radiusanimatable |
<number> |
1.0 |
Inner radius — weight = 1 inside this capsule radius. |
outer-radiusanimatable |
<number> |
5.0 |
Outer radius — weight = 0 outside this capsule radius. |
heightanimatable |
<number> |
4.0 |
Distance between hemisphere cap centers along local Y. |
xanimatable |
<number> |
0 |
X position. |
yanimatable |
<number> |
0 |
Y position. |
zanimatable |
<number> |
0 |
Z position. |
hanimatable |
<angle> |
0 |
Heading (Y-axis rotation) in radians. |
panimatable |
<angle> |
0 |
Pitch (X-axis rotation) in radians. |
banimatable |
<angle> |
0 |
Bank (Z-axis rotation) in radians. |
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 |