Shader Learn

00 序章:GPU 如何绘制画面

RGBA 四个数,如何变成屏幕上的颜色

片元输出 → 混合 → 颜色缓冲 → 浏览器显示 canvas。最后一次写入才算数。

01
01
01
01
讲解

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

void main() {  vec3 color = vec3(, , );  gl_FragColor = vec4(color, );}
  1. RGBA 小数
  2. 深度 / 混合
  3. 颜色缓冲
  4. canvas
写进缓冲区的 8 位字节[245, 110, 77, 255]

gl_FragColor 是输出槽:赋值不会结束 main,执行到 } 时留下的值才写进缓冲区。

片元输出四个 0~1 小数;写进颜色缓冲时变成 0~255 的字节。最后一次写入才算数。

试一试

  • 把 R 调到 1,看字节变成 255
  • 把 A 调到 0.5:第四个字节变成 128,背景从后面透出来
  • 打开「继续改写颜色」,第二次写入覆盖了第一次