A Shader of Your Own
If you know the language graphics cards speak (GLSL), an effect is one function: the colour at one place of the picture.
const wave = shader(`
vec4 effect(vec2 uv) {
uv.x += 0.02 * sin(uv.y * 40.0 + time * speed);
return texture(picture, uv);
}`, { speed: 3 })
wave.speed = 6uv runs from (0, 0) at the top left to (1, 1) at the bottom right. texture(picture, uv) is the colour your scene drew there, so this effect moves each row of the picture sideways by a wave.
Settings
The settings you give are numbers the program can use by name. A shader is an effect like any other: its settings are read and set as properties, it has amount, off(), on() and remove(), and it takes its place in the order with the rest.
| Given as | It is |
|---|---|
speed: 3 | A number |
speed: [3, 0, 10] | A number with its range, for a dial |
tint: "gold" | A colour, which the program has as a vec3 |
on: true | True or false |
const wave = shader(`
vec4 effect(vec2 uv) {
vec4 c = texture(picture, uv);
return vec4(mix(c.rgb, tint, strength), c.a);
}`, { strength: [0.5, 0, 1], tint: "gold" })
dial("strength", wave, "strength")What the program is given
| Name | What it is |
|---|---|
picture | What this effect is given: texture(picture, uv) |
previous | What this effect made last frame, for feedback: texture(previous, uv) |
resolution, size | The picture's size in real pixels, and in the scene's points |
time, dt, frame | Seconds on the scene's clock, seconds since the last frame, frames so far |
amount | This effect's amount |
bass, mids, highs, loudness, pulse | The music, 0 to 1 |
spectrum, waveform | The sound as pictures: texture(spectrum, vec2(x, 0.5)).r is how much there is of each pitch, low at the left; waveform is the wave itself, with 0.5 for silence |
hash(p), noise(p), fbm(p), luma(c), turn(p, a), hueTurn(c, a), mirrored(uv), TAU | Small helpers: the same random numbers on every graphics card, smooth noise, brightness, turning a point and a colour |
A setting of your own may not take one of those names (the helpers apart).
Mistakes
A mistake is said with its line and the graphics card's own words:
Your shader has a mistake the graphics card will not accept:
line 3: 'sped' : undeclared identifier
A shader needs WebGL 2. A browser or a device without it says so.