`<sk-wgsl-f32-array-uniform>`

← prev index next →

Feeds a whole array of f32 values into your custom WGSL shader under one name — the way to hand shader code a table of numbers (per-band weights, a small LUT, a set of coefficients) indexable at runtime.

JavaScript API: WGSLF32ArrayUniform

Remarks

This is the array member of the shader-input family that belongs to the compute & custom-WGSL concept (AbstractComputeNode), and like ColorStop it is itself a SkenraAnimatable. Its values are packed densely into the host's GPU block and are animatable element-wise at runtime, set imperatively or driven by a nested <sk-animation>; each change repacks the slot with no shader rebuild.

Key attributes. name is the non-animatable WGSL identifier (unique per host). values is a JSON array of finite numbers, animatable element-wise (all keyframes must share the array's length). The array length is structural — it must not change during an animation, and editing it re-keys the host's shader like adding or removing a member. The host generates an indexed skUniform_<name>(i: u32) -> f32 accessor, so the shader reads any element by index.

Related. It is a child of any custom-WGSL host — sk-custom-wgsl-color-source, sk-custom-wgsl-points-source, sk-custom-wgsl-point-constraint, sk-custom-wgsl-spline-source, or sk-compute-node. For a single value use sk-wgsl-uniform; for fixed-width vectors use sk-wgsl-vec2-uniform, sk-wgsl-vec3-uniform, and sk-wgsl-vec4-uniform; for a colour authored as a string use sk-wgsl-color-uniform.

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 dense `weights` array drives three horizontal colour bands on the
     sphere — each band reads its own element via the indexed skUniform_weights(i)
     accessor, with index 0 at the BOTTOM and index 2 at the TOP. A nested
     <sk-animation> interpolates the whole array element-wise between
     [0.9, 0.5, 0.1] and [0.1, 0.5, 0.9], so the strong (reddest) band travels
     from bottom to top and back while the middle band holds. Read the moving
     bands against the animating array values. -->
<sk-scene>
    <sk-custom-wgsl-color-source id="bands-src"
        wgsl="fn evaluateColorSourceRaw(worldPos: vec3<f32>, uv: vec2<f32>, strokeCoord: vec2<f32>, strokeLength: f32, fragCoord: vec2<f32>) -> vec4<f32> { let t = clamp(worldPos.y * 0.25 + 0.5, 0.0, 0.999); let band = u32(t * 3.0); let w = skUniform_weights(band); return vec4<f32>(w, 0.2, 1.0 - w, 1.0); }">
        <sk-wgsl-f32-array-uniform name="weights" values="[0.9, 0.5, 0.1]">
            <sk-animation duration="3000ms" iterations="Infinity" direction="alternate">
                <sk-keyframe offset="0" values="[0.9, 0.5, 0.1]"></sk-keyframe>
                <sk-keyframe offset="1" values="[0.1, 0.5, 0.9]"></sk-keyframe>
            </sk-animation>
        </sk-wgsl-f32-array-uniform>
    </sk-custom-wgsl-color-source>
    <sk-plain-material id="bands-mat" base-color-source="#bands-src"
        base-color-darken-factor="0.3"></sk-plain-material>

    <sk-sphere radius="2" segments="6">
        <sk-surface-paint material="#bands-mat"></sk-surface-paint>
    </sk-sphere>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`id`	`<id>`	—	The element's unique identifier — the standard HTML global `id` attribute.
`name`required	`<string>`	`""`	Gets the WGSL identifier this member is addressed by.
`values`requiredanimatable	`<number-list> (<number>[,<number>]*)`	`[]`	Gets the array values, returning the animated array when animating.

↑ Documentation home · ← All elements