0.1GPU 的思维方式

你抄过的每一段 Shader 代码,都默认你已经懂一件事:GPU 处理问题的方式和 CPU 完全相反。没建立这个心智模型,GLSL 的每一行都会显得莫名其妙——为什么没有循环遍历像素?为什么不能「先画个圆再挪一下」?为什么到处是 smoothstep?这一章不写代码,先把脑子换过来。

1CPU 是画家,GPU 是工厂

假设要把一张 1080 × 2400 的手机屏幕涂满渐变色,一共约 260 万个像素。用你熟悉的 CPU 思路写,大概是这样:

// 一个画家,拿着一支笔,从左上角开始一个点一个点涂
for (y in 0 until height) {
    for (x in 0 until width) {
        bitmap.setPixel(x, y, computeColor(x, y))  // 执行 260 万次
    }
}

这是串行思路:一个很聪明的画家(CPU 核心),按顺序处理每个点。哪怕每个点只花 100 纳秒,涂一整屏也要约 260 毫秒——而流畅动画要求 16 毫秒内画完一帧。差了一个数量级不止。

GPU 的解法完全不同:它不雇一个聪明的画家,而是雇几千个只会算术的工人(着色器核心),把 260 万个像素分给他们同时开工。每个工人的任务简单到极点:

• 告诉你一个坐标 (x, y);
• 你算出这个坐标该是什么颜色;
• 交卷,下一批。

而你将要学的 Fragment Shader,就是发给每个工人的那张任务说明书——一个「输入坐标、输出颜色」的纯函数。你只写一份,GPU 把它复制给所有工人同时执行。

下面是本书第一个实时 Demo。此刻你屏幕上这块画布里的每一个像素,都正在独立执行同一段代码——没有循环遍历像素,没有谁先谁后:

2渲染管线:一个三角形的旅程

GPU 不是直接「画像素」的,它画的是三角形。任何画面——游戏里的角色、App 的转场、甚至一块全屏特效——底层都是三角形被逐步加工成像素的过程。这条加工流水线叫渲染管线(Rendering Pipeline):

五个环节各干一件事:

「光栅化会对顶点数据做插值」这件事值得多说一句,因为它解释了一个之后常用的机制:如果三角形的三个顶点各带一个颜色,那么三角形内部每个像素收到的颜色,是按它到三个顶点的距离加权混合出来的。纹理坐标、法线,任何从 Vertex Shader 传出的变量都会被这样平滑插值——这是 GPU 送你的免费渐变器。

3Fragment Shader 的世界规则

回到那个工厂。每个工人(每次 Fragment Shader 执行)都活在三条铁律之下,这三条就是 Shader 编程和普通编程的全部区别:

用一个比喻把它钉进脑子:

规则 ③ 有一个重要推论:GPU 硬件层面,相邻的几十个像素是锁步(lockstep)执行的——同一组工人必须同一时刻执行同一条指令。如果代码里写 if/else,而相邻像素走了不同分支,硬件只能把两个分支都执行一遍,各自丢弃不要的结果。这就是「Shader 里分支很贵」的真正原因,也是为什么老手更爱用 step、mix 这类「数学开关」——1.1 章会专门训练这个思维。

4你能改写管线的哪些环节

五个环节里,只有两个是可编程的:Vertex Shader 和 Fragment Shader。其余是 GPU 固定功能,你只能配置参数,不能改逻辑。这两个可编程环节的分工决定了本书的结构:

所以本书的路线是:Phase 0~2 集中火力练 Fragment Shader(在浏览器里,零环境配置),Phase 3 补上 Vertex Shader 和 Android 管线装配,Phase 4 再回头看游戏引擎如何把两者玩出花。