Lays out points on a regular 3D lattice centred at the origin — the way to array copies of an object in even rows, on a plane, or through a filled volume.
JavaScript API:
GridPointsSource
This is the lattice member of the points-source family: a points-source
defines the set of positions at which a sk-cloner places copies of its
content, so it lives as a child of a <sk-cloner> and the cloner's other child
is the template that gets cloned at each grid point. Because the positions are
generated procedurally in the shader (see ShaderFunctionPointsSource),
a million-point grid costs the same handful of parameters as a hundred-point
one.
Key attributes. count-x / count-y / count-z set how many points lie
along each axis — the total is their product, and setting one count to 1
collapses that axis to give a line (two 1s) or a plane (one 1) instead of a
volume. spacing-x / spacing-y / spacing-z set the gap between adjacent
points on each axis, so the grid's extent on an axis is (count − 1) × spacing.
The lattice is always auto-centred on the origin, so growing the counts expands
it symmetrically. normal-direction is the shared surface normal reported for
every point; a cloner with align-to-normal turns each clone to face it (so the
whole field leans together), and it otherwise stays at the default up vector.
Related. It sits alongside the surface sources — sk-sphere-points-source,
sk-disc-points-source, sk-plane-points-source,
sk-cube-points-source, and the rest — as the volumetric member of the
family; sk-plane-points-source is the dedicated 2D counterpart. For
points that come from data or another object rather than a formula, see
sk-buffer-points-source, sk-mesh-vertex-points-source, and
sk-cloner-points-source. Its host is always a sk-cloner.
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.
<!-- A filled 3D lattice of cones — a 6×4×6 grid (144 clones) that a data buffer
would store point-by-point but this source generates from six numbers. Read
the layout directly: 6 columns across (count-x), 4 layers high (count-y),
6 rows deep (count-z), each axis evenly spaced. Every cone points the same
way — the shared `normal-direction` (here tilted, not straight up), made
visible because the cloner's `align-to-normal` orients each clone's +Y to it.
Change any count to reshape the lattice; change a spacing to stretch it along
that axis; change `normal-direction` to tilt every cone together. -->
<sk-scene>
<sk-directional-light p="55deg" h="30deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.45"></sk-ambient-light>
<sk-plain-material id="mat" base-color="#4f86c6"></sk-plain-material>
<sk-cloner mode="vertex" align-to-normal="true" alignment-axis="+y">
<sk-grid-points-source count-x="6" count-y="4" count-z="6"
spacing-x="1.4" spacing-y="1.4" spacing-z="1.4"
normal-direction="[0.4, 1, 0.2]"></sk-grid-points-source>
<!-- Template cloned at each of the 144 grid points; its +Y aligns to the
shared normal, so the whole field leans together. -->
<sk-cone bottom-radius="0.22" top-radius="0" height="0.6">
<sk-surface-paint material="#mat"></sk-surface-paint>
</sk-cone>
</sk-cloner>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
count-x |
<number> |
1 |
Number of points along the X axis. |
count-y |
<number> |
1 |
Number of points along the Y axis. |
count-z |
<number> |
1 |
Number of points along the Z axis. |
spacing-x |
<number> |
1 |
Distance between adjacent points along the X axis. |
spacing-y |
<number> |
1 |
Distance between adjacent points along the Y axis. |
spacing-z |
<number> |
1 |
Distance between adjacent points along the Z axis. |
normal-direction |
<3d-vector> ([<number>, <number>, <number>]) |
[0, 1, 0] |
Normal direction for all points. |