00 序章：GPU 如何绘制画面

Shader 的结果，显示在哪里？

左边是一个真正的 HTML canvas，里面的颜色由 GPU 绘制。

R · 红0.48

G · 绿0.83

B · 蓝0.69

A · 不透明度1.00

讲解

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

void main() {  vec3 color = vec3(, , );  gl_FragColor = vec4(color, );}

canvas网页里的一块位图画布

WebGL让 JS 把数据和 shader 交给 GPU 的接口

shader在 GPU 上运行的小程序，用 GLSL 编写

这一页的数字可以直接在代码里左右拖动，第四个是不透明度。之后每一课的代码都能这样拖，也能直接改。

JS 这一侧

canvas 是网页里的一块画布；WebGL 让 GPU 往里面写颜色。

试一试