home/ atoms/ uv-as-rgb

Mapping UV coordinates directly to RGB channels visualizes the coordinate space as a gradient

A classic shader debugging technique is setting gl_FragColor = vec4(st.x, st.y, 0.0, 1.0): the red channel increases left-to-right (X) and the green channel increases bottom-to-top (Y), producing a gradient that makes the UV space immediately visible. The Book of Shaders default template demonstrates this with color = vec3(st.x, st.y, abs(sin(u_time))) — adding animated blue via a time-driven sine. This pattern serves double duty: it teaches learners how coordinates map to color, and it provides a visual sanity-check that uniforms and normalization are wired correctly.

Examples

In the thebookofshaders.com editor, the default shader shows bottom-left as black (both coords zero), bottom-right as red (X=1, Y=0), top-left as green (X=0, Y=1), and top-right as yellow (both=1), with blue pulsing over time.

Assessment

Predict the color at each corner of the canvas when gl_FragColor = vec4(st.x, st.y, 0.0, 1.0) is used. Then add a time-varying blue channel that completes a full cycle every 2 seconds.

“color \= vec3(st.x,st.y,abs(sin(u time)));”
corpus · the-book-of-shaders-live-glsl-editor · chunk 1