Uncorrelated random weight per point (or per cell) — the field for scattering variation across clones without any smooth pattern.
JavaScript API:
RandomSpatialField
This is the random 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. Unlike sk-noise-spatial-field, neighbouring points are
not related: the weight is a hash of position, so it looks like white noise —
ideal for per-clone jitter (random scale, random tint) rather than smooth blobs.
Key attributes. seed picks the pattern deterministically — the same seed
always gives the same scatter, and changing it reshuffles every value. cell-size
quantizes position to a grid before hashing: at 0 every point gets its own value
(per-fragment white noise), while a larger cell makes whole blocks of space (and
every clone inside one block) share a single value — the way to randomize per
object/cluster instead of per fragment.
Related. It shares the field="#id" model with every field. Its smooth
counterpart is sk-noise-spatial-field (coherent, cloud-like). Typical
consumers are a sk-tonemap (random tint), a
sk-simple-point-constraint (random per-clone scale), and
sk-field-constraint (drive one property).
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.
<!-- Uncorrelated random weight, quantized per CELL. A spatial field is a scene
resource addressed by id and consumed by reference (field="#id") from
materials, tonemaps, and point constraints alike. Here ONE random field drives
two consumers at once: a tonemap (surface colour) and a cloner's point
constraint (per-clone scale). `cell-size="2"` makes each 2-unit block of
clones share one random value, so you see distinct clumps rather than
per-sphere noise; `seed` picks which scatter. -->
<sk-scene>
<sk-directional-light p="52deg" h="23deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.4"></sk-ambient-light>
<sk-random-spatial-field id="fld" seed="123" cell-size="2"
visualize="true"></sk-random-spatial-field>
<!-- The field drives the tonemap: a red ramp tints the blue base in the
high-value cells, blue in the low ones. Two stops keep the clones'
shadow→light shading instead of flattening to one flat colour. -->
<sk-ramp-color-map id="tint__cm" field="#fld">
<sk-color-stop stop-offset="0" stop-color="#b30f00"></sk-color-stop>
<sk-color-stop stop-offset="1" stop-color="#ff584a"></sk-color-stop>
</sk-ramp-color-map>
<sk-tonemap id="tint" color-map="#tint__cm"></sk-tonemap>
<sk-plain-material id="mat" base-color="#7fa8ff" tonemap="#tint" tonemap-blend-mode="normal"></sk-plain-material>
<sk-plain-material id="edge" base-color="rgba(128, 128, 128, 0.15)"></sk-plain-material>
<!-- A reference box outlines the clone region with faint grey edges only. -->
<sk-cube size-x="8" size-y="8" size-z="7">
<sk-edge-paint material="#edge"></sk-edge-paint>
</sk-cube>
<!-- A volumetric grid of sphere clones fills the box. Each 2-unit cell's
clones share one random value: same tint AND same swell (scale
1 + 2·weight, via dsx/dsy/dsz), so the scatter reads as clumps. -->
<sk-cloner mode="vertex">
<sk-grid-points-source count-x="9" count-y="9" count-z="8"
spacing-x="1" spacing-y="1" spacing-z="1"></sk-grid-points-source>
<sk-sphere radius="0.07">
<sk-surface-paint material="#mat"></sk-surface-paint>
</sk-sphere>
<sk-simple-point-constraint field="#fld" dsx="2" dsy="2" dsz="2"></sk-simple-point-constraint>
</sk-cloner>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
remap-curveanimatable |
<remap-curve> |
— | Optional remapping curve to reshape the field's [0, 1] output. |
remap-phaseanimatable |
<number> |
0 |
Horizontal remap phase — an animatable scalar that translates a present |
seedanimatable |
<number> |
0 |
Deterministic seed. |
cell-sizeanimatable |
<number> |
1.0 |
Quantization cell size. When > 0, positions are quantized to a grid. When 0, each unique position gets a unique value. |