`<sk-capsule-points-source>`

← prev index next →

Scatters clones over the surface of a capsule — the way to array copies up a pill shape: a cylinder closed off by a rounded hemisphere at each end.

JavaScript API: CapsulePointsSource

Remarks

This is the capsule-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 finely subdivided capsule costs the same handful of parameters as a coarse one.

Key attributes. radius is the capsule's tube and cap radius (its thickness), and height is the length of the straight cylindrical middle between the two rounded ends — the overall length is height plus a full radius cap at each end. height-segments sets how many rings run up the cylindrical body, cap-segments how many latitude rings make up each rounded cap (their roundness), and rotation-segments how many points sit around each ring (the angular resolution). orientation is the axis the capsule extends along — one of +x, -x, +y, -y, +z, -z. center offsets it from the origin. Only unique points are emitted — a single pole at each tip, no seam duplicates.

Related. For flat-capped tubes and cones use sk-cone-points-source; for a full donut use sk-torus-points-source, and for a plain ball use sk-sphere-points-source or sk-uv-sphere-points-source. To scatter over an arbitrary object's surface rather than an analytic capsule, 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 over a standing pill. radius="1" sets the thickness and
     height="3" the straight middle, so the copies trace a cylinder rounded off
     by a hemispherical cap at each end; cap-segments="3" controls how rounded
     the caps read, and the rotation/height segments space the dots around and
     up the body. Shrink height toward 0 to approach a plain sphere, or grow it
     for a longer capsule. -->
<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-capsule-points-source radius="1" height="3"
            cap-segments="3" rotation-segments="12" height-segments="8"></sk-capsule-points-source>

        <!-- Template cloned at each surface point. -->
        <sk-sphere radius="0.1">
            <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
`radius`	`<number>`	`1.0`	Radius of the capsule.
`height`	`<number>`	`1.0`	Height of the cylindrical portion.
`height-segments`	`<number>`	`1`	Number of segments along the cylinder height.
`cap-segments`	`<number>`	`4`	Number of latitude segments in each hemisphere cap.
`rotation-segments`	`<number>`	`8`	Number of segments around the circumference.
`orientation`animatable	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis along which the capsule extends.
`center`	`<3d-position> ([<number>, <number>, <number>])`	`[0, 0, 0]`	Center position of the capsule.

↑ Documentation home · ← All elements