Scatters clones evenly over the surface of a sphere using a Fibonacci spiral — the way to spread copies across a ball with near-uniform spacing and no pole clustering.
JavaScript API:
SpherePointsSource
This is the sphere-surface 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 point. Because the positions are
generated procedurally in the shader (see ShaderFunctionPointsSource),
a million-point sphere costs the same handful of parameters as a hundred-point
one.
Key attributes. count sets how many points are placed on the surface —
the total clone count. radius sets the sphere's size; the points sit on that
spherical shell. center offsets the sphere from the origin (defaults to the
origin). distribution selects the placement algorithm — fibonacci (the
only value, and the default) uses the golden-angle spiral, which gives the most
even coverage and avoids the crowding at the poles that a latitude/longitude
grid produces.
Related. For a UV (latitude/longitude) sphere — regular rings and the
option of a single hemisphere — use sk-uv-sphere-points-source; for a
geodesic subdivision use sk-platonic-sphere-points-source. Other closed
surfaces include sk-cube-points-source,
sk-capsule-points-source, and sk-torus-points-source;
sk-grid-points-source fills a volume instead. To scatter over an
arbitrary object's surface rather than an analytic shape, see
sk-mesh-surface-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.
<!-- Small spheres scattered evenly over a ball. The Fibonacci spiral spaces
the 240 points near-uniformly with no crowding at the poles — the whole
surface reads as one dotted sphere. Raise count for a denser shell, or
change radius to grow or shrink the ball the dots sit on. -->
<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">
<sk-sphere-points-source count="240" radius="3" distribution="fibonacci"></sk-sphere-points-source>
<!-- Template cloned at each of the 240 surface points. -->
<sk-sphere radius="0.16">
<sk-surface-paint material="#mat"></sk-surface-paint>
</sk-sphere>
</sk-cloner>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
countrequired |
<number> |
1 |
Number of points on the sphere surface. |
radius |
<number> |
1.0 |
Sphere radius. |
center |
<3d-position> ([<number>, <number>, <number>]) |
[0, 0, 0] |
Sphere center position. |
distribution |
<sphere-distribution> ("fibonacci") |
"fibonacci" |
Distribution method for points on the sphere. |