Shader Lab — write GLSL, watch it break

GLITCH / SHADER LABWebGL2 GLSL Fragment Editor
✓ LIVE0fps|SEED:583234|
SIGNAL LOSSRGB corruption + scan tears33 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#version 300 es
precision highp float;
uniform float u_time;
uniform vec2 u_res;
uniform vec2 u_mouse;
out vec4 o;
float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453); }
void main() {
  vec2 uv = gl_FragCoord.xy / u_res;
  float t = u_time;
  // Scan tear
  float tear = step(0.98, hash(vec2(floor(uv.y * 60.0), floor(t * 8.0))));
  float shift = (hash(vec2(floor(uv.y * 40.0), floor(t * 12.0))) - 0.5) * 0.15 * tear;
  vec2 uvR = uv + vec2(shift + 0.003, 0.0);
  vec2 uvG = uv + vec2(shift, 0.0);
  vec2 uvB = uv + vec2(shift - 0.003, 0.0);
  // Base noise
  float nr = hash(uvR * 80.0 + t * 0.3);
  float ng = hash(uvG * 80.0 + t * 0.3 + 1.0);
  float nb = hash(uvB * 80.0 + t * 0.3 + 2.0);
  // Scanlines
  float scan = 0.85 + 0.15 * sin(uv.y * u_res.y * 1.5);
  // Glitch blocks
  float block = step(0.97, hash(vec2(floor(uv.y * 8.0), floor(t * 5.0))));
  float bshift = (hash(vec2(floor(t * 3.0), 7.0)) - 0.5) * 0.2 * block;
  float r = mix(nr * 0.15 + 0.05, 1.0, block * 0.7) * scan;
  float g = ng * 0.05 * scan;
  float b = mix(nb * 0.3 + 0.1, 0.8, block * 0.4) * scan;
  // Vignette
  vec2 vc = uv - 0.5;
  float vig = 1.0 - dot(vc, vc) * 1.8;
  o = vec4(r, g, b, 1.0) * vig;
}
AUTO UNIFORMS
float u_timevec2 u_resvec2 u_mousefloat u_seed
ARROWS move · SPACE glitch · ENTER next · 1-6 preset

the lab

A live GLSL fragment shader editor. The code runs on your GPU, right now, every frame. Edit a number and the output changes instantly. Break the syntax and the screen goes dark. There is no undo.

The presets are starting points, not destinations. SIGNAL LOSS gives you scan tears and RGB corruption. PLASMA FIELD gives you interference waves. FRACTAL VOID gives you Mandelbrot iteration. But the real material is the code itself — gl_FragCoord, u_time, u_mouse, and whatever math you can fit between void main() and the closing brace.

Every pixel on screen is the output of a function you wrote. The GPU runs that function millions of times per frame, once per pixel, in parallel. The language is GLSL ES 3.0 — typed, strict, compiled. No runtime errors. Either it compiles and runs, or it doesn't compile at all.

Start with a preset. Change a constant. Replace sin with cos. Multiply u_time by 10. See what happens. The fastest way to learn shaders is to break someone else's and watch what changes.

presets

SIGNAL LOSS

RGB corruption, scan tears, glitch blocks. The classic.

PLASMA FIELD

Interference waves. Additive sin functions at different frequencies.

FRACTAL VOID

Mandelbrot set with mouse-controlled zoom and iteration count.

REACTION DIFF

Gray-Scott reaction-diffusion approximation. Feed and kill parameters.

VOID PULSE

SDF circles with distance-field feedback and temporal glow.

PIXEL SORT

Simulated brightness-threshold pixel sorting with scan direction.

controls

Tab indent code

1-6 load preset

Ctrl+Enter recompile

mouse position maps to u_mouse

available uniforms

uniform	type	description
u_time	float	seconds since page load
u_res	vec2	canvas resolution in pixels
u_mouse	vec2	normalized mouse position (0-1)