Reuses another cloner's placements as its own points — the way to stamp several different templates at one shared set of positions without recomputing them.
JavaScript API:
ClonerPointsSource
This is the shared-positions member of the points-source family (see
ShaderFunctionPointsSource): 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 cloned at each
point. Instead of a formula or a mesh, this source takes its positions from a
source cloner's already-computed transforms — so the consuming cloner places
exactly as many instances as the source produced (its count is the source's
count, not a product of the two). Its value is reuse: several consuming cloners
can reference the same source and share that one transform buffer, so drawing K
different templates at N shared positions costs N+K point sets of memory, not K
independently-recomputed copies of N.
This is distinct from multiplicative nesting — placing a whole cloned group at
every point of an outer cloner for an N×M "grid of grids". That is a separate
mechanism: DOM-nest one <sk-cloner> inside another, each with its OWN
points-source, and their counts multiply (see sk-cloner).
Key attributes. cloner references (by #id) the source cloner whose
output supplies the points. That source cloner is typically declared with
mode="object" — it just produces the set of positions and carries no visible
template of its own — while each consuming cloner holds the template that gets
stamped at those positions.
Related. For points that come from a mesh see
sk-mesh-vertex-points-source and sk-mesh-surface-points-source;
from an explicit buffer see sk-buffer-points-source; from the GPU see
sk-compute-buffer-points-source and
sk-custom-wgsl-points-source. For the built-in procedural shapes that
commonly drive the source cloner, see sk-grid-points-source and
sk-sphere-points-source. Its host — and the source it references — are
both 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.
<!-- Shared-position instancing: one source cloner's placements, reused by two
consuming cloners. The source cloner (#lattice, mode="object") produces a
4×4 grid of positions and draws nothing itself. TWO cloners reference it by
id — one stamps a cube at each of the 16 positions, the other a sphere,
slightly raised — so both sets sit on the SAME positions while reading a
single shared transform buffer (16+16 memory, not two recomputed grids).
Move #lattice's grid and both consumers follow together. -->
<sk-scene>
<sk-directional-light p="40deg" h="25deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.4"></sk-ambient-light>
<sk-plain-material id="cube-mat" base-color="#5b7b9a"></sk-plain-material>
<sk-plain-material id="sphere-mat" base-color="#d8a24a"></sk-plain-material>
<!-- Source cloner: a coarse grid of positions. `mode="object"` exposes
per-instance transforms; it has no visible template of its own. -->
<sk-cloner id="lattice" mode="object">
<sk-grid-points-source count-x="4" count-y="1" count-z="4"
spacing-x="2" spacing-y="2" spacing-z="2"></sk-grid-points-source>
</sk-cloner>
<!-- Consumer A: a cube at every shared position. -->
<sk-cloner mode="vertex">
<sk-cloner-points-source cloner="#lattice"></sk-cloner-points-source>
<sk-cube size="0.5">
<sk-surface-paint material="#cube-mat"></sk-surface-paint>
</sk-cube>
</sk-cloner>
<!-- Consumer B: a sphere at the SAME positions, reusing #lattice's transform
buffer rather than recomputing a grid. The offset goes on the TEMPLATE
(`<sk-sphere y=…>`), which composes per-clone; a hybrid source already
carries world-space positions, so a transform on the consuming CLONER
itself would have no effect. -->
<sk-cloner mode="vertex">
<sk-cloner-points-source cloner="#lattice"></sk-cloner-points-source>
<sk-sphere y="1.4" radius="0.3" segments="3">
<sk-surface-paint material="#sphere-mat"></sk-surface-paint>
</sk-sphere>
</sk-cloner>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
clonerrequiredanimatable |
<id-ref> |
— | Optional parent Cloner instance whose output provides points. reference by id |