WebGL Shader Playground

WebGL is a JavaScript API that renders interactive 2D and 3D graphics in the browser using the GPU, with no plugins. GLSL (OpenGL Shading Language) is the C-like language used to write shaders — programs that run directly on the GPU for every pixel. Fragment shaders run for each pixel and output a color (gl_FragColor). They're used for procedural graphics, post-processing effects, generative art, and game rendering.

Three uniforms are automatically provided: u_time (float) is the seconds elapsed since the page loaded — use it to animate values over time. u_resolution (vec2) is the canvas width and height in pixels — divide gl_FragCoord.xy by u_resolution to get normalized UV coordinates (0 to 1). u_mouse (vec2) is the mouse position in pixels with (0,0) at the bottom-left — move your mouse over the canvas to interact.

gl_FragCoord.xy gives the current pixel position in pixels. Divide by u_resolution to normalize: vec2 uv = gl_FragCoord.xy / u_resolution; — this gives (0,0) at bottom-left and (1,1) at top-right. To center the origin ((-0.5 to 0.5) or similar for non-square canvases): vec2 uv = (gl_FragCoord.xy - u_resolution * 0.5) / u_resolution.y; This is the pattern used by Shadertoy and most shader examples.

Shadertoy uses a slightly different coordinate system: iResolution, iTime, and iMouse instead of u_resolution, u_time, and u_mouse. Shadertoy's origin (0,0) is at the bottom-left matching WebGL's default. To port a Shadertoy shader: replace iResolution with u_resolution, iTime with u_time, iMouse.xy with u_mouse. Shadertoy also uses mainImage(out vec4 fragColor, in vec2 fragCoord) — replace this with void main() { ... gl_FragColor = ...; }.

This sets the floating-point precision for the fragment shader. mediump (medium precision) is required on mobile GPUs and some embedded systems where highp (high precision) isn't always available. For most visual effects, mediump is sufficient. If you need very precise calculations (e.g. large coordinate values, deep zoom), use highp. Always declare precision at the top of your fragment shader — it's required by the GLSL ES spec.

To use an image texture, upload it as a WebGL texture: const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.generateMipmap(gl.TEXTURE_2D); In your fragment shader, add: uniform sampler2D u_texture; then sample it with: vec4 color = texture2D(u_texture, uv); WebGL requires images to be served from the same origin (CORS) or loaded via a blob URL.