`<sk-disc-points-source>`

← prev index next →

Scatters clones over a flat disc or annular ring — the way to array copies in concentric rings on a circular patch, with an optional hole in the middle.

JavaScript API: DiscPointsSource

Remarks

This is the disc-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 densely subdivided disc costs the same handful of parameters as a sparse one.

Key attributes. outer-radius sets the disc's outer edge and inner-radius its inner edge — leave inner-radius at 0 for a solid disc (with a single centre point) or set it above 0 to punch a hole and make a ring. radial-segments sets how many rings lie between the inner and outer radius (how far apart the concentric rings are), and rotation-segments sets how many points sit around each ring (the angular resolution). orientation is the axis the disc faces — the axis perpendicular to its plane, one of +x, -x, +y, -y, +z, -z — so +y lays the disc flat and +z stands it up facing the camera. center offsets the disc from the origin.

Related. For a rectangular flat patch use sk-plane-points-source; for the rim of a tube use sk-cone-points-source (which caps into a disc at its ends), and for a full donut use sk-torus-points-source. For a volumetric lattice see sk-grid-points-source. To scatter over an arbitrary object's surface rather than an analytic disc, 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 on a flat ring. inner-radius="1" hollows out the middle and
     outer-radius="3" sets the rim; radial-segments="2" gives three concentric
     circles of dots and rotation-segments="24" spaces 24 around each. With
     orientation="+z" the ring stands up facing the camera. Set inner-radius
     to 0 to fill the hole into a solid disc, or raise the segment counts for
     a denser ring. -->
<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-disc-points-source inner-radius="1" outer-radius="3"
            radial-segments="2" rotation-segments="24" orientation="+z"></sk-disc-points-source>

        <!-- Template cloned at each ring point. -->
        <sk-sphere radius="0.18">
            <sk-surface-paint material="#mat"></sk-surface-paint>
        </sk-sphere>
    </sk-cloner>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`inner-radius`	`<number>`	`0`	Inner radius of the disc (0 for solid disc).
`outer-radius`	`<number>`	`1.0`	Outer radius of the disc.
`radial-segments`	`<number>`	`1`	Number of segments from center to edge.
`rotation-segments`	`<number>`	`8`	Number of segments around the circumference.
`orientation`animatable	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis perpendicular to the disc plane.
`center`	`<3d-position> ([<number>, <number>, <number>])`	`[0, 0, 0]`	Center position of the disc.

↑ Documentation home · ← All elements