`<sk-linear-gradient-field>`

← prev index next →

A directional ramp — weight climbs from zero to full along one axis, the field for "grade this effect smoothly from one side to the other."

JavaScript API: LinearGradientField

Remarks

This is the linear 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 depends on how far a point lies along a single direction, so it makes a smooth one-way gradient.

Key attributes. extent is the ramp length: weight is 0 at the field's origin and 1 at extent distance along the gradient axis, clamping to 0 behind the origin and 1 beyond extent, and the inherited remap-curve can reshape that 0→1. The gradient direction is the field's local +Z axis — because the field is a scene-graph node, rotate it (h/p/b, the same convention as cameras and lights) to aim the ramp any way, and move it to slide where the ramp begins. visualize draws the axis and endpoints so the ramp is visible while composing.

Related. It shares the field="#id" model with every field: sibling shapes include sk-spherical-gradient-field (radial rather than directional) 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.

<!-- Linear gradient along the field’s local axis over `extent`. 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 axis and draggable markers so its geometry is visible and tunable. -->
<sk-scene>
    <sk-linear-gradient-field id="fld" extent="4" z="-2"
        visualize="true" interactive-controls="true"></sk-linear-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
`extent`animatable	`<number>`	`10`	Distance from origin to full weight along the local +Z axis.
`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