Solid Color Fill

The sample code fills the entire canvas red. It all comes down to this one line:

Let's break it down.

What is gl_FragColor

A shader's job is simple: every pixel on the screen asks "what color should I be?" and the shader answers.

gl_FragColor is where you write that answer. Whatever color you put here, the pixel shows that color.

What is vec4

vec4 holds 4 numbers representing red, green, blue, and alpha (opacity):

Each number ranges from 0.0 to 1.0 — think of it as a percentage:

• 1.0 = 100%, fully on
• 0.5 = 50%, half strength
• 0.0 = 0%, completely off

So vec4(1.0, 0.0, 0.0, 1.0) means: red 100%, green 0%, blue 0%, fully opaque → solid red.

Alpha is almost always 1.0. You can ignore it for now.

Try changing it

Use the table below to swap in some numbers and see what happens:

Exercise

The exercise canvas starts black. Change the numbers inside vec4 to make it red.

Answer Breakdown

The fix is changing the first number to 1.0:

Each number maps to a channel:

• 1.0 → red at full strength
• 0.0 → green off
• 0.0 → blue off
• 1.0 → fully opaque (always keep this at 1.0 for now)

The exercise starts at vec4(0.0, 0.0, 0.0, 1.0) — all color channels off, so black. Changing the first 0.0 to 1.0 turns red on.

Try setting it to 0.5 instead of 1.0 and see what happens.