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

Write GLSL with live WebGL2 rendering, Shadertoy uniforms, inline errors and an FPS counter — export Three.js, R3F or standalone HTML, record WebM. GLSL Shader Art & Visual FX Playground runs in the browser on DevTools. There is no signup, and your input stays on this device unless the tool explicitly performs a live network lookup.

What this tool does not do

GLSL Shader Art & Visual FX Playground is a free in-browser utility, not a hosted API. It does not keep server-side history and is not a substitute for production verification in your own stack.

How do I use this tool?

How do I use GLSL Shader Art & Visual FX Playground?
Open GLSL Shader Art & Visual FX Playground, enter or paste your input, and copy the result. The page works without an account.

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.

.env Secret Safety Linter

Validate .env syntax and spot likely leaked credentials or placeholder secrets.

.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.

AI Function Calling Schema Generator

Generate function calling JSON schemas from TypeScript interfaces

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.

Ansible Playbook Generator

Build an Ansible playbook — hosts, vars, and tasks with modules — as YAML

<!DOCTYPE html>  <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>