LinearGradientField

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."

Declarative element: <sk-linear-gradient-field>

Global: available as sk.LinearGradientField inside a scene <script>.

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).

Constructor

constructor(config?: { extent?: number; remapCurve?: SampledCurve; visualize?: boolean; interactiveControls?: boolean; visualizationMarkerSize?: number; visualizationColor?: string; visualizationZeroWeightColor?: string; visualizationSplineThickness?: number; visualizationSplineOccludedOpacity?: number; visualizationMarkerOpacity?: number; id?: string; x?: number; y?: number; z?: number; h?: number; p?: number; b?: number; quaternion?: Quaternion; sx?: number; sy?: number; sz?: number; s?: number; class?: string; style?: string })

Inherited from: SpatialField, VisualizableSceneNode, SceneNode, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Other Properties

Methods

Example

// Gradient along +Z (default orientation)
const field = new LinearGradientField({ id: 'gradient', extent: 10 });

// Gradient along +X: rotate -90° around Y
const fieldX = new LinearGradientField({
    id: 'gradient-x',
    extent: 10,
    h: -Math.PI / 2
});

↑ Documentation home · ← All classes