Generates clone placements from your own WGSL — a procedural point distribution written as a GPU function, for shapes no built-in source covers (a helix, a gyroid, a formula-defined swarm).
JavaScript API:
CustomWGSLPointsSource
This is the fully custom 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. Where the built-in procedural sources encode a fixed shape
(sk-grid-points-source, sk-sphere-points-source, …), this one
runs an author-supplied getPointAtIndex(index) on the GPU, so every point's
local transform is whatever the WGSL computes — and, like the other procedural
sources, the placements never touch the CPU, so even large counts stay cheap.
Key attributes. point-count is how many points to generate — the WGSL is
evaluated once per index from 0 to point-count − 1. wgsl is the inline
shader body; it must define fn getPointAtIndex(index: u32) -> PointData and
set point.localMatrix (column 3 is the position, the +Y axis is the surface
normal). src loads that WGSL from an external .wgsl file instead, taking
precedence over inline wgsl (mirroring <script src>); on-load / on-error
fire when a src fetch resolves or fails. Author parameters are supplied as
<sk-wgsl-uniform> children and read in WGSL via the generated
skUniform_<name>() accessors.
Related. For placements a GPU compute pass produces into a buffer rather
than a per-index function, see sk-compute-buffer-points-source (which
pairs with a sk-compute-node). For built-in procedural shapes see
sk-grid-points-source, sk-sphere-points-source, and
sk-platonic-sphere-points-source; for object/data-driven placements see
sk-mesh-vertex-points-source, sk-mesh-surface-points-source,
sk-buffer-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 distribution no built-in source provides: a helix traced by author WGSL.
`point-count` sets how many spheres; the `wgsl` body computes each one's
position in getPointAtIndex(); the <sk-wgsl-uniform> children feed its
parameters (count, radius, pitch, phase), read as skUniform_<name>().
Edit the formula or a uniform to reshape the curve. -->
<sk-scene>
<sk-plain-material id="mat" base-color="steelblue"></sk-plain-material>
<sk-cloner mode="vertex">
<sk-custom-wgsl-points-source point-count="300"
wgsl="fn getPointAtIndex(index: u32) -> PointData { var pt: PointData; let t = f32(index) / skUniform_count(); let angle = t * 6.28318 * 5.0 + skUniform_phase(); let pos = vec3<f32>(cos(angle) * skUniform_radius(), t * skUniform_pitch() - skUniform_pitch() * 0.5, sin(angle) * skUniform_radius()); pt.localMatrix = mat4x4<f32>(vec4<f32>(1.0, 0.0, 0.0, 0.0), vec4<f32>(0.0, 1.0, 0.0, 0.0), vec4<f32>(0.0, 0.0, 1.0, 0.0), vec4<f32>(pos, 1.0)); return pt; }">
<sk-wgsl-uniform name="count" value="300"></sk-wgsl-uniform>
<sk-wgsl-uniform name="radius" value="2"></sk-wgsl-uniform>
<sk-wgsl-uniform name="pitch" value="8"></sk-wgsl-uniform>
<sk-wgsl-uniform name="phase" value="0"></sk-wgsl-uniform>
</sk-custom-wgsl-points-source>
<sk-sphere radius="0.15">
<sk-surface-paint material="#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. |
point-countrequired |
<number> |
1 |
Total number of points to generate. |
wgsl |
<string> |
"" |
WGSL shader code for procedural point generation. |
src |
<string> |
— | URL of an external .wgsl file providing the shader code, mirroring |
Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.
onload, onerror