A GLSL fragment shader is a function that maps each pixel's (x,y) coordinate to an output RGB color, run in parallel for every pixel

In GLSL, the fragment shader’s main function receives the current pixel’s position (fragCoord, a vec2) and must output a color (fragColor, a vec4 with red, green, blue, and alpha channels). This function runs simultaneously on the GPU for every pixel on the canvas — potentially millions of pixels per frame. Because each pixel’s color is computed independently using the same code, the function must be stateless and deterministic given its inputs. The alpha channel (transparency) is typically set to 1 and ignored in Shadertoy. The output color is normalized to the 0–1 range, not 0–255. This architecture is what makes shaders so fast and enables real-time animation.

Examples

In Shadertoy: set fragColor = vec4(1.0, 0.0, 0.0, 1.0) → whole canvas turns red (constant function). Set fragColor.r = fragCoord.x / iResolution.x → red gradient from left to right (position-dependent function).

Assessment

Predict what color the canvas displays when fragColor = vec4(0.5, 0.5, 0.5, 1.0). Then write a GLSL fragment shader that displays a gradient going from black (left) to blue (right).