The base concept for a point-constraint: an effect that transforms every
clone of a Cloner in parallel on the GPU.
Base class — has no declarative element of its own; subclasses inherit its members.
A point-constraint is the many-at-once sibling of the Constraint. Where
a constraint drives one node's properties on the CPU, a point-constraint runs a
GPU compute kernel that displaces, rotates, scales, or re-aims all of a
cloner's points at once — so it stays cheap even at hundreds of thousands of
clones.
Structural relationship. A point-constraint belongs to a sk-cloner,
alongside the cloner's points-source and cloned content, and transforms that
cloner's points. It is usually driven by a SpatialField: the field gives
each point a weight, and field-weight-range maps that weight onto the effect's
strength (mix(lo, hi, weight)); with no field the effect applies at full
strength everywhere.
Member elements: sk-simple-point-constraint (per-clone
translate/rotate/scale by weight); sk-target-at-point-constraint (aim
every clone at a node); sk-radial-push-point-constraint (push clones out
from an origin); sk-ocean-displacement-point-constraint (GPU ocean-wave
displacement); and sk-custom-wgsl-point-constraint (an inline WGSL
displacement kernel).
The example scatters clones on a grid and bulges them upward where a spherical field's weight is high.
Abstract base class — not instantiated directly. Construct one of its concrete subclasses; this class contributes the members below to them.
Inherited from: SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
fieldWeightRangeanimatable |
readonly [number, number] |
— | The [lo, hi] range the normalized field weight maps onto. |
PointConstraint |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
targetread-only |
ConstrainablePointsHost | null |
— | The target host this modifier applies to, or null before |
PointConstraint |
fieldread-only |
Field | null |
— | The field used by this point constraint, if any. | PointConstraint |
sceneread-only |
any |
— | Gets the Scene this animatable belongs to, if any. | SkenraAnimatable |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation |
Creates a new SkenraAnimation for this target per Web Animations API. | SkenraAnimatable |
removeAnimation(animation: SkenraAnimation): boolean |
Removes a specific animation from this object. | SkenraAnimatable |
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] |
Creates a constraint on this Animatable using a fluent API. | SkenraAnimatable |
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.
<sk-scene>
<sk-spherical-gradient-field id="bulge" inner-radius="0" outer-radius="6"></sk-spherical-gradient-field>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<sk-cloner mode="vertex">
<sk-grid-points-source count-x="12" count-y="1" count-z="12"
spacing-x="1" spacing-y="1" spacing-z="1"></sk-grid-points-source>
<sk-sphere radius="0.2"><sk-surface-paint material="#mat"></sk-surface-paint></sk-sphere>
<sk-simple-point-constraint field="#bulge" dy="3"></sk-simple-point-constraint>
</sk-cloner>
</sk-scene>