GLSL Shader Playground

How to use the shader editor

1. Pick an example from Load an example… or edit image.frag. Write a function mainImage that sets fragColor for each pixel.
2. Use iResolution for the picture size, iTime for seconds since the start, and iMouse for where you click and drag on the picture.
3. Read the compiler messages under the picture. Each one names your file and line; click one to jump to it.
4. Use Pause, Restart and Save PNG under the picture.
5. Put shared functions in common.glsl and pull them in with #include "common.glsl".

Good to know

This editor runs one shader, in the style of Shadertoy's image pass: no textures, sound or extra buffers. It needs a browser and device that support WebGL2. If a shader is too slow for your device, the page pauses it and says so. For web page effects without shaders, try the CSS Effects Generator.

The first example turns the position of every pixel into a colour that changes over time:

// Shadertoy style: write mainImage, the page calls it for every pixel.
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = fragCoord / iResolution.xy;
  vec3 col = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0.0, 2.0, 4.0));
  fragColor = vec4(col, 1.0);
}

Result: a smooth gradient that drifts through colours. If you remove the ; after vec2 uv = fragCoord / iResolution.xy, the message says what is wrong and on which line.

• Writing float x = 1; instead of 1.0: GLSL does not convert whole numbers to decimals for you.
• Dividing by iResolution instead of iResolution.xy or iResolution.y.
• Forgetting to set fragColor: the picture stays black.
• Very long loops: a shader that runs too slowly makes the picture stutter and is paused.