learn GLSL from zero
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean

Lesson 3 of 10 · GLSL for beginners

Mixing

Three operations. Total control.

Color numbers can be added, subtracted, multiplied, and divided. Just like the numbers you already know.

If you multiply a color by 0.5, it gets darker (half the light). Multiply by 2. and it gets brighter. Subtract 0.3 and you take a little away from each channel.

Math you can see.

vec3A vec3 is like a pack with three numbers inside. We use it to hold a color (R, G, B). When you add another pack to it, the GPU operates all three at once.
TryChange 0.85 to 0.3 to see the color darker. To 1.5 to see it glow. Change 0.95 (the exponent) to 0.4 and the color goes more saturated.

The code

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