Feeds an animatable vec4<f32> into your custom WGSL shader — the way to hand
shader code a live 4D value such as a plane equation, a tangent, or any
four-lane packed parameter whose components you animate independently. For a
colour authored as a string, use sk-wgsl-color-uniform instead.
JavaScript API:
WGSLVec4Uniform
This is the four-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, z, and w are the four independent, animatable component
axes; they interpolate LINEARLY per-component (a raw GPU vec4 — not a
quaternion, which has its own slerp semantics elsewhere). The packed lanes
occupy one full vec4 (std140 alignment), and the host generates a
skUniform_<name>() -> vec4<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-vec3-uniform, or the
sk-wgsl-f32-array-uniform. To feed a COLOUR, prefer
sk-wgsl-color-uniform — it takes a colour string and linearises it
for you, instead of four hand-converted linear-RGBA floats.
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.
<!-- Four independently-keyframed lanes: each of x/y/z animates on its own
axis (the vec4's distinguishing capability), here driving the shader's
output. For a colour authored as a string, reach for
<sk-wgsl-color-uniform> instead. -->
<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-vec4-uniform name="tint" x="0.05" y="0.15" z="0.65" w="1">
<sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" x="0.05" y="0.15" z="0.65"></sk-keyframe>
<sk-keyframe offset="1" x="0.85" y="0.35" z="0.04"></sk-keyframe>
</sk-animation>
</sk-wgsl-vec4-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>| 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. |
xrequiredanimatable |
<number> |
0 |
Gets the x component, returning the animated value when animating. |
yrequiredanimatable |
<number> |
0 |
Gets the y component, returning the animated value when animating. |
zrequiredanimatable |
<number> |
0 |
Gets the z component, returning the animated value when animating. |
wrequiredanimatable |
<number> |
0 |
Gets the w component, returning the animated value when animating. |