Playground

Write GLSL on the left, watch it on the right. It recompiles while you type, and errors point at the line you are looking at. Nothing to install, nothing to sign up for — the link in your address bar always holds what is in the editor.

New to this? Start at lesson 1 and work down. Each one is short, changes one idea, and ends with something to try. You do not need to understand the whole file to change a number.

Always there

vec2 u_res — width and height in pixels
float u_time — seconds since start
vec2 u_mouse — 0..1 over the canvas, smoothed
vec4 color — what you write out

1 · Space

vec2 uvCentered()
vec2 uv01()
vec2 mouseCentered()

2 · Soft edges

float pixel(float d)
float softEdge(float d, float radius)
float circle(vec2 p, float radius)
float band(float d, float halfWidth)
float smin(float a, float b, float k)

3 · Colour

vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d)
vec3 palette(float t)
vec3 paletteNTR(float t)

4 · Frequency

float harmonic(float x, int octaves)

5 · Noise

float hash21(vec2 p)
float noise(vec2 p)
float fbm(vec2 p, int octaves)
float fbm(vec2 p)
vec2 warp(vec2 p, float amount, float scale)

6 · Symmetry

vec2 rot(vec2 p, float angle)
vec2 tile(vec2 p, float count)
vec2 mirror(vec2 p)
vec2 polar(vec2 p)
vec2 kaleido(vec2 p, float n)

7 · Light

float vignette(vec2 p, float radius, float softness)
float vignetteFrame(float strength)
float occlusion(float density, float strength)
vec3 fog(vec3 c, vec3 far, float distance, float density)

All of it lives in shader/lib.glsl and is prepended to every shader on this site.