Documentation / @debuffjp/core / Shader

Interface: Shader

Defined in: spryte/dist/shader.d.ts:26

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. uv is in texture (atlas) space, so it isn't 0 to 1 across a sprite packed into an atlas: frameUv() gives the position inside the drawn frame instead, from (0, 0) at its top left to (1, 1) at its bottom right (since spryte 0.10; shapes get (0, 0)). Declare your own uniforms and set them with set(). Return premultiplied colour (rgb already multiplied by alpha).

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).

Properties

source

readonly source: string

Defined in: spryte/dist/shader.d.ts:27

Methods

set()

set(name, value): this

Defined in: spryte/dist/shader.d.ts:34

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

Parameters

name

string

value

UniformValue

Returns

this