wgsl

Write the per-pixel math by hand, as one WGSL function body that returns a vec4f color.

wgsl(spec: WgslSpec): WgslBody
wgsl(body: string): WgslBody
wgsl(strings: TemplateStringsArray, ...values: unknown[]): WgslBody

Import wgsl from shaders/std.

Put it in paint: for a generator or effect: for a filter. Every name the body uses is bound for you. The definition's props come by name: colors as vec4f in linear RGB with alpha, positions as vec2f in uv, numbers and booleans as f32, select props as their numeric value. The context comes as uv (0–1 across the canvas, y down), time (seconds; the layer's own clock when animatedTime is declared, paused at speed 0), aspect (width / height), viewport (the frame size in device pixels) and pointer (the mouse in uv). In an effect: body child is the color of the layer inside at this pixel. Sample childTexture with childSampler instead when you need neighbouring pixels (a blur, a displacement): that gives the filter its own render pass and hands you premultiplied color, which is unpremultiplied for you on the way out. Template values (${OCTAVES}) are pasted in as text, so a constant can be a loop bound.

Use the {body, inputs, alpha} form to bind extra names (inputs: {t: ctx.time, k: 4}) or to say a gather body already returns straight alpha (alpha: 'straight').

Parameters

NameTypeNotes
specWgslSpec

Examples

paint: wgsl`
  let d = length((uv - center) * vec2f(aspect, 1.0)) / radius;
  return vec4f(mix(outer.rgb, inner.rgb, 1.0 - smoothstep(0.0, 1.0, d)), 1.0);
`

// A gather filter: the layer inside, sampled at a rippled coordinate.
effect: wgsl`
  let wave = sin(length(uv - center) * frequency - time * 4.0) * amplitude;
  return textureSample(childTexture, childSampler, uv + wave);
`

Tip. The names uv, time, aspect, viewport, pointer, child, childTexture and childSampler belong to the body; a prop spelled the same is not bound, so rename the prop.

See also

  • defineShader — Define a shader component from a plain object: its props, and one field that says what it draws.
  • ctx — The context values as tokens: ctx.uv, ctx.time, ctx.aspect, ctx.pointer, ctx.viewportSize, ctx.logicalViewportSize.
  • p — Reference one of the definition's props by name, wherever a word asks for a value.