<sk-ocean-displacement-point-constraint>

← prev index next →

Rolls an animated FFT ocean-wave surface across a subdivided host — turns a flat plane, mesh, or cloner into moving water on the GPU.

JavaScript API: OceanDisplacementPointConstraint

Remarks

This is the ocean member of the PointConstraint family: like every point-constraint it runs a GPU kernel over all of a host's points at once. Here the kernel samples an FFT-evolved wave field that advances every frame, so a densely subdivided surface heaves and ripples like open water. Unlike most point-constraints it needs no SpatialField — the wave field is its own driver — and it attaches to any points host: a mesh (a sk-plane is the usual ocean), a spline, or a sk-cloner.

Key attributes. preset picks a sea state (e.g. calm, rough) — the one-shot way to set the whole wave spectrum, and all the example needs. For finer control the individual spectrum controls (wind-speed, wind-direction, vertical-amplitude, time-scale, …) set the swell directly — higher wind gives longer, steeper waves. Either way the host must be finely subdivided (many segments) for the waves to read; a low-poly plane shows facets instead of a smooth surface.

Composition. Point-constraints on the same host apply in attach order, each building on the previous displacement. Attach the ocean FIRST so a later sk-radial-push-point-constraint (say, a wake around a boat) layers on top of the waves rather than being flattened by them.

Related. Its siblings in the PointConstraint family are sk-simple-point-constraint, sk-radial-push-point-constraint, sk-target-at-point-constraint, and the fully custom sk-custom-wgsl-point-constraint.

Projection modes (see OceanDisplacementProjection): 'planar-xz' (default) projects the field down a single world-XZ plane — correct for roughly-horizontal hosts. 'triplanar-surface' is an opt-in, MESH-only surface-relative projection (height along the surface normal, blended across three axis planes) that wraps the ocean around a non-planar host so it reads as churning water; bind origin to the host/rig for the object-locked "ball of water" look.

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.

Attributes

AttributeTypeDefaultDescription
id <id> — The element's unique identifier — the standard HTML global id attribute.
show <boolean> — Whether ocean displacement is active.
preset <ocean-preset> ("calm" | "moderate" | "rough" | "storm") — Applies a named preset. A preset describes the SEA STATE write-only
wind-speedanimatable <number> — Wind speed (animatable).
vertical-amplitudeanimatable <number> — Vertical amplitude multiplier (animatable).
wind-directionanimatable <angle> — Wind direction in degrees (animatable).
horizontal-amplitudeanimatable <number> — Horizontal amplitude multiplier (animatable).
time-scaleanimatable <number> — Effect-time speed factor (animatable). The wave animation samples
small-wave-length-cut-off <number> — Small wavelength cutoff for ocean spectrum filtering.
tile-size <number> — Wave-pattern tile size in world units.
affects-normals <boolean> false The AUTHORED affects-normals value, independent of show. alias for affectsNormalsConfig
projection <ocean-projection> ("planar-xz" | "triplanar-surface") — Projection mode — how the ocean field maps onto the host surface. See
originanimatable <id-ref> — Optional SceneNode whose full world matrix defines the reference by id
field-weight-rangeanimatable <field-weight-range> ([<number>, <number>]) — The [lo, hi] range the field weight maps onto.

↑ Documentation home · ← All elements