BLOKS Labs / Live GLSL Editor

Write, Compile, and Explore Fragment Shaders in the Browser

The BLOKS Live GLSL Editor is an experimental shader workspace for writing fragment shaders, testing realtime uniforms, and exploring procedural graphics directly inside BLOKS Labs.

GLSL
Live Compile
Pointer Input
WebGL

Open Editor
Shader Viewer Labs

Experimental Shader Workspace

Live Fragment Shader Editor

Edit the GLSL code, press Compile Shader, or use Ctrl + Enter to rebuild the preview. The editor currently supports core BLOKS timing, resolution, and pointer uniforms.

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord.xy / iResolution.xy;
    vec2 p = uv * 2.0 - 1.0;
    p.x *= uAspect;

    vec2 m = uPointer * 2.0 - 1.0;
    m.x *= uAspect;

    float d = length(p - m);
    float t = iTime;

    float rings = sin(d * 38.0 - t * 6.0);
    rings = smoothstep(0.25, 1.0, rings * 0.5 + 0.5);
    rings *= exp(-d * 2.5);

    vec3 bg = vec3(0.006, 0.01, 0.035);
    vec3 blue = vec3(0.05, 0.25, 1.0);
    vec3 cyan = vec3(0.20, 0.85, 1.0);

    vec3 col = bg;
    col += blue * rings;
    col += cyan * (0.018 / max(d, 0.018)) * 0.18;

    col = pow(max(col, 0.0), vec3(0.88));

    fragColor = vec4(col, 1.0);
}

Write GLSL

Start with a fragment shader function, modify the code, and compile changes directly in the browser.

Interact Live

Use pointer position, click state, drag motion, time, resolution, and aspect ratio as shader inputs.

Experiment Fast

Test ideas, break things safely, read compile errors, and iterate without leaving the Labs environment.

Supported Editor Uniforms

Realtime Inputs Available in the Editor

The first version of the editor exposes the core BLOKS runtime uniforms used by most single-pass fragment shaders.

uniform vec2 iResolution;
uniform float iTime;
uniform vec4 iMouse;

uniform float uFrame;
uniform float uDeltaTime;
uniform float uAspect;
uniform float uPixelRatio;

uniform vec2 uPointer;
uniform vec2 uPointerDelta;
uniform float uPointerDown;

Audio, feedback, multipass buffers, shader examples, and save/export tools can be added as the editor evolves.