Understanding UV in GLSL: The Key to Mapping Space in Shaders

12 days ago

UV coordinates are one of the most fundamental ideas in GLSL, yet they are often misunderstood when you first start working with shaders. At their core, UVs are simply a way to describe position inside a visual space.

In GLSL, a UV is a 2D coordinate usually stored as a vec2. It represents where the current pixel is located on a surface, normalized into a range between 0 and 1.

This means:

(0, 0) is the bottom-left corner
(1, 0) is the bottom-right corner
(0, 1) is the top-left corner
(1, 1) is the top-right corner

Everything in between is just interpolation.

What UV actually represents

Think of UV as a way to answer a simple question:

Where am I on this image or surface?

Without UVs, a fragment shader has no awareness of position. It only knows it is drawing a pixel. UV gives that pixel context.

Once you have position, you can start doing interesting things like gradients, textures, distortion, procedural shapes, and audio reactive motion.

How UV appears in GLSL

In most shader setups, UV is passed from the vertex shader to the fragment shader.

A simplified version looks like this:

// Vertex Shader
out vec2 vUv;

void main() {
    vUv = uv;
}

// Fragment Shader
in vec2 vUv;

Now every pixel knows its location through vUv.

Seeing UV in action

One of the best ways to understand UV is to visualize it directly.

void main() {
    gl_FragColor = vec4(vUv, 0.0, 1.0);
}

This creates a gradient where:

Red increases from left to right
Green increases from bottom to top

What you are seeing is not a texture or effect — it is the coordinate system itself.

UV as a hidden coordinate system

UV is essentially a normalized grid that exists across your entire surface. Once you understand this, you start seeing everything differently.

A shader is no longer just drawing colors. It is operating inside a space defined by UV coordinates.

This is why UV becomes the foundation for:

textures
noise functions
distortion effects
feedback systems
audio visualizers

Common UV transformations

Once you have UV, you can reshape it to create entirely new behaviors.

Centering UV

vec2 uv = vUv - 0.5;

Now the center becomes (0, 0), making it easier to build radial patterns and symmetrical shapes.

Aspect correction

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

This prevents stretching and keeps shapes proportional across different screen sizes.

Tiling UV

uv = fract(uv * 3.0);

This repeats the space, creating grid-like patterns.

Polar coordinates

vec2 uv = vUv - 0.5;

float r = length(uv);
float a = atan(uv.y, uv.x);

This converts the UV space into circular coordinates, often used in audio-reactive and radial visualizers.

Why UV matters in visual systems

Once you move into generative visuals, UV becomes more than just a coordinate. It becomes the canvas for logic.

Every effect you see in shaders or TouchDesigner TOP networks is ultimately some form of UV manipulation:

warping UV with noise
feeding UV into feedback loops
remapping UV using audio data
blending UV-based gradients with color ramps

In your own TouchDesigner audio visualizer workflow, UV is the layer where CHOP data becomes visible form. Audio does not directly create images — it modifies how UV is interpreted over time.

Posted Using INLEO

learning waivio neoxian teaching coding glsl pob

0.000

0 comments