Appearance

Documentation / spryte / Shader

Class: Shader ​

Defined in: shader.ts:29

A custom fragment effect, applied to everything drawn inside draw.withShader(shader, fn).

The source defines vec4 effect(vec4 color, vec2 uv), which returns the pixel's colour. color is the draw's tint and alpha, premultiplied. source(uv) samples the image being drawn. Declare your own uniforms and set them with set(). Return premultiplied colour (rgb already multiplied by alpha).

ts
const wave = draw.createShader(`
  uniform float time;
  vec4 effect(vec4 color, vec2 uv) {
    uv.x += sin(uv.y * 40.0 + time * 6.0) * 0.01;
    return source(uv) * color;
  }
`);
wave.set("time", t);
draw.withShader(wave, () => draw.sprite(hero, x, y));

WebGL2 only. On the Canvas 2D fallback, drawing inside withShader happens without the effect (warned once).

Constructors ​

Constructor ​

new Shader(source): Shader

Defined in: shader.ts:35

Parameters ​

source ​

string

Returns ​

Shader

Properties ​

onChange ​

onChange: (() => void) | undefined

Defined in: shader.ts:33

Internal

Called when a uniform changes, so pending draws flush with the old value first.

source ​

readonly source: string

Defined in: shader.ts:35

uniforms ​

readonly uniforms: Map<string, UniformValue>

Defined in: shader.ts:31

Internal

Uniform values by name.

Methods ​

set() ​

set(name, value): this

Defined in: shader.ts:40

Set a uniform declared in the source. Applies to draws made after this call.

Parameters ​

name ​

string

value ​

UniformValue

Returns ​

this