Your First Shader: Painting the Entire Screen One Color

When people first hear the word shader, they often imagine something incredibly complicated. The truth is much simpler. Every amazing visual effect you have seen in games, websites, and interactive art begins with something as simple as filling the screen with a single color.

That is exactly what we are going to build today.

By the end of this tutorial, you will understand the smallest possible GLSL fragment shader and know how to change its color however you like.

Before We Begin

A fragment shader runs once for every pixel on the screen.

Imagine your monitor is made up of millions of tiny squares. The fragment shader decides what color every one of those tiny squares should be.

If every pixel receives the same color, the entire screen becomes one solid color.

Simple, but incredibly important.

The Code

#ifdef GL_ES
precision mediump float;
#endif

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

It might look confusing at first, but there are only a few lines that really matter.

Let's go through them one at a time.

The main Function

void main() {

}

Every GLSL shader has a main() function.

Think of it as the starting point of the program.

Whenever the graphics card needs to draw a pixel, it enters this function and follows the instructions inside.

No main() means the shader has nowhere to begin.

Understanding gl_FragColor

This is the most important line.

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

gl_FragColor is the final color that will appear on the screen.

Whatever value you assign to it becomes the color of the current pixel.

If every pixel receives the same value, the entire screen becomes that color.

You can think of it like this:

Current Pixel
        ↓
gl_FragColor
        ↓
Color appears on the screen

Everything you create later, from gradients to glowing effects to water simulations, eventually ends by assigning a value to gl_FragColor.

What Is vec4?

The value being assigned is a vec4.

vec4(1.0, 0.0, 0.0, 1.0)

A vector is simply a group of numbers stored together.

A vec4 contains four values.

Red
Green
Blue
Alpha

Written another way:

vec4(R, G, B, A)

The first three numbers describe the color.

The last number controls transparency.

A value of 1.0 means completely visible.

A value of 0.0 means completely transparent.

For now, we will always keep the alpha value at 1.0.

Understanding RGB Values

GLSL uses values between 0.0 and 1.0.

Instead of writing:

255
128
64

you write values like:

1.0
0.5
0.25

Here are some common colors.

Red

vec4(1.0, 0.0, 0.0, 1.0)

Green

vec4(0.0, 1.0, 0.0, 1.0)

Blue

vec4(0.0, 0.0, 1.0, 1.0)

White

vec4(1.0, 1.0, 1.0, 1.0)

Black

vec4(0.0, 0.0, 0.0, 1.0)

Yellow

vec4(1.0, 1.0, 0.0, 1.0)

Try changing these values and see what happens.

Experimenting is one of the fastest ways to learn GLSL.

Why Are We Using Decimal Numbers?

You might wonder why we write 1.0 instead of just 1.

GLSL treats decimal numbers as floating point values.

Since colors are expected to be floating point values, writing 1.0 tells GLSL exactly what type of number you want to use.

It is a small detail, but one you will see in almost every shader.

What Happens When the Shader Runs?

The graphics card repeats the same process for every pixel.

Pixel 1
↓

Red

Pixel 2
↓

Red

Pixel 3
↓

Red

Pixel 4
↓

Red

Millions more...

Because every pixel gets exactly the same color, the entire screen becomes solid red.

Later in this series, we will learn how to make each pixel receive a different color using coordinates.

That is where shaders become much more interesting.

Try It Yourself

Change the values below and observe the results.

vec4(0.2, 0.6, 1.0, 1.0)

Can you create:

• Sky blue
• Orange
• Purple
• Pink
• Dark green

There are no wrong answers here.

Spend a few minutes experimenting with different numbers until you begin to understand how RGB colors work.

Posted Using INLEO