Can I paste shaders straight from Shadertoy?

Yes, in almost all cases. The playground injects the same uniform header Shadertoy provides — iResolution, iTime, iTimeDelta, iFrame, iMouse and iChannel0..3 — and accepts the `void mainImage(out vec4, in vec2)` entry point. Features Shadertoy adds outside the core contract (multi-pass buffers, keyboard input, cube textures on channels) won't light up, but single-pass image shaders generally run unmodified.

How do compile errors find my line numbers?

The engine prepends a uniform header above your code, so the GPU reports errors at header-offset positions. The playground parses the info log, subtracts the header length, and highlights the remapped line in the editor. The same validation runs even in the Canvas2D fallback, so broken sources still get flagged without a GPU.

Why did my FPS drop after one small edit?

Fragment cost scales with pixels × complexity. The usual suspects: an extra loop iteration count, a texture fetch inside a loop, branching that defeats GPU parallelism, or trig functions in hot paths. Cap raymarch steps, hoist invariants out of loops, and prefer algebraic forms (mad, inversesqrt) where you can. The FPS counter is there precisely so you feel the cost as you type.

What does the WebM recording capture?

Exactly what the canvas shows — the MediaRecorder taps the canvas stream at 30fps, so animations, iMouse interaction and all. Set the seconds, hit Record WebM, interact with the canvas while it runs, and the file downloads when time is up. VP9 is preferred where the browser supports it.

Are the exports production-ready?

The Three.js and R3F exports are idiomatic starting points: correct uniform wiring, resize handling in the R3F case, and the shader inlined. The standalone HTML is a complete zero-dependency page. All three intentionally keep the shader as-authored rather than minifying, so you can keep iterating after the export.

Why is there a plasma fallback instead of WebGPU everywhere?

WebGL2 runs everywhere that matters today; WebGPU is still partial on Safari and Firefox. The PRD keeps WebGL2 as the default path with a Canvas2D fallback for GPU-less environments, and reserves WebGPU for an experimental toggle rather than the main render path — stability over novelty.

How do iChannel textures work?

Channels are sampler2D slots the playground binds when connected (the audio preset consumes a 256×1 FFT strip on iChannel0). Without a bound texture the samplers still exist, which is why presets are written to degrade gracefully — the audio visualizer falls back to an idle sine wave when no FFT is attached.

Is anything uploaded anywhere?

No. Compilation happens in your GPU, exports are generated in your tab, recordings stay local, and the only persistence is your own saved shader in localStorage. The tool works offline once loaded.

GLSL Shader Art & Visual FX Playground

Write GLSL with live WebGL2 rendering, Shadertoy uniforms, inline compile errors and an FPS counter — then export to Three.js, React Three Fiber or a standalone HTML page.

Render0 FPScompiled

Records

Initializing renderer…

Fragment shader (GLSL ES 3.0)

Write void mainImage(out vec4, in vec2) Shadertoy-style (iResolution, iTime, iTimeDelta, iFrame, iMouse, iChannel0..3 are provided) or a raw void main(). Edits recompile instantly.

Export

<!DOCTYPE html>
<!-- Generated by DevTools GLSL Playground — single-file vanilla WebGL2 -->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shader</title>
<style>html, body { margin: 0; height: 100%; background: #000; } canvas { display: block; width: 100vw; height: 100vh; }</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById("c");
const gl = canvas.getContext("webgl2");
const vs = "#version 300 es\nin vec2 p; void main() { gl_Position = vec4(p, 0.0, 1.0); }";
const fs = `#version 300 es
precision highp float;
uniform vec2 iResolution;
uniform float iTime;
uniform float iTimeDelta;
uniform int iFrame;
uniform vec4 iMouse;
out vec4 outColor;
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = fragCoord / iResolution.xy;
  float v = sin(uv.x * 10.0 + iTime)
          + sin((uv.y * 8.0 - iTime * 0.7))
          + sin((uv.x + uv.y) * 6.0 + iTime * 1.3)
          + sin(length(uv - 0.5) * 18.0 - iTime);
  vec3 col = 0.5 + 0.5 * cos(v + vec3(0.0, 2.1, 4.2));
  fragColor = vec4(col, 1.0);
}
void main() { vec4 c; mainImage(c, gl_FragCoord.xy); outColor = c; }
`;
function compile(type, src) {
  const s = gl.createShader(type);
  gl.shaderSource(s, src);
  gl.compileShader(s);
  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
  return s;
}
const prog = gl.createProgram();
gl.attachShader(prog, compile(gl.VERTEX_SHADER, vs + "\nattribute vec2 p;"));
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, fs));
gl.linkProgram(prog);
gl.useProgram(prog);
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
const loc = gl.getAttribLocation(prog, "p");
gl.enableVertexAttribArray(loc);
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
const u = (n) => gl.getUniformLocation(prog, n);
let mouse = [0, 0, 0, 0];
addEventListener("pointerdown", (e) => { mouse[2] = 1; move(e); });
addEventListener("pointerup", () => { mouse[2] = 0; });
addEventListener("pointermove", move);
function move(e) { if (mouse[2]) { mouse[0] = e.clientX; mouse[1] = canvas.height - e.clientY; } }
let last = performance.now(), t0 = last, frame = 0;
function loop(now) {
  const w = (canvas.width = innerWidth * devicePixelRatio);
  const h = (canvas.height = innerHeight * devicePixelRatio);
  gl.viewport(0, 0, w, h);
  gl.uniform2f(u("iResolution"), w, h);
  gl.uniform1f(u("iTime"), (now - t0) / 1000);
  gl.uniform1f(u("iTimeDelta"), (now - last) / 1000);
  gl.uniform1i(u("iFrame"), frame++);
  gl.uniform4f(u("iMouse"), mouse[0], mouse[1], mouse[2], mouse[3]);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  last = now;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>
</body>
</html>

Effect gallery

Raymarching

Procedural Noise

Visual FX

Classic

The audio visualizer reads an FFT strip from iChannel0 — connect it to a playing synth tab for full effect (falls back to an idle wave).

Uniforms reference

vec2 iResolution — canvas size (px)
float iTime — seconds since start
float iTimeDelta — frame delta
int iFrame — frame counter
vec4 iMouse — x, y, down, clicked
sampler2D iChannel0..3 — textures

About this tool

The GLSL Playground is a live fragment-shader laboratory built on WebGL2. Every keystroke recompiles your shader; compiler errors are parsed and mapped back from the injected uniform header to your line numbers, then highlighted directly in the CodeMirror editor (lazy-loaded, so it never bloats the page). A live FPS counter sits next to the render so performance regressions — one loop too many, one branch too deep — show up the moment you type them.

The Shadertoy uniform contract is honored in full: iResolution, iTime, iTimeDelta, iFrame, iMouse (drag the canvas to feed it) and four sampler channels iChannel0..3. Write the familiar `void mainImage(out vec4, in vec2)` signature and the playground wraps it into a real fragment shader; write a raw `void main()` and it passes through untouched.

The gallery covers the genres the PRD names: raymarched primitives (sphere with soft checker floor, rotating torus, a six-iteration Mandelbulb), procedural noise (animated Voronoi cells with glowing borders, five-octave FBM fog), and visual FX (synthwave cyberpunk grid, the classic plasma, matrix rain with per-column speeds, and a neon audio visualizer that reads an FFT strip from iChannel0 — feed it from the synth studio in another tab, or let it idle on a gentle wave).

When you're happy with a look, take it anywhere: export as a Three.js ShaderMaterial setup, a React Three Fiber component (fully typed, useFrame-driven), a standalone single-file WebGL2 HTML page that runs anywhere with zero dependencies, or just the raw GLSL. The canvas also records straight to WebM video via MediaRecorder — perfect for landing-page backgrounds you want to preview in motion.

Where WebGL2 is unavailable (old browsers, locked-down GPUs, headless tests), a Canvas2D plasma fallback keeps the page alive and the source still gets validated, so broken shaders surface errors even without a GPU. All rendering is local; nothing is uploaded.

How to use

Pick a preset
Start from the gallery — Raymarching, Procedural Noise, Visual FX or Classic — or paste your own Shadertoy code.
Edit live
Type in the editor; every change recompiles instantly. Errors appear under the canvas with line numbers, highlighted in the editor.
Drive it with input
Drag on the canvas to feed iMouse; time flows automatically through iTime, iTimeDelta and iFrame.
Check performance
Watch the FPS counter as you edit — it's your free performance profiler.
Record or export
Record the canvas as WebM, or export Three.js, R3F, standalone HTML or plain GLSL from the export panel.

Use cases

Prototyping site visuals

Iterate hero backgrounds and section effects with instant feedback, then export the exact code your stack needs — Three.js, R3F or vanilla.

Learning shader programming

The gallery presets progress from plasma to raymarching; live errors and the FPS counter teach both correctness and cost.

Creative coding practice

Daily-shader exercise in a tab: no toolchain, no build step, Shadertoy muscle memory fully transferable.

Producing motion assets

Record the canvas to WebM for mockups, demos and social clips without any screen-recording software.

Common mistakes

Mistake:Declaring uniforms the header already declares

Fix:iResolution/iTime/etc. are injected above your code — redeclaring them is a redefinition error; just use them.

Mistake:Testing performance at the wrong resolution

Fix:The canvas respects devicePixelRatio (capped at 2); a 4K monitor renders 4× the pixels of 1080p, so compare FPS at the same window size.

Mistake:Unbounded raymarch loops

Fix:Always cap step count and total distance (`if (d < eps || t > maxT) break;`) — an unbounded loop compiles but freezes the tab.

Mistake:Expecting identical float results everywhere

Fix:GLSL precision varies by GPU/driver (highp is requested but mobile may differ); guard against NaN with max()/clamp() on critical paths.

Frequently asked questions

Your Font Has Axes: A Field Guide to Variable Fonts and OpenType Features

One font file, infinite weights. How the fvar and gvar tables actually work, why a font inspector can show you the axes but not animate between them, and the metric-override trick that kills fallback-font layout shift.

Symmetry, Dithering and the Sprite Sheet: A Pixel Artist's Toolkit

Why PICO-8 has exactly 16 colors, how a Bayer matrix fakes a gradient with none, and what actually happens when you export a walk cycle to Pixi, Phaser or Godot.

Stable Fluids: Why Smoke Simulators Never Blow Up

Semi-Lagrangian advection, pressure projection and vorticity confinement — the three tricks from Jos Stam's 1999 paper that made real-time fluid simulation unconditionally stable, explained by playing with them.

One Pixel at a Time: Thinking in Fragment Shaders

Fragment shaders invert everything procedural programmers know: no objects, no loops over data — just one function evaluated half a million times per frame. The mental models that make GLSL finally click, from plasma to raymarching.

References & standards

.htaccess Generator

Build an Apache .htaccess — HTTPS redirects, rewrites, error pages, security headers, and basic auth

2D Fluid Dynamics & Particle Physics Sandbox

A physics playground with two engines sharing one canvas. The fluid mode runs a real Eulerian Navier-Stokes solver — semi-Lagrangian advection, explicit diffusion, Jacobi pressure projection and vorticity confinement — that you paint with dye and velocity using mouse or touch. The particle mode is a damped Verlet N-body engine with gravity wells, Coulomb attractors and repulsors, spring links, wall restitution and elastic circle collisions. Particle counts adapt to the device (100k target on WebGL2 desktop, 2k-5k on CPU fallback), and every configuration exports as runnable code: a Matter.js world, a PixiJS ticker setup, or a standalone vanilla Canvas engine.

Algorithm Arena & Data Structure Visualizer

Interactive arena for algorithms and data structures: eight sorting algorithms racing on one seeded input, six pathfinding algorithms walking generated mazes, and BST, AVL, Red-Black, B-tree, heap and trie operations replayed step by step with rotations highlighted. Every run shows the Big-O table and the phase-highlighted reference implementation in four languages, and compared values can be played as pitch (sonification) through the shared audio engine. Everything runs client-side; inputs never leave the browser.

GLSL Shader Art & Visual FX Playground

About this tool

How to use

Pick a preset

Edit live

Drive it with input

Check performance

Record or export

Use cases

Prototyping site visuals

Learning shader programming

Creative coding practice

Producing motion assets

Common mistakes

Frequently asked questions

Your Font Has Axes: A Field Guide to Variable Fonts and OpenType Features

Symmetry, Dithering and the Sprite Sheet: A Pixel Artist's Toolkit

Stable Fluids: Why Smoke Simulators Never Blow Up

One Pixel at a Time: Thinking in Fragment Shaders

References & standards

.htaccess Generator

2D Fluid Dynamics & Particle Physics Sandbox

Algorithm Arena & Data Structure Visualizer

Ansible Playbook Generator

Apache Config Generator

AWS Architecture Diagram

GLSL Shader Art & Visual FX Playground

About this tool

How to use

Pick a preset

Edit live

Drive it with input

Check performance

Record or export

Use cases

Prototyping site visuals

Learning shader programming

Creative coding practice

Producing motion assets

Common mistakes

Frequently asked questions

Can I paste shaders straight from Shadertoy?

How do compile errors find my line numbers?

Why did my FPS drop after one small edit?

What does the WebM recording capture?

Are the exports production-ready?

Why is there a plasma fallback instead of WebGPU everywhere?

How do iChannel textures work?

Is anything uploaded anywhere?

Related guides

Your Font Has Axes: A Field Guide to Variable Fonts and OpenType Features

Symmetry, Dithering and the Sprite Sheet: A Pixel Artist's Toolkit

Stable Fluids: Why Smoke Simulators Never Blow Up

One Pixel at a Time: Thinking in Fragment Shaders

References & standards

Related tools

.htaccess Generator

2D Fluid Dynamics & Particle Physics Sandbox

Algorithm Arena & Data Structure Visualizer

Ansible Playbook Generator

Apache Config Generator

AWS Architecture Diagram