Shader Learn

01 片元与数据

main：读输入、计算、写输出

左边是原始亮度，右边是调光后。像 C 函数一样，一行行执行。

原始亮度调光之后
(0.50, 0.50)
最终亮度0.48
01
01
讲解

带下划线的数字可以左右拖动

uniform float uInput; //  原始亮度uniform float uGain;  //  保留比例void main() {  float result = uInput * uGain; // = 0.48  vec3 color = vec3(result);  gl_FragColor = vec4(color, 1.0);}
  1. 读输入
  2. 乘法
  3. 写输出
uniformJS 传入，所有片元共用
main每次调用从这里开始执行
=把右边的结果存入左边
JS 这一侧gl.uniform1f(uInput, 0.80) gl.uniform1f(uGain, 0.60)

uniform 是 JS 传进来的值；main 读输入、计算、写输出，像 C 函数一样从上往下执行。

试一试

  • 点「减半」，结果变成多少？
  • 把 uGain 拉到 0，右边变成全黑