Shader Learn

01 Fragments and data

main: read inputs, compute, write outputs

Left: the original brightness. Right: after dimming. It runs line by line, like a C function.

OriginalDimmed
(0.50, 0.50)
Final brightness0.48
01
01
Explanation

Drag the underlined numbers left and right

uniform float uInput; //  original brightnessuniform float uGain;  //  fraction keptvoid main() {  float result = uInput * uGain; // = 0.48  vec3 color = vec3(result);  gl_FragColor = vec4(color, 1.0);}
  1. read inputs
  2. multiply
  3. write output
uniformPassed in by JS, shared by every fragment
mainWhere each call starts running
=Stores the right side in the left side
JS sidegl.uniform1f(uInput, 0.80) gl.uniform1f(uGain, 0.60)

A uniform is a value JS passes in; main reads inputs, computes and writes outputs, top to bottom like a C function.

Try it

  • Press “Half”: what is the result?
  • Drag uGain to 0 and the right side goes dark