Browser instrument

Shader playground

Compile and inspect a GLSL ES 3.00 fragment shader without sending its source anywhere.

With Live compile on, the source is rebuilt a moment after you stop typing. Every build limits source size, rejects obvious unbounded loops and renders one synchronized 256 × 256 frame first; if that frame is slow, animation is held until you press Play.

Seed 131

Loading…

Time 0.00 s

Fragment shaderGLSL ES 3.00

#version 300 es
precision highp float;

// Every work in the archive is one fragment shader like this one.
// Edit freely: with Live on, it recompiles when you pause typing.
uniform vec2 u_resolution;   // canvas size in pixels
uniform float u_time;        // seconds
uniform vec2 u_pointer;      // 0–1, eased; drifts by itself when idle
uniform vec3 u_click;        // xy = last press (0–1), z = seconds since that press
uniform float u_seed;        // change it with Reseed
out vec4 outColor;
// Need memory between frames? Declare `uniform sampler2D u_state;`
// and branch on `uniform int u_pass;` (see Coral Script).

void main() {
    float scale = min(u_resolution.x, u_resolution.y);
    vec2 uv = (2.0 * gl_FragCoord.xy - u_resolution) / scale;
    vec2 pointer = (2.0 * u_pointer - 1.0) * u_resolution / scale;
    vec2 press = (2.0 * u_click.xy - 1.0) * u_resolution / scale;

float radius = length(uv - 0.3 * pointer);
    float wave = 0.5 + 0.5 * cos(10.0 * radius - u_time * 1.5);
    float age = u_click.z;
    float ring = exp(-1.5 * age) * exp(-pow((length(uv - press) - age) * 8.0, 2.0));

float hue = fract(u_seed * 0.618034);
    vec3 ink = vec3(0.05, 0.07, 0.09);
    vec3 light = 0.55 + 0.45 * cos(6.28318 * (hue + vec3(0.0, 0.33, 0.67)));
    vec3 color = mix(ink, light, wave * smoothstep(1.2, 0.05, radius));
    color += 0.6 * ring;
    outColor = vec4(color, 1.0);
}

Live compile Animate

Export a loop Format Size Length Seamless

Keys outside the editor: F fullscreen · Space play or pause · R reseed