home/ atoms/ glsl-aspect-ratio-correction

Multiplying st.x by width/height corrects the UV space for non-square canvases

After normalizing gl_FragCoord to [0,1] UV space, the canvas is treated as square. On a wide canvas (e.g. 800×400), a circle drawn in UV space appears as an ellipse because X spans more pixels than Y. The fix is to rescale X by the aspect ratio: st.x *= u_resolution.x / u_resolution.y;. Now the X range extends beyond 1.0 for wide canvases, restoring Euclidean proportions so circles appear circular. This one-line correction is standard practice in any shader that draws symmetric shapes or uses distance functions.

Examples

Without correction, length(st - 0.5) on a 2:1 canvas produces an oval. After st.x *= 2.0 (for a 2:1 canvas), the same distance function produces a circle.

Assessment

Explain why a circle drawn in normalized UV space looks elliptical on a 16:9 canvas. Write the line that corrects it and describe what it does to the range of st.x.

“st.x \*= u resolution.x/u resolution.y;”
corpus · the-book-of-shaders-live-glsl-editor · chunk 1