Lesson 1 of 10 · GLSL for beginners

Hello, light

One fragment. Millions of colors. Your first piece.

Your first pixel lit. The GPU waiting for instructions.

What is a shader?A shader is a program that runs on your GPU, the graphics chip in your computer. Your screen is made of millions of points of light. The shader decides what color each one lights up. Those points are called frags. Your screen has millions. That is what you are going to write here.

What you see below is a fragment shader. The code decides the color, and the last line, gl_FragColor, is what lights it up.

Reading the codevoid main(): the starting point. Every shader begins here.
vec3 col: a variable that holds 3 numbers: red, green, blue.
iri(): the color formula. It cycles through 7 colors.
T: time in seconds. It keeps growing, so the color keeps changing.
0.15: how fast time passes. Bigger = faster. At 0, time stops and the color freezes.
gl_FragColor: the final output. This is what paints the frag.

TryMove the Time slider: at 0 the color freezes, raise it and it cycles faster and faster. You can also change the 0.15 by hand, try 0.5 to make it fly or 0.02 to make it breathe.

Freebie

PULSE

Replace all the code with this and watch it pulse.

void main(){
  vec3 col = iri(T * 0.15);
  col *= .5 + .5 * sin(T);
  gl_FragColor = vec4(col, 1.);
}

Want it faster? Change T to T * 3.. The dot after the 3 matters. In shaders, numbers always need a dot: 3. not 3

The code

void main(){
  vec3 col = iri(T * 0.15);
  col *= 0.85;
  gl_FragColor = vec4(col, 1.);
}