learn GLSL from zero
ToolsCrea con shadersShader MakerCrea shaders gratis en líneaToolkitObras de shaders listas para tu webSketcher LabPinta el hero de tu landing con shaders3D StudioEl editor Three.js en tu navegador
GamesJuega con shadersOnomatoShaderEscribe una palabra y explótalaThe WatcherUn ojo que te sigueAetherVidrio líquido con un ojo adentroBloomcoreUna palabra hace crecer un jardín de luzPyrokineAvienta fuego a la paredVoltaicLa pirámide lanza rayosSurfSurfea un océano de shader

Lección 3 de 10 · GLSL para principiantes

Mezclar

Tres operaciones. Control total.

Los números de los colores se pueden sumar, restar, multiplicar y dividir. Igual que los números que ya conoces.

Si multiplicas un color por 0.5, queda más oscuro (la mitad de luz). Si lo multiplicas por 2., queda más brillante. Si le restas 0.3, le quitas un poco de cada canal.

Matemáticas que se ven.

vec3Un vec3 es como un paquete con tres números adentro. La usamos para guardar un color (R, G, B). Cuando le sumas otro paquete, la GPU opera los tres al mismo tiempo.
PruebaCambia el 0.85 por 0.3 para ver el color más oscuro. Por 1.5 para verlo brillando. Cambia el 0.95 (el exponente) a 0.4 y el color se vuelve más saturado.

El código

void main(){
  vec3 base = vec3(0.9, 0.3, 0.3);
  vec3 col = base * 0.85;
  col = pow(col, vec3(0.95));
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close