Understanding UV Coordinates in GLSL

Introduction

UV coordinates are one of the most important concepts in shader programming.

Almost every GLSL shader relies on UV coordinates for positioning, animation, textures, distortion, procedural patterns, and screen-space effects.

Once the concept clicks, you begin to see how shaders build entire visual worlds mathematically.

What Are UV Coordinates?

UV coordinates are normalized coordinate values used to describe positions across a surface or screen.

Instead of using pixel positions like 1920 × 1080, UV coordinates typically range from 0.0 → 1.0.

Why Are They Called “UV”?

In graphics programming, X and Y are often used for geometry positions, so texture and surface coordinates traditionally use U and V.

Basic UV Setup

One of the most common lines in GLSL converts pixel coordinates into normalized UV space.

vec2 uv = fragCoord.xy / iResolution.xy;

After normalization:

• left edge = 0.0
• right edge = 1.0
• bottom = 0.0
• top = 1.0

Visualizing UV Space

Imagine the screen as a coordinate grid.

UV space allows shaders to work consistently regardless of screen resolution.

Simple UV Gradient Example

Here is one of the most common beginner shaders.

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = fragCoord.xy / iResolution.xy;

    fragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}

This creates:

• red increasing horizontally
• green increasing vertically
• blue remaining constant

The result is a smooth screen-space gradient.

Centering UV Coordinates

Many shaders work better when UV space is centered around zero.

vec2 uv = fragCoord.xy / iResolution.xy;
uv = uv * 2.0 - 1.0;

Now:

• center = (0,0)
• left = -1
• right = +1
• bottom = -1
• top = +1

Aspect Ratio Correction

Without correction, circles and radial effects may appear stretched on widescreen displays.

uv.x *= iResolution.x / iResolution.y;

This compensates for non-square screen dimensions.

UV Coordinates and Textures

UV coordinates are heavily used for texture sampling.

vec3 col = texture(iChannel0, uv).rgb;

The texture is sampled using UV coordinates, allowing images, video, feedback buffers, noise textures, and procedural textures to map across the screen.

UV Distortion

One of the most powerful shader techniques is UV distortion.

Instead of sampling textures normally, you modify the UV coordinates first.

uv.y += sin(uv.x * 10.0 + iTime) * 0.05;

This creates waves, ripples, liquid motion, and psychedelic distortion.

Repeating Patterns With UVs

Using functions like fract(), mod(), and floor(), you can tile patterns infinitely.

vec2 gv = fract(uv * 10.0);

This divides UV space into repeating cells.

Polar Coordinates

UV coordinates can also be converted into angle and distance.

float angle = atan(uv.y, uv.x);
float dist = length(uv);

This enables spirals, tunnels, radial patterns, kaleidoscopes, vortex effects, and many procedural visual systems.

Animation Using UVs

UV coordinates become especially powerful when combined with time.

uv.x += iTime * 0.2;

This scrolls the UVs horizontally.

Techniques like this are used for flowing textures, moving backgrounds, tunnels, starfields, and procedural motion.

UV Coordinates in Audio Reactive Shaders

Audio reactive shaders often distort UV coordinates using music data.

float bass = texture(syn_Spectrum, 0.05).g;

uv += sin(uv.yx * 8.0 + iTime) * bass * 0.05;

This causes the screen to pulse and distort with bass frequencies.

Why UV Coordinates Matter So Much

UV coordinates are the foundation of screen-space rendering, procedural graphics, texture mapping, distortion, raymarching, post-processing, and generative animation.

Common Beginner Mistakes

Continue Learning