顶点着色器 vs 片元着色器：厨房里的双人舞

可视化演示

动态演示顶点着色器和片元着色器有什么的核心机制，通过基础/核心/应用/扩展四种模式展示关键概念与交互流程。

职责分工：备菜师傅与掌勺师傅

你走进一家中餐厅的后厨：备菜师傅站在案板前，把一块三文鱼切成统一的方块，认认真真地把它们码在盘子里。掌勺师傅接过盘子，在灶台上淋上酱汁、撒上芝麻，再点缀两片薄荷叶。两个师傅一个管“形状和位置”，一个管“颜色和味道”，配合默契。

渲染管线也遵循同样的分工。顶点着色器是备菜师傅，它对每一个顶点（模型的骨架点）执行一次：读取顶点位置、法线等属性，计算它在屏幕上的正确位置，然后输出给下一个环节。片元着色器则是掌勺师傅，它工作在光栅化之后，对每一个片元（覆盖在屏幕上的像素格子）执行一次：计算光照、采样纹理、决定这个格子最终呈现的颜色。两者之间隔着光栅化——像是传菜口，把几何图形“切碎”成海量的小格子。

一盘菜的成败，从来不是某一个师傅单独决定的：备菜师傅切得再好，掌勺师傅乱浇酱汁也白搭；反过来，备菜位置摆歪了，掌勺师傅再用心顾客也不满意。顶点和片元两个着色器，正是这样的“双人舞”。

执行频率：几千个配菜 vs 百万粒米饭

你点了一份蛋炒饭。备菜师傅只处理了三种配菜：虾仁、鸡蛋、葱花，总共不过几十块。可掌勺师傅要做的，是把每一粒米饭都炒到裹上蛋液、染上酱色——一盘饭有两万粒米，掌勺师傅的工作量是备菜师傅的上千倍。

GPU 里的情况几乎一模一样。一个三角形只有三个顶点，顶点着色器只需要跑三次；可这个三角形在屏幕上可能覆盖几十万个像素，片元着色器就要跑几十万次。在全屏渲染的场景里，片元数量通常是百万量级，而顶点数量常常只有几千到几十万。执行频率的巨大差异，决定了片元着色器是渲染性能的第一关注点。

这种差异来自 GPU 的并行结构：顶点着色器和片元着色器都由大量线程并行执行，但片元着色器的线程数量远超顶点着色器。以 1080p 屏幕为例，一帧画面约有 200 多万个像素，即使只有一半被物体覆盖，片元着色器也要执行 100 万次以上；而一个中等复杂度的模型，顶点数往往只有几千到几万。这也是为什么同样的代码放在片元着色器里，成本可能比放在顶点着色器里高几个数量级——每多一行运算，都要乘以百万级的执行次数。

所以下次做性能优化时，先问自己一句：这条计算需要在每个粒米上做，还是在每块配菜上做？如果能在备菜阶段完成，就绝不要拖到掌勺阶段。

数据传递：varying 传菜员

备菜师傅切好三块三文鱼，递给掌勺师傅时不能只递鱼肉——他还要喊一句：这块是刺身、那块要炙烤、最右边那块要剁碎。这些信息，就是后厨里的“传菜单”。

着色器之间也有类似的传菜员，叫 varying 变量。顶点着色器为每个顶点写入 varying 值（比如颜色、uv、法线），光栅化阶段会把这些值自动插值后交给片元着色器。片元并不需要知道每个顶点的原始计算过程，它只收到一个“已经依据自身位置插值好的结果”。此外还有两种数据：attribute（顶点属性，每个顶点自带的输入）和 uniform（全局常量，整帧渲染中不变，像是餐厅统一规定的营业时间）。其中，attribute 只进顶点着色器，uniform 两个着色器都能读，varying 则担当两个着色器之间的桥梁。

$$\displaystyle \mathbf{C}_{frag} = \lambda_0\, \mathbf{C}_{v0} + \lambda_1\, \mathbf{C}_{v1} + \lambda_2\, \mathbf{C}_{v2}, \qquad \sum_{i=0}^{2}\lambda_i = 1$$

1. Cv0/Cv1/Cv2：三个顶点各自携带的 varying 值，比如颜色、纹理坐标或法线，它们是插值的原料。

$$\mathbf{C}_{v0}, \mathbf{C}_{v1}, \mathbf{C}_{v2}$$

2. λ0/λ1/λ2：片元在三角形内的重心坐标，由光栅化阶段计算，表示片元离三个顶点分别有多近。

$$\lambda_0 + \lambda_1 + \lambda_2 = 1$$

3. 加权求和：将三个顶点的 varying 值按重心坐标加权相加，得到片元专属的插值结果。

$$\mathbf{C}_{frag} = \lambda_0 \mathbf{C}_{v0} + \lambda_1 \mathbf{C}_{v1} + \lambda_2 \mathbf{C}_{v2}$$

传菜员越是称职，掌勺师傅就越省心。同一个三角形内部，varying 让颜色、纹理坐标平滑过渡，而不是一块块生硬地跳变——这正是物体表面看起来连续自然的关键。你不需要在片元着色器里手动插值，GPU 的固定硬件已经在传菜路上帮你做完了。

坐标变换：备菜师的四步摆盘

备菜师傅并非直接把菜放上桌。他的工序是：从冰箱拿出食材（模型本地坐标），在案板上摆好（世界坐标），再端到顾客面前的正中央（视图坐标），最后由服务员拍照发朋友圈的视角里呈现（裁剪坐标）。这四步在顶点着色器里有一套标准的矩阵组合。

顶点着色器的核心职责，就是完成本地空间到裁剪空间的坐标变换。模型矩阵负责把物体放到世界中合适的位置和朝向；视图矩阵把世界坐标变换到以摄像机为中心的观察空间；投影矩阵再把观察空间的坐标压缩到裁剪空间里，为后续裁剪和屏幕映射做准备。三者连乘，就得到了熟悉的 MVP 矩阵。

$$\displaystyle \mathbf{p}_{clip} = \mathbf{P} \times \mathbf{V} \times \mathbf{M} \times \mathbf{p}_{local}$$

1. p_local：顶点在模型本地空间中的坐标，是建模软件里导出的原始位置。

$$\mathbf{p}_{local} = (x_{local}, y_{local}, z_{local}, 1)$$

2. M 模型矩阵：把本地坐标平移到世界空间，决定物体在世界中的位置、旋转和缩放。

$$\mathbf{p}_{world} = \mathbf{M} \times \mathbf{p}_{local}$$

3. V 视图矩阵：把世界坐标变换到以摄像机为原点的观察空间，相当于把镜头对准物体。

$$\mathbf{p}_{view} = \mathbf{V} \times \mathbf{p}_{world}$$

4. P 投影矩阵：把观察空间压缩到裁剪空间，模拟透视近大远小或正交投影。

$$\mathbf{p}_{clip} = \mathbf{P} \times \mathbf{p}_{view}$$

每个顶点进入顶点着色器，都要走完这一套“冰箱→案板→餐桌→相机”的流程。这也是顶点着色器和片元着色器最关键的区别之一：坐标变换只发生在顶点阶段，片元着色器拿到的已经是光栅化后的屏幕对应位置，主要在颜色上做文章。

颜色计算：掌勺师傅的火候与酱汁

掌勺师傅站在灶台前，面前摆着一块纹理分明的新鲜牛肉。他要做的不是把牛肉炒熟就完事，而是要让牛排在灯光下呈现诱人的焦褐感——先看火候（光照方向），再看食材本身的纹理（贴图），最后决定这一口该是什么味道。

片元着色器的核心工作，就是逐片元计算颜色。它接收插值后的法线、uv 等 varying 数据，结合光照方向和观察方向计算漫反射、高光，再采样纹理得到物体本身的底色，最终混合输出。以简单的 Blinn-Phong 光照模型为例，片元颜色是多次乘加的结果。

$$\displaystyle C_{out} = \big(k_d (\mathbf{N}\cdot\mathbf{L}) + k_s (\mathbf{N}\cdot\mathbf{H})^n\big) \times C_{tex}$$

1. N 与 L：片元法线与光源方向，点积越大说明表面越正对光源，漫反射越亮。

$$\mathbf{N}\cdot\mathbf{L} = \cos\theta$$

2. k_d 漫反射系数：控制材质对光的散射强度，颜色由物体固有色决定。

$$k_d (\mathbf{N}\cdot\mathbf{L})$$

3. H 半程向量：光源方向与视线方向的中间向量，高光的强弱由它与法线的接近程度决定。

$$\mathbf{H} = \frac{\mathbf{L}+\mathbf{V}}{|\mathbf{L}+\mathbf{V}|}$$

4. C_tex 纹理颜色：从贴图中采样得到的底色，相乘后让光照颜色与物体花纹叠加。

$$C_{tex} = sample(uv)$$

如果同样一套光照计算放在顶点着色器里做，叫逐顶点光照（Gouraud），颜色只在顶点处算好再插值，快但会丢失细节；放在片元着色器里逐片元计算，则能呈现更细腻的高光变化，代价是海量计算。掌勺师傅愿意多颠几次勺，就能让每一粒米都均匀入味——这就是片元着色器的价值，也是它的昂贵之处。

性能优化：高峰期先看哪条队伍在堵

晚上七点半，餐厅迎来高峰。备菜台前三个厨师手起刀落，出菜口却越积越多，掌勺师傅的灶前已经排起了长队。你跑去观察，发现配菜堆积如山——瓶颈根本不在备菜，而在掌勺。优化后厨，先定位堵点。

渲染优化的第一原则同样是定位瓶颈阶段。如果帧率低是因为顶点太多、CPU 提交慢，那就是顶点瓶颈，此时减面、合并 Draw Call、做 LOD 更有效；如果顶点很少但全屏片元计算量巨大，那就是片元瓶颈，此时就要降低片元着色器里的光照循环、缩减纹理采样次数、减少动态分支。

结合前文提到的执行频率差异，多数高分辨率场景都容易撞上片元瓶颈。常见的优化手段包括：把部分光照计算上移到顶点着色器，用近似公式减少片元中的复杂函数，尽量不用 if-else 或拆成等价的数学运算，以及使用 mipmap 降低纹理采样缓存压力。与此同时，你可以用 GPU Profiler 一类工具查看每个阶段的耗时占比，而不是靠猜。

回到后厨的比喻：优化不是一句笼统的“多雇人”，而是看哪条流水线堵住了——是备菜台（顶点）还是灶台（片元）。选错了方向，增再多人也只会让堵住的地方更拥挤。

调试实践：试菜要诀

新菜研发时，掌勺师傅每调一次酱汁，都要舀一勺尝一尝：颜色对不对？咸淡合不合适？如果太咸，是酱油多了还是没搅匀？他必须先看到中间状态，才知道下一步该改什么。

着色器调试也是一样。你的最终画面是多项计算叠加后的结果，直接看最终图往往很难定位问题。常用的调试技巧是把中间结果可视化：在顶点着色器里输出纯色位置，把位置信息直接当颜色写出来；或者把 varying 的 uv、法线直接映射到颜色通道上，让“看不见的插值”变成肉眼可见的渐变。工具链方面，RenderDoc、Shader 热重载、GPU Debugger 都能帮你在某一帧里检查每个顶点的输入输出、每个片元的插值结果。

常见错误也常有规律：顶点着色器输出的位置不对，画面会出现三角形撕裂或跑飞；varying 变量忘记声明，片元着色器会收到默认零值；坐标系混淆（比如行向量与列向量混用）会让模型整体错乱；精度不足则会出现闪烁色带。做到“把中间量画出来”,大多数问题在第一步就能暴露。

试菜时先看样，再调味。调试着色器时先可视化，再改代码——这条顺序能省下你无数个“为什么画面全黑”的深夜。

AI 应用场景

Python 演示

import numpy as np def barycentric(px, py, v0, v1, v2):    denom = (v1[1] - v2[1]) * (v0[0] - v2[0]) + (v2[0] - v1[0]) * (v0[1] - v2[1])    l0 = ((v1[1] - v2[1]) * (px - v2[0]) + (v2[0] - v1[0]) * (py - v2[1])) / denom    l1 = ((v2[1] - v0[1]) * (px - v2[0]) + (v0[0] - v2[0]) * (py - v2[1])) / denom    l2 = 1.0 - l0 - l1    return l0, l1, l2 def run():    verts = [        np.array([-0.8, -0.6]),        np.array([0.8, -0.6]),        np.array([0.0, 0.8])    ]    colors = [        np.array([1.0, 0.2, 0.3]),        np.array([0.1, 0.8, 0.4]),        np.array([0.4, 0.4, 1.0])    ]    width, height = 160, 160    framebuffer = np.zeros((height, width, 3))     for y in range(height):        for x in range(width):            px = (x + 0.5) / width * 2.0 - 1.0            py = 1.0 - (y + 0.5) / height * 2.0            l0, l1, l2 = barycentric(px, py, verts[0], verts[1], verts[2])            if l0 >= -0.01 and l1 >= -0.01 and l2 >= -0.01:                color = l0 * colors[0] + l1 * colors[1] + l2 * colors[2]                framebuffer[y, x] = np.clip(color, 0.0, 1.0)     with open("output.ppm", "wb") as f:        f.write("P6\n%d %d\n255\n" % (width, height))        f.write((framebuffer * 255).astype("uint8").tobytes())    print("saved output.ppm") if __name__ == "__main__":    run()

1. def barycentric(px, py, v0, v1, v2):计算片元在三角形内的重心坐标，这是光栅化阶段的核心公式。
2. denom = (v1[1] - v2[1]) * (v0[0] - v2[0]) + ...分母与两个顶点坐标有关，相当于三角形面积的两倍。
3. l2 = 1.0 - l0 - l1第三个重心坐标由前两个自动补全，保证三者之和为 1。
4. for y in range(height):遍历每个屏幕像素，模拟“海量片元”的逐片元执行。
5. px = (x + 0.5) / width * 2.0 - 1.0把像素索引映射到 [-1, 1] 的归一化设备坐标。
6. if l0 >= -0.01 and ...判断片元是否落在三角形内部，这里略作容差。
7. color = l0 * colors[0] + ...这就是 varying 重心坐标插值：三个顶点颜色按权重混合。
8. framebuffer[y, x] = np.clip(color, 0.0, 1.0)片元着色器输出颜色并写入帧缓冲。
9. f.write("P6\n%d %d\n255\n" % (width, height))把帧缓冲写成简单的 PPM 图像文件。

常见误区

面试题