Lección 2 de 10 · GLSL para principiantes

Los tres números

Rojo, verde, azul. Así se hace cualquier color.

Cualquier color que veas en una pantalla está hecho de tres números: qué tanto rojo, qué tanto verde, qué tanto azul. R, G, B.

Si los tres están al máximo (1, 1, 1), tienes blanco. Si los tres están apagados (0, 0, 0), tienes negro. Si solo el rojo está prendido (1, 0, 0), tienes rojo puro.

¿Por qué tres?Porque tu pantalla está hecha de tres tipos de luces: rojas, verdes y azules. Es como mezclar luces en vez de mezclar pintura: mezclando esos tres puedes hacer cualquier color del mundo.

Tres números entre 0 y 1. Todo el espectro visible.

Nota una cosa rara: escribimos 1. con punto, no 1. Eso es porque la GPU distingue entre números enteros y decimales. Aquí siempre usamos decimales. El punto es obligatorio.

PruebaCambia r = 1. a r = 0. y se va el rojo, queda cyan. Cambia b = 1. a b = 0. y queda amarillo (rojo + verde). Cambia g = 1. a g = 0. para morado. Cambia los tres 1. a 0. y queda negro.

Freebie

TIME

Reemplaza la línea gl_FragColor = vec4(r, g, b, 1.); con esta:

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

Sandía rosa y limón amarillo mezclándose. mix() es un slider entre dos colores. T es el reloj. Lo conoces en serio en la lección 07. Por ahora: tu sandbox respira.

El código

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