Feeds a single animatable scalar into your custom WGSL shader — the simplest way to expose one live-tunable number (an amplitude, a mix factor, a time knob) to hand-written shader code.
JavaScript API:
WGSLUniform
This is the scalar member of the shader-input family that belongs to the
compute & custom-WGSL concept (AbstractComputeNode), and — modeled on
ColorStop — it is itself a SkenraAnimatable. Unlike an inert
keyframe, its value can change at runtime, set imperatively or driven by a
nested <sk-animation>; each change notifies the owning host, which repacks
that one slot of its GPU buffer with no shader rebuild (a value is shader
DATA, while name and the set of uniforms are structural).
Key attributes. name is a non-animatable WGSL identifier, unique per
host — changing it, or adding/removing/reordering uniforms, re-keys the
shader. value is the animatable scalar. The host aggregates its uniform
children in DOM order and generates a skUniform_<name>() -> f32 accessor, so
the shader reads the value by name and the author never hand-counts lanes.
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 non-scalar
inputs use the sibling uniforms sk-wgsl-f32-array-uniform,
sk-wgsl-vec2-uniform, sk-wgsl-vec3-uniform,
sk-wgsl-vec4-uniform, and sk-wgsl-color-uniform (a colour
authored as a string).
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.
<!-- Uniforms are children of a custom-wgsl-* host. Each uniform is
addressable and individually animatable: here the animated `mix`
uniform sweeps the sphere's colour between blue and orange. -->
<sk-scene>
<sk-custom-wgsl-color-source id="mix-src"
wgsl="fn evaluateColorSourceRaw(worldPos: vec3<f32>, uv: vec2<f32>, strokeCoord: vec2<f32>, strokeLength: f32, fragCoord: vec2<f32>) -> vec4<f32> { let blue = vec3<f32>(0.05, 0.15, 0.65); let orange = vec3<f32>(0.85, 0.35, 0.04); return vec4<f32>(mix(blue, orange, clamp(skUniform_mix(), 0.0, 1.0)), 1.0); }">
<sk-wgsl-uniform name="mix" value="0">
<sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" value="0"></sk-keyframe>
<sk-keyframe offset="1" value="1"></sk-keyframe>
</sk-animation>
</sk-wgsl-uniform>
</sk-custom-wgsl-color-source>
<sk-plain-material id="mix-mat" base-color-source="#mix-src"
base-color-darken-factor="0.3"></sk-plain-material>
<sk-sphere radius="2" segments="6">
<sk-surface-paint material="#mix-mat"></sk-surface-paint>
</sk-sphere>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
namerequired |
<string> |
"" |
Gets the WGSL identifier this member is addressed by. |
valuerequiredanimatable |
<number> |
0 |
Gets the scalar value, returning the animated value when animating. |