Shader playground

What you are looking at

A fragment shader: a small program that runs once for every pixel, every frame, and returns that pixel’s colour. The source is on the left.The source is under the Source tab. Change it.

The list holds 6 to start from:

• Constellation White diamonds drifting up a black field, with thin lines joining the ones that are close.
• Hello sphere One sphere with a light circling it. The shortest shader here, and the one to start changing.
• Mandelbulb A bone-coloured fractal solid with copper in its creases, slowly changing shape. Drag to orbit it.
• City Pale towers on a dark plain, lit from low on one side and fading into haze. Drag to orbit.
• Waves Ripples spreading from three points and crossing. Press to move two of the points.
• Ink Marbled ink with a sheen of colour, whirling around the pointer. A drawing of a liquid, not a simulation.

How it works

Every shader here defines one function, mainImage(out vec4 fragColor, in vec2 fragCoord). It is handed fragCoord, the pixel’s position counted in pixels from the bottom left corner, and writes that pixel’s colour to fragColor. The page adds a few lines above your text to declare the inputs and a few below to call mainImage, then gives the whole to your graphics card’s compiler.

Four inputs are always there. iResolution is the size of the canvas in pixels, iTime is the seconds the shader has been running, iFrame counts the frames drawn, and iMouse is the pointer: xy is where it is while pressed and zw is where the press began. These are the names Shadertoy uses, so a shader pasted from there runs here as long as it is a single pass and reads no textures.

A uniform followed by a comment becomes a control. uniform float drift; // @slider 0 2 0.4 makes a slider from 0 to 2 that starts at 0.4. // @color 0.82 0.82 0.82 after a vec3 makes a colour picker, and // @toggle false after a bool makes a switch. A uniform without such a comment gets no control.

The page compiles 150 ms after you stop typing. If the compiler rejects the text, its message appears under the editor, the line it names is underlined, and the canvas goes on running the last version that compiled.

Copy link compresses the source and puts it in the address, after the #. Nothing is sent to a server: the link is the shader. A link holds up to 8 KB once compressed.

Source

• src/components/demo/shader/ShaderPlayground.tsx
• src/components/demo/shader/Editor.tsx
• src/components/demo/shader/FluidSim.ts
• src/lib/shader-source.ts
• src/shaders/constellation.glsl
• src/shaders/hello-sphere.glsl
• src/shaders/mandelbulb.glsl
• src/shaders/city.glsl
• src/shaders/waves.glsl
• src/shaders/ink.glsl
• src/shaders/fluid-display.glsl