Shader Lab: Stack, Animate, and Export GPU Shaders in the Browser

Shader Lab is like Photoshop's layers panel that aims to be a render engine. You stack media, gradients, text, and custom shader passes, then pile effects on top until something interesting falls out the bottom. The headline trick is the CRT layer, and it doesn't just paint scanlines over your scene. It models a slot-mask monitor from the inside: barrel distortion bowing the corners, phosphor persistence smearing motion into ghosts, convergence nudging the color channels a hair out of register, a little flicker and glitch to remind you the tube is old and tired.

Under the hood it's TSL, Three's Shading Language, so a shader is a function wrapped in Fn() that returns a node graph instead of hand-rolled GLSL or WGSL. The neat part is the custom shader layer: the editor compiles your TypeScript, strips the imports, and evaluates it in a sandbox with the whole toolbox pre-injected as globals. The runtime wants WebGPU, but the output is canvas-backed, which means an exported composition drops straight into React, wraps a spinning sphere as a texture, or runs as post over your own scene. It's open source, so the obvious move is to go poke around the repo.