`<sk-torus-gradient-field>`

← prev index next →

A ring-shaped falloff — full weight near a circular tube, fading with distance, the field for a halo or ring of influence.

JavaScript API: TorusGradientField

Remarks

This is the torus 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 from a ring, so the influence forms a circular halo rather than a solid blob.

Key attributes. major-radius is the ring size (centre to tube centre); inner-radius is the full-weight tube core (weight 1) and outer-radius is where the weight reaches 0, fading linearly between, with an optional inherited remap-curve available to reshape the 0→1. The ring lies in the field's local x-z plane; because the field is a scene-graph node, a quarter-turn of pitch stands the ring up, and moving the field places the halo. visualize draws the tube shells.

Related. It shares the field="#id" model with every field: other shapes include sk-spherical-gradient-field, sk-cylinder-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 torus ring. 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 ring
     and draggable markers so its geometry is visible and tunable. -->
<sk-scene>
    <!-- The ring lies in the field's local x-z plane; p="90deg" tips it into
         the box's flat x-y face so the full ring reads across the grid. -->
    <sk-torus-gradient-field id="fld" major-radius="2.5" inner-radius="0.5" outer-radius="1.5" p="90deg"
        visualize="true" interactive-controls="true"></sk-torus-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>

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
`major-radius`animatable	`<number>`	`3.0`	Distance from torus center to tube center.
`inner-radius`animatable	`<number>`	`0.5`	Tube radius where weight = 1.
`outer-radius`animatable	`<number>`	`3.0`	Tube radius where weight = 0.
`x`animatable	`<number>`	`0`	X position.
`y`animatable	`<number>`	`0`	Y position.
`z`animatable	`<number>`	`0`	Z position.
`h`animatable	`<angle>`	`0`	Heading (Y-axis rotation) in radians.
`p`animatable	`<angle>`	`0`	Pitch (X-axis rotation) in radians.
`b`animatable	`<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

↑ Documentation home · ← All elements