Coherent (Simplex) noise over space — smooth, organic, cloud-like variation, the field for natural randomness that neighbouring points still agree on.
JavaScript API:
NoiseSpatialField
This is the noise 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 the weight is 3D Simplex noise mapped to [0, 1], so it
varies smoothly and organically rather than by a geometric shape.
Key attributes. frequency sets the base scale — higher packs more, smaller
features into the same space. octaves layers several frequencies (fractional
Brownian motion) for fine detail; lacunarity is the frequency step between
octaves and persistence how quickly their amplitude falls off, together tuning
how rough versus smooth the result looks. seed picks a specific noise pattern
deterministically — change it for a different-but-similar field. The noise rides
the field's own frame, so because the field is a scene-graph node, animating its
x/y/z scrolls the pattern for flowing noise. The pattern fills all of space
(there is no boundary), so visualize marks the field's origin rather than an
extent.
Related. It shares the field="#id" model with every field. Its uncorrelated
counterpart is sk-random-spatial-field (independent values per cell, no
smoothness); geometric alternatives include 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).
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.
<!-- Coherent Simplex noise. 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 noise field drives two consumers at once: a
tonemap (the surface colour) and a cloner's point constraint (per-clone
scale), so the same cloudy pattern both tints and swells the clones.
`frequency`/`octaves`/`persistence` set the grain; `seed` picks the pattern. -->
<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-noise-spatial-field id="fld" frequency="1.5" octaves="4"
persistence="0.55" seed="7" visualize="true"></sk-noise-spatial-field>
<!-- The field drives the tonemap: a red ramp tints the blue base where the
noise is high, fading back to blue where it is low. 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. The noise tints each
clone via the tonemap and swells it via the point constraint (scale
1 + 2·weight, via dsx/dsy/dsz), so cloudy hot-spots read in 3D. -->
<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 |
octaves |
<number> |
4 |
Number of noise layers, 1-8. Changing octaves at runtime triggers shader recompilation. |
lacunarity |
<number> |
2.0 |
Frequency multiplier per octave. |
seed |
<number> |
0 |
Deterministic seed. |
frequencyanimatable |
<number> |
1.0 |
Spatial frequency — higher values produce more detail. |
persistenceanimatable |
<number> |
0.5 |
Amplitude multiplier per octave. |