Understanding UV Coordinates: The Secret Behind Every Shader

In the previous tutorial, we learned how to paint the entire screen one color. Every pixel received the same value, so the result was a single solid color.

That is useful for learning the basics, but it is also very limiting.

What if you wanted the left side of the screen to be blue and the right side to be red? Or create a sunset, a checkerboard, or animated waves?

To do that, every pixel needs to know where it is on the screen.

This is where UV coordinates come in.

Before You Continue

If you have not read the first tutorial yet, start there first.

Previous tutorial: Your First Shader: Painting the Entire Screen One Color

In that lesson, we learned about gl_FragColor, vec4, and how every pixel receives its final color.

Now we are going to give each pixel its own position.

What Are UV Coordinates?

Imagine placing a sheet of graph paper over your screen.

Instead of measuring positions in pixels, GLSL uses a much simpler system.

The bottom left corner is:

(0.0, 0.0)

The top right corner is:

(1.0, 1.0)

Every other point lies somewhere between these two values.

Instead of saying a pixel is at position 642 or 387, GLSL says it is somewhere between 0 and 1.

That makes your shaders work on almost any screen size without changing the code.

Meet vUv

Many fragment shaders receive a variable called vUv.

varying vec2 vUv;

Do not worry about where it comes from just yet.

For now, all you need to know is that vUv stores the position of the current pixel.

The word vec2 means it contains two numbers.

X position
Y position

You can picture it like this:

vec2

x
y

Or like this:

vUv

(0.35, 0.80)

The first number tells you how far across the screen you are.

The second tells you how far up the screen you are.

Understanding X and Y

You can access each value separately.

vUv.x

This is the horizontal position.

It starts at:

0.0

on the left side of the screen and slowly increases until it reaches:

1.0

on the right side.

Now look at the other value.

vUv.y

This is the vertical position.

It starts at the bottom of the screen and increases toward the top.

A Simple Picture

Imagine looking at your screen like this.

(0,1) ---------------- (1,1)

   |
   |
   |
   |

(0,0) ---------------- (1,0)

Every pixel has its own unique position.

No two pixels share exactly the same UV coordinates.

Why Is This Useful?

Suppose you write this.

gl_FragColor = vec4(vUv.x, 0.0, 0.0, 1.0);

The red channel now depends on the horizontal position.

Pixels on the left receive very little red.

Pixels on the right receive much more.

Without writing any complicated code, you have created a smooth gradient.

That is something we could never do in the previous tutorial because every pixel had exactly the same value.

What About .s and .t?

You may also see code like this.

vUv.s

or

vUv.t

These are simply different names.

x = s

y = t

They mean exactly the same thing.

Some people use x and y because they think about positions.

Others use s and t because they are working with textures.

Use whichever feels more natural.

Why Do Some Shaders Use Things Like vUv.xx?

You might come across code such as:

vUv.xx

or

vUv.xy

or even

vUv.yx

This is called swizzling.

It lets you rearrange or duplicate values.

For example,

vUv.xx

creates a new vector using the horizontal value twice.

If vUv is:

(0.3, 0.8)

then

vUv.xx

becomes:

(0.3, 0.3)

Likewise,

vUv.yx

becomes:

(0.8, 0.3)

This is an easy way to reuse values without writing extra code.

You will see it often as we move into more advanced shaders.

Try It Yourself

Experiment with these lines one at a time.

gl_FragColor = vec4(vUv.x, 0.0, 0.0, 1.0);

gl_FragColor = vec4(0.0, vUv.y, 0.0, 1.0);

gl_FragColor = vec4(vUv.x, vUv.y, 0.0, 1.0);

Look carefully at how the colors change.

Can you explain why?

The answer is hidden in the UV coordinates.

Exercise

Try answering these questions before moving on.

• Which side of the screen has the highest value for vUv.x?
• Which part of the screen has the smallest value for vUv.y?
• What happens if you use both values together?
• Can you predict the colors before running the shader?

Taking a few minutes to experiment here will make the next lesson much easier.

Posted Using INLEO