SplineProgressGradientField

Weight that ramps along a spline from start to end — the field for "grade this effect by how far along the path you are."

Declarative element: <sk-spline-progress-gradient-field>

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

Remarks

This is the spline-progress 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 "where" is measured along a reference spline: the weight is the normalized arc-length position of the nearest point on the curve.

Key attributes. spline-id names the sk-spline to measure along, by #id. Sampling anywhere in space takes the nearest point on the curve, so the weight is 0 at the spline's start, 1 at its end, and normalized in between; the inherited remap-curve can reshape the ramp. visualize draws the reference so the direction of increase is clear.

Related. It shares the field="#id" model with every field. Its companion is sk-spline-distance-gradient-field (weight by distance from a spline rather than progress along it); other shapes include sk-linear-gradient-field and sk-spherical-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?: { spline?: AbstractSpline | null; 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

const spline = new PathSpline({ id: 'path', svg: 'M 0 0 L 10 0' });
const field = new SplineProgressGradientField({
    id: 'progress',
    spline,
    visualize: true,
});
scene.appendChild(field);

↑ Documentation home · ← All classes