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

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

## 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`](../type-aliases/UniformValue.md)

#### Returns

`this`