`<sk-custom-wgsl-spline-source>`

← prev index next →

Generates a spline's polyline from inline WGSL you write — the way to describe a curve as a per-vertex formula (a parametric knot, a rose curve, a live time-varying shape) and have the GPU evaluate it every frame.

JavaScript API: CustomWGSLSplineSource

Remarks

This is the WGSL-authored member of the spline-source family: a spline-source supplies the curve geometry for a AbstractSpline, so it lives as the single geometry child of a sk-spline. You write only fn getSplineVertex(index: u32) -> SplineVertex; the source runs its own generation dispatch (one GPU thread per vertex, engine-owned fn main) into a polyline the renderer consumes through the shared zero-copy + readback path. A kernel that reads params.time (scene time in milliseconds) re-generates every frame; a static kernel dispatches once per change. CPU-side queries (pointAt, bounds, cloner matrices) come from the readback path and are null until the first readback — as with sk-compute-buffer-spline-source.

Key attributes. vertex-count is how many polyline vertices to generate — getSplineVertex is called once per index 0 … vertex-count-1. wgsl is the inline kernel body; src loads the WGSL from an external file instead (and, like <script src>, wins over inline wgsl), with on-load / on-error handlers for the fetch. is-closed declares the generated polyline a closed loop. Author parameters are `sk-wgsl-uniformchildren (and the vec/array variants), read inside the kernel via the generatedskUniform_<name>()accessors; changing a uniform value re-uploads and re-dispatches without a pipeline rebuild. Like every spline-source it also carries the family'sdistribution / distribution-count` controls: a spline-source is itself a points-source, so a sk-cloner given one places clones along the curve, and these controls choose how it is sampled into those positions.

Related. It is one input modality of the spline-source family alongside sk-svg-spline-source, sk-points-spline-source, sk-trail-spline-source, sk-morph-spline-source, and its GPU sibling sk-compute-buffer-spline-source (which reads a separate sk-compute-node producer rather than owning the kernel). It parameterizes the kernel with sk-wgsl-uniform children; its host is a sk-spline, whose curve then draws with a stroke paint or carries an sk-align-to-spline-constraint.

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.

<!-- The curve is a pure per-vertex formula: `getSplineVertex(index)` maps each
     of 256 indices to a point on a 5-petalled rose (r = radius·cos(petals·t)),
     lifted and gently rippled in Y. The two <sk-wgsl-uniform> children feed
     `skUniform_radius()` / `skUniform_petals()` into the kernel — edit those
     values (or the WGSL) to reshape the curve without touching any geometry. -->
<sk-scene>
    <sk-plain-material id="mat" base-color="mediumseagreen"></sk-plain-material>

    <sk-spline>
        <sk-custom-wgsl-spline-source vertex-count="256" is-closed="true"
            wgsl="fn getSplineVertex(index: u32) -> SplineVertex { let t = f32(index) / f32(params.output_size) * 6.283185; let r = skUniform_radius() * cos(skUniform_petals() * t); return SplineVertex(r * cos(t), 2.0 + 0.5 * sin(3.0 * t), r * sin(t), 1.0); }">
            <sk-wgsl-uniform name="radius" value="3.5"></sk-wgsl-uniform>
            <sk-wgsl-uniform name="petals" value="5"></sk-wgsl-uniform>
        </sk-custom-wgsl-spline-source>
        <sk-stroke-paint material="#mat" width="3"
            width-space="screen"></sk-stroke-paint>
    </sk-spline>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`vertex-count`required	`<number>`	`1`	Number of polyline vertices to generate. Must be a positive integer.
`wgsl`	`<string>`	`""`	Author WGSL defining `fn getSplineVertex(index: u32) -> SplineVertex`.
`src`	`<string>`	—	URL of an external `.wgsl` file (mirrors `<script src>`).
`is-closed`animatable	`<boolean>`	`false`	Whether the generated polyline forms a closed loop.
`distribution`animatable	`<spline-distribution> ("control-points" \| "tessellated" \| "arc-length-spaced")`	—	How clone points are placed along the spline — at the control points, at
`distribution-count`	`<number>`	—	The number of evenly spaced points to place when the distribution is

Event handler attributes

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

↑ Documentation home · ← All elements