Your First Shader: Painting the Entire Screen One Color

So far we have been looking at code and breaking it apart piece by piece. That approach is useful, but there is another way to learn shaders that is often more effective:

Change things and see what happens.

For this lesson, I would recommend opening the example on Shader Learn and simply playing with the values yourself.

The example can be found here:
https://www.shader-learn.com/learn/basic/solid-color

The shader fills the entire canvas with a single color. At the center of everything is one line:

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

At first glance it looks strange, but the idea is simple.

Every pixel on the screen asks the shader one question:

"What color should I be?"

The shader responds by writing a value into gl_FragColor.

Think of gl_FragColor as the final answer that gets sent to the screen.

The color itself is stored inside a vec4.

vec4(1.0, 0.0, 0.0, 1.0) 

The four values represent:

• Red
• Green
• Blue
• Alpha (opacity)

Each value ranges between 0.0 and 1.0.

You can think of them as percentages:

• 1.0 means fully on
• 0.5 means half strength
• 0.0 means completely off

In our example:

vec4(1.0, 0.0, 0.0, 1.0) 

Red is fully on.

Green is off.

Blue is off.

The result is a solid red screen.

The last value controls opacity. Most of the time when learning basic shaders you can leave it at 1.0 and forget about it for now.

The fun begins when you start changing numbers.

Try these:

vec4(0.0, 1.0, 0.0, 1.0) 

Green.

vec4(0.0, 0.0, 1.0, 1.0) 

Blue.

vec4(1.0, 1.0, 1.0, 1.0) 

White.

vec4(0.0, 0.0, 0.0, 1.0) 

Black.

Then try values in between.

What happens if you use:

vec4(0.5, 0.0, 0.0, 1.0) 

Or:

vec4(1.0, 0.5, 0.0, 1.0) 

Do not worry about getting the right answer immediately.

The goal is to develop an intuition for how color channels work.

A lot of shader programming starts exactly like this: changing numbers, observing the result, and slowly building a mental model of what those numbers represent.

This may seem like a very small lesson, but understanding how colors are represented is one of the foundations that almost every shader builds upon later.

Posted Using INLEO