Dividing gl_FragCoord by u_resolution maps pixel coordinates to the [0,1] UV range

Every GLSL fragment shader receives gl_FragCoord.xy — the current fragment’s position in pixels from the bottom-left corner of the canvas. Raw pixel values depend on the canvas size, so the first step in almost every shader is normalizing them: vec2 st = gl_FragCoord.xy / u_resolution.xy;. This produces a UV coordinate where (0,0) is bottom-left and (1,1) is top-right, regardless of canvas dimensions. Subsequent calculations (distance fields, patterns, gradients) are then written in this resolution-independent space. Skipping normalization means the shader output changes appearance when the canvas is resized.

Examples

After normalization, st.x is 0.0 at the left edge and 1.0 at the right edge. Set gl_FragColor = vec4(st.x, 0.0, 0.0, 1.0) to see a red gradient that confirms the normalization.

Assessment

Write the one-line normalization from gl_FragCoord to st in a fragment shader. Then explain what st.x equals at the left edge, center, and right edge of the canvas.