00 序章:GPU 如何绘制画面
RGBA 四个数,如何变成屏幕上的颜色
片元输出 → 混合 → 颜色缓冲 → 浏览器显示 canvas。最后一次写入才算数。
01
01
01
01
习题
带下划线的数字可以左右拖动拖动数字,或直接改代码
void main() { vec3 color = vec3(, , ); gl_FragColor = vec4(color, );}
- RGBA 小数
- 深度 / 混合
- 颜色缓冲
- canvas
写进缓冲区的 8 位字节
[245, 110, 77, 255]gl_FragColor 是输出槽:赋值不会结束 main,执行到 } 时留下的值才写进缓冲区。
JS 这一侧
片元输出四个 0~1 小数;写进颜色缓冲时变成 0~255 的字节。最后一次写入才算数。
试一试
- 把 R 调到 1,看字节变成 255
- 把 A 调到 0.5:第四个字节变成 128,背景从后面透出来
- 打开「继续改写颜色」,第二次写入覆盖了第一次