`<sk-wgsl-vec3-uniform>`

← prev index next →

Feeds an animatable vec3<f32> into your custom WGSL shader — the way to hand shader code a live 3D value such as a direction, a world-space position, or an RGB color.

JavaScript API: WGSLVec3Uniform

Remarks

This is the three-component member of the shader-input family that belongs to the compute & custom-WGSL concept (AbstractComputeNode); like ColorStop it is itself a SkenraAnimatable. The vector type lives in the TAG (never a type attribute), and each component change repacks the host's GPU buffer slot with no shader rebuild.

Key attributes. name is the non-animatable WGSL identifier (unique per host). x, y, and z are the three independent, animatable component axes. The packed lanes start on a vec4 boundary (std140 vec3 alignment — a following scalar may still use the fourth lane), and the host generates a skUniform_<name>() -> vec3<f32> accessor so the shader reads the whole vector by name.

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 other widths use sk-wgsl-vec2-uniform, sk-wgsl-vec4-uniform, or the sk-wgsl-f32-array-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 animated `direction` vector sweeps the source's shading axis between
     +Y and +X, so the blue->orange split rotates across the sphere. Each
     component is its own keyframe axis, read together via skUniform_direction(). -->
<sk-scene>
    <sk-custom-wgsl-color-source id="dir-src"
        wgsl="fn evaluateColorSourceRaw(worldPos: vec3<f32>, uv: vec2<f32>, strokeCoord: vec2<f32>, strokeLength: f32, fragCoord: vec2<f32>) -> vec4<f32> { let d = normalize(skUniform_direction()); let t = clamp(dot(normalize(worldPos), d) * 0.5 + 0.5, 0.0, 1.0); return vec4<f32>(mix(vec3<f32>(0.05, 0.15, 0.65), vec3<f32>(0.85, 0.35, 0.04), t), 1.0); }">
        <sk-wgsl-vec3-uniform name="direction" x="0" y="1" z="0">
            <sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
                <sk-keyframe offset="0" x="0" y="1" z="0"></sk-keyframe>
                <sk-keyframe offset="1" x="1" y="0" z="0"></sk-keyframe>
            </sk-animation>
        </sk-wgsl-vec3-uniform>
    </sk-custom-wgsl-color-source>
    <sk-plain-material id="dir-mat" base-color-source="#dir-src"
        base-color-darken-factor="0.3"></sk-plain-material>

    <sk-sphere radius="2" segments="6">
        <sk-surface-paint material="#dir-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.
`x`requiredanimatable	`<number>`	`0`	Gets the x component, returning the animated value when animating.
`y`requiredanimatable	`<number>`	`0`	Gets the y component, returning the animated value when animating.
`z`requiredanimatable	`<number>`	`0`	Gets the z component, returning the animated value when animating.

↑ Documentation home · ← All elements