Lección 5 de 10 · GLSL para principiantes
El gradiente
Una posición controla un color. Ya está, eres artista.
Esto es la idea más poderosa que vas a aprender hoy: la posición puede convertirse en color. Y al revés: las matemáticas que apliques a la posición se ven como imagen.
La posición se convierte en imagen. Bienvenido a los shaders.
Un gradiente es solo eso: tomas p.x (la posición horizontal) y la usas como un canal de color. El frag de la izquierda tiene p.x = 0, el de la derecha tiene p.x = 1. Si lo conectas al rojo, queda un gradiente de negro a rojo.
mix()La función
mix(A, B, t) "mezcla" dos cosas. Cuando t es 0, te da A puro. Cuando es 1, te da B puro. Cuando es 0.5, te da la mitad de cada uno. Es como un slider.Cambia
p.x por p.y y el gradiente se vuelve vertical. Cambia los colores vec3(0.95, 0.15, 0.55) y vec3(0.1, 0.85, 0.5) a otros que tú elijas. Cambia el p.x * p.x a p.x y la transición se vuelve lineal en vez de curva.El código
void main(){
vec2 p = gl_FragCoord.xy / R;
vec3 a = vec3(0.95, 0.15, 0.55);
vec3 b = vec3(0.1, 0.85, 0.5);
float t = p.x * p.x;
vec3 col = mix(a, b, t);
col = hueShift(col, 0.0);
gl_FragColor = vec4(col, 1.);
}