Combines several fields into one by blending their weights — the field for masking, layering, and carving one field with another.
JavaScript API:
CompositeField
This is a field that composes other fields, taking its place in the
SpatialField family: like every field it turns where into how much — a scalar
weight consumers read by #id (field="#id") — but instead of computing weight
from geometry, it references two or more child fields and blends their weights into
a single result. That makes it the way to build compound influence: mask a noise
field by a falloff, union two shapes, or subtract one region from another.
Key attributes. fields is a space-separated list of the child fields to
combine, each by #id; field-blend-modes is a parallel list of how to fold each
one in — max (union, strongest wins), min (intersection), multiply
(masking), add (accumulate, clamped), or subtract (erosion, clamped). The lists
run in order: the first field seeds the result, so its blend mode is a
placeholder that never applies; each later field combines with the accumulated
weight. The result is itself a field, so it plugs into any field="#id" slot.
Related. It blends any fields — spatial shapes like
sk-spherical-gradient-field, sk-noise-spatial-field, or even
another composite. Typical consumers are a sk-color-map-source, a
sk-tonemap, a sk-simple-point-constraint, or
sk-field-constraint.
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.
<!-- Combines several fields (by id) into one, blending their per-fragment
weights. `fields` and `field-blend-modes` are parallel space-separated
lists: the FIRST field seeds the accumulator, so its mode is a
placeholder that never applies — the interesting mode is the SECOND,
`subtract`, which carves one field out of another.
A purple -> pink -> orange ramp is painted up the scooter by a vertical
linear field (`#up`). A spherical field (`#ball`) centred on the model
reads ~1 inside its radius and 0 outside; folded in with `subtract` it
erases the linear weight wherever the sphere covers, pulling those
fragments back to the ramp's t=0 (purple) end. The sphere sweeps through
the model, so a soft purple orb of influence glides over it while the ramp
underneath holds still. Read it as: seed with the up-gradient, then
subtract the ball. -->
<sk-scene>
<sk-directional-light p="42deg" h="130deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.4"></sk-ambient-light>
<!-- Field A: the vertical gradient (its +Z ramp rotated to +Y with
p="-90deg") — spans the scooter's -3..+3 height. -->
<sk-linear-gradient-field id="up" y="-3" extent="6" p="-90deg"></sk-linear-gradient-field>
<!-- Field B: a near-hard sphere — ~1 inside, 0 outside (inner-radius just
below outer-radius = a thin edge). It sweeps along Z through the model
for liveliness; `visualize` draws its gizmo so the motion is legible. -->
<sk-spherical-gradient-field id="ball" inner-radius="1.69" outer-radius="1.7" visualize y="-1.4">
<sk-animation duration="4000ms" iterations="Infinity" direction="alternate" easing="ease-in-out">
<sk-keyframe offset="0" z="-5"></sk-keyframe>
<sk-keyframe offset="1" z="5"></sk-keyframe>
</sk-animation>
</sk-spherical-gradient-field>
<!-- Compose: seed with #up (its `max` is the placeholder), then SUBTRACT
#ball. The result is a field, so it drives the ramp like any other. -->
<sk-composite-field id="carved"
fields="#up #ball" field-blend-modes="max subtract"></sk-composite-field>
<sk-ramp-color-map id="ramp">
<sk-color-stop stop-offset="0" stop-color="#833AB4"></sk-color-stop>
<sk-color-stop stop-offset="0.5" stop-color="#FD1D89"></sk-color-stop>
<sk-color-stop stop-offset="1" stop-color="#FCB045"></sk-color-stop>
</sk-ramp-color-map>
<sk-color-map-source id="color" color-map="#ramp" intensity-field="#carved"></sk-color-map-source>
<sk-plain-material id="mat" base-color="white" base-color-source="#color"></sk-plain-material>
<sk-mesh src="/js-assets/skenra/demos/html/scenes/scooter.obj"
normalize-scale="3" anchor="center">
<sk-surface-paint material="#mat"></sk-surface-paint>
</sk-mesh>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
remap-curveanimatable |
<remap-curve> |
— | Optional curve that reshapes this composite field's combined output. |
remap-phaseanimatable |
<number> |
0 |
Horizontal remap phase — an animatable scalar that translates a present |
fields |
<id-ref-list> (<id-ref>[,<id-ref>]*) |
"" |
The fields <id-ref-list> as a property. Reads / writes the |
field-blend-modes |
<scalar-blend-mode-list> (<scalar-blend-mode>[,<scalar-blend-mode>]*) |
"" |
The companion field-blend-modes list as a property. Reads / |