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
