<sk-wgsl-color-uniform>

Feeds a colour into your custom WGSL shader as a named uniform — authored the way every Skenra colour is (color="#E0A85A", "coral", "rgba(…)") instead of four hand-converted linear-RGBA floats.

JavaScript API: WGSLColorUniform

Remarks

This is the colour member of the shader-input family that belongs to the compute & custom-WGSL concept (AbstractComputeNode), and — modeled on ColorStop — it is itself a SkenraAnimatable. The authored colour string is parsed and linearised through the standard colour path, so the shader receives it in straight-alpha LINEAR RGBA (RGB through the inverse-sRGB transfer, alpha unchanged) — exactly the space custom-WGSL colour kernels expect. It packs as a single vec4<f32> reusing the vec4 ABI, so the generated accessor is skUniform_<name>() -> vec4<f32>; the author never hand-converts a colour to floats again.

Key attributes. name is a non-animatable WGSL identifier, unique per host — changing it (or adding/removing/reordering uniforms) re-keys the shader. color is the animatable colour: it accepts the CSS colour subset the Skenra parser supports (the four hex lengths, legacy comma rgb()/rgba() and hsl()/hsla(), the oklab() subset, named colours, and transparent) plus var(--…), is optional (an absent colour is a valid transparent uniform), and interpolates as straight-alpha linear-RGB — the standard colour-interpolation contract, not a raw per-component lerp. An invalid colour throws.

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 raw four-lane value use sk-wgsl-vec4-uniform; for other inputs see sk-wgsl-uniform, sk-wgsl-vec2-uniform, sk-wgsl-vec3-uniform, and sk-wgsl-f32-array-uniform.

<!-- A colour uniform read straight into the kernel. The animated `tint`
     sweeps the sphere between amber and teal — authored as readable colour
     strings, linearised for you, not hand-converted floats. -->
<sk-scene>
    <sk-custom-wgsl-color-source id="tint-src"
        wgsl="fn evaluateColorSourceRaw(worldPos: vec3<f32>, uv: vec2<f32>, strokeCoord: vec2<f32>, strokeLength: f32, fragCoord: vec2<f32>) -> vec4<f32> { return skUniform_tint(); }">
        <sk-wgsl-color-uniform name="tint" color="#E0A85A">
            <sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
                <sk-keyframe offset="0" color="#E0A85A"></sk-keyframe>
                <sk-keyframe offset="1" color="#2AA198"></sk-keyframe>
            </sk-animation>
        </sk-wgsl-color-uniform>
    </sk-custom-wgsl-color-source>
    <sk-plain-material id="tint-mat" base-color-source="#tint-src"
        base-color-darken-factor="0.3"></sk-plain-material>

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

Attributes

↑ Documentation home · ← All elements