home/ atoms/ uv-normalization-clip-space

Normalizing UV coordinates to clip space (−1 to 1, aspect-ratio-corrected) makes shaders independent of canvas resolution

Raw fragCoord values range from 0 to canvas width/height in pixels, making shader behavior dependent on render resolution. The standard fix is to normalize: divide fragCoord by iResolution.xy to get 0–1 range, subtract 0.5 to center, then multiply by 2 to reach −1 to 1. A further correction multiplies the x component by the aspect ratio (iResolution.x / iResolution.y) to prevent horizontal stretching on non-square canvases. All in one line: vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y. This is the canonical opening move of virtually every shader art piece and must become automatic.

Examples

vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
// uv.x ranges from -aspect to +aspect
// uv.y ranges from -1 to +1
// origin (0,0) is center of canvas

Assessment

Without running code, predict what uv.xy contains for a pixel at the top-right corner of a 1600x900 canvas after applying the normalization above. Then implement the normalization and display uv.x in the red channel and uv.y in the green channel.

“UV which will contain our transformed pixel coordinates the first step is to normalize frag cord so that its components range from 0 to 1”
corpus · kishimisu-an-introduction-to-shader-art-coding-video · chunk 1