Lesson 2 of 10 · GLSL for beginners

The three numbers

Red, green, blue. That is how you make any color.

Any color you see on a screen is made of three numbers: how much red, how much green, how much blue. R, G, B.

If all three are at maximum (1, 1, 1), you get white. If all three are off (0, 0, 0), you get black. If only red is on (1, 0, 0), you get pure red.

Why three?Because your screen is made of three types of lights: red, green, and blue. It is like mixing lights instead of mixing paint: by combining those three you can make any color in the world.

Three numbers between 0 and 1. The entire visible spectrum.

Notice something odd: we write 1. with a dot, not 1. That is because the GPU treats whole numbers and decimals differently. Here we always use decimals. The dot is mandatory.

TryChange r = 1. to r = 0. and red is gone, you get cyan. Change b = 1. to b = 0. and you get yellow (red + green). Change g = 1. to g = 0. for purple. Change all three 1. to 0. and you get black.

Freebie

TIME

Replace the line gl_FragColor = vec4(r, g, b, 1.); with this:

gl_FragColor = vec4(mix(vec3(.95, .25, .35), vec3(.95, .92, .25), .5 + .5 * sin(T)), 1.);

Watermelon pink and lemon yellow mixing. mix() is a slider between two colors. T is the clock. You will really meet it in lesson 07. For now: your sandbox is breathing.

The code

void main(){
  float r = 1.;
  float g = 1.;
  float b = 1.;
  gl_FragColor = vec4(r, g, b, 1.);
}