UV Coordinates

Task

Use the x component of the pixel's normalized coordinates as the red and the y component as the green when writing pixel's color.

As a result, you should notice that the intensity of the red color increases from left to right, and the intensity of the green color increases from bottom to top. In the upper right corner we get yellow color as a result of mixing green and red.

Theory

Imagine you're making a game or animation that runs on many devices - phones, tablets, computers, even TVs. Each screen has a different size:

- phone might be 1080×2400 pixels

- laptop might be 1920×1080 pixels

- 4K TV might be 3840×2160 pixels

If you try to draw something using exact pixel positions, it might look perfect on one screen but totally wrong on another. For example, a circle placed at pixel $(500, 500)$ might be in the center on a small screen, but way off to the side on a big one.

UV Coordinates

To fix this, we use UV coordinates - a way to describe positions on the screen using numbers between 0 and 1, no matter how big the screen is.

- bottom-left corner is $(0.0, 0.0)$

- top-right corner is $(1.0, 1.0)$

- center is $(0.5, 0.5)$

This makes it easier to tell the shader where things are, no matter how big the screen is.

Compute UV

To get the normalized coordinates of the current pixel, divide its position by the resolution of the screen.

GLSL:

vec2 uv = gl_FragCoord.xy / iResolution.xy;

HLSL:

float2 uv = input.position.xy / iResolution;