着色器变量：Uniform/Buffer/Varying——GPU 工厂的三条信息通道

可视化演示

展示GPU渲染管线中Uniform、Buffer、Varying三类变量的数据流动路径：从CPU到顶点着色器、经插值传递到片元着色器，对比其作用域与存储方式。

变量总览——车间里的三条信息通道

车间里贴公告、发原料卡、传流转单，是三种性质完全不同的沟通方式。GPU 世界也一样：一台着色器程序要并行处理成千上万个顶点、上百万个片元，数据必须走专用通道，才能高效送到每个工位手上。如果只靠一条路传数据，流水线早就堵死了。

在 GLSL 里，这三种通道恰好对应三类变量。Uniform 是 CPU 写入 GPU 的只读全局常量，像公告栏一样所有工位共享同一份；Buffer（顶点缓冲对象 VBO）是驻留在显存中的顶点数据仓库，着色器通过 attribute 接口按顶点编号逐条取用，像原料架上每件产品各自一张原料卡；Varying 则是顶点着色器写给片元着色器的“半成品说明单”，途中还会被光栅化阶段自动插值加工。三者共同织成 GPU 内外的数据流动网络。

所以先记住一句话：Uniform 全局共享，attribute 顶点私有，varying 阶段传递。后面每一节，都在给这句话补充细节。

Uniform 常量——车间公告栏

车间主任每天开工前，会把本批次的生产要求写在公告栏上：产量 1000 个、表面颜色红色、硬度中等。所有工位抬头都能看到，但谁也不许涂改——这就是 Uniform 的本职。在 WebGL/OpenGL 里，CPU 使用 gl.uniform4fv、gl.uniformMatrix4fv 这类接口，把数据写进 GPU 的 uniform 存储区。着色器里所有并行线程读到的是同一份只读值。

实际项目里，Uniform 最常装的是这些“全场景通用”的小数据：模型视图投影矩阵、当前动画时间、光源方向与颜色、屏幕分辨率、雾浓度等等。它们的共同点是：量小、不随顶点变化、更新频率低（每帧甚至更久才动一次）。比如摄像机推近拉远，只需要每帧更新十几KB的矩阵数据，不值得惊动显存里的顶点大部队。

一句话回收比喻：公告栏上写什么，全车间就按什么干活；你只需要每帧改一次公告栏，不用对每个工人单独喊话。Uniform 就是这种“一次广播、全员执行”的高效通道。

Buffer顶点缓冲——原料架与原料卡

光有公告栏还不够。1000 个球，每个球的半径、材质、花纹都不同，车间的“原料卡”必须一对一。GPU 里，这张原料卡存放在 Buffer / VBO 中：一块创建后常驻显存的数据区，里面紧密排列着顶点数组。每个顶点占一行，行内依次排好位置、颜色、UV、法线等字段，这些字段在着色器里就叫 attribute。

顶点着色器处理某个顶点时，GPU 会根据当前顶点编号，在缓冲里精准抓取那一行数据。CPU 要做三步准备工作：创建并填充 VBO；用 gl.vertexAttribPointer 告诉 GPU“这一列是位置、那一列是颜色、每列隔多少字节”；最后打开 attribute 开关。这套“描述排布”的机制就是 stride（跳步）和 offset（偏移）。

回看工厂：原料架上一摞摞卡片按产品编号排好，工位处理到几号产品就抽第几张卡。Buffer 的优势正在于此——数据常驻 GPU 显存，流水线多次开动（多次绘制）都不需要重复搬货。

Varying插值——流水线上的流转单

整形工位做完一个毛坯，会在流转单上写：当前温度 80℃、表面粗糙度 3。可传送带之后要处理的半成品数量多得多：一个三角形明明只有 3 个顶点，经光栅化扩散后却要生成上千个像素片元，每个片元都要一张流转单。GPU 的解法很巧妙：在每个像素的位置，按它离两个端点的远近，把端点上的流转单数值线性混合出一张新单子。

这就是 Varying：顶点着色器输出原始值，片元着色器得到的是插值后的值。前面公式里的 gl_Position 是内置输出，而用户自定义的 varying 同样遵循这条规则。颜色渐变、法线插值、UV 平滑过渡、雾效浓度变化，全靠它在两个着色器阶段之间“打圆场”。

想象传送带：两端放着一红一蓝两种颜料，中间经过的每一个半成品，都自动按距离混合出从红到蓝的平滑渐变——这就是为什么一个纯色三角形，只要给三个顶点不同的颜色，内部就能自动呈现渐变效果。

数据流动管线——从车间主任到成品小球

把三类变量放进一条完整流水线走一遍。CPU 每帧要做三件事：改公告栏（更新 uniform）→ 把原料卡搬上架（创建或更新 VBO）→ 按下开工按钮（发出 draw call）。GPU 随即启动三条流水段：顶点着色器一次处理一个顶点，用 attribute 读自己的原料卡、用 uniform 读公告栏，算出顶点位置并写 varying；光栅化单元在三角形内部生成海量片元，同时把 varying 插值好；片元着色器拿着插值后的 varying 与 uniform 完成最终上色；最后一块像素被写进颜色缓冲，一帧画面完成。

你会发现，三类变量在管线里各就各位、各司其职：Uniform 从头到尾都能被读取，是常驻的“环境变量”；Buffer 只服务顶点着色器，喂的是逐顶点原料；Varying 只存在于 VS 到 FS 之间，是阶段间的传话筒。

从车间主任按下按钮，到彩色小球滚下产线，中间所有数据搬运都由这三条通道完成。你只要在脑子里跑一遍这条流水线，遇到再复杂的 shader 也能瞬间定位“这里的数据是从哪条通道来的”。

对比与选型——三兄弟怎么选

回到车间：公告栏、原料卡、流转单，到底什么时候用哪个？诀窍是看三个问题：数据有几份、谁读谁写、存在哪里。Uniform 只有一份，CPU 写 GPU 只读，存在 GPU 的常量存储区；Buffer 有 N 份顶点数据，CPU 批量写、GPU 按顶点编号读，存在显存堆里；Varying 也有 N 份，但它是 VS 写、FS 读，数据在寄存器与插值单元之间流转，不经过内存。

选型经验可以浓缩成三句话：全局小量用 Uniform，逐顶点大数组用 Buffer，阶段间传递用 Varying。性能上还有几个潜规则：频繁切换 uniform 有开销但通常可接受；每帧全量重建大 VBO 是常见的渲染瓶颈，能复用就复用；varying 里别做昂贵计算，因为每个像素都会执行一遍片元着色器，代价会被放大几百倍。

| 维度 | Uniform | Buffer / attribute | Varying |

|---|---|---|---|

| 数据份数 | 1 份 | N 份（每顶点） | N 份（每片元） |

| 谁写 | CPU | CPU 批量 | 顶点着色器 |

| 谁读 | 所有阶段 | 顶点着色器 | 片元着色器 |

| 存哪里 | 常量存储区 | 显存堆 | 寄存器+插值单元 |

| 典型用途 | 矩阵/时间/光源 | 位置/法线/UV | 颜色渐变/纹理坐标 |

拿一张小卡片记下这组对比，你以后写 shader 时选变量就像老工人挑工具一样顺手。

AI 应用场景

Python 演示

TRIANGLE = [    (0.0, 0.0, 1.0, 0.0, 0.0),    (1.0, 0.0, 0.0, 1.0, 0.0),    (0.0, 1.0, 0.0, 0.0, 1.0),] class Uniforms:    def __init__(self, brightness=1.0, color_scale=1.0):        self.brightness = brightness        self.color_scale = color_scale def vertex_shader(attr, uniforms):    x, y, r, g, b = attr    varying = {        "pos": (x, y),        "color": (r * uniforms.color_scale,                  g * uniforms.color_scale,                  b * uniforms.color_scale),    }    return varying def pixel_shader(varying, uniforms):    r, g, b = varying["color"]    bri = uniforms.brightness    return (min(r * bri, 1.0), min(g * bri, 1.0), min(b * bri, 1.0)) def lerp(a, b, t):    return a + (b - a) * t def interpolate(v_a, v_b, t):    return {        "pos": (lerp(v_a["pos"][0], v_b["pos"][0], t),                lerp(v_a["pos"][1], v_b["pos"][1], t)),        "color": (lerp(v_a["color"][0], v_b["color"][0], t),                  lerp(v_a["color"][1], v_b["color"][1], t),                  lerp(v_a["color"][2], v_b["color"][2], t)),    } def render_edge(t=0.5, width=4, height=4):    uniforms = Uniforms(brightness=1.0)    vs = [vertex_shader(attr, uniforms) for attr in TRIANGLE]    grid = [[(0, 0, 0) for _ in range(width)] for _ in range(height)]    v = interpolate(vs[0], vs[1], t)    color = pixel_shader(v, uniforms)    px = int(v["pos"][0] * (width - 1))    py = int(v["pos"][1] * (height - 1))    grid[py][px] = color    return grid, vs[0]["color"], v["color"] if __name__ == "__main__":    grid, c0, c_mid = render_edge(t=0.5)    for row in grid:        print(" ".join("OK" if p != (0, 0, 0) else "--" for p in row))    print("varying 起点颜色:", c0)    print("插值中点颜色:", c_mid)

1. TRIANGLE = [这就是 Buffer 顶点缓冲，三行数据代表三个顶点，每行依次是坐标和 RGB 颜色。
2. class Uniforms:模拟 Uniform 公告栏，brightness 和 color_scale 是全局共享参数。
3. def vertex_shader(attr, uniforms):顶点着色器入口，参数里 attr 来自 Buffer，uniforms 来自公告栏。
4. "color": (r * uniforms.color_scale,varying 输出时先把 uniform 的缩放系数作用到颜色上，体现“VS 读 uniform、写 varying”。
5. def pixel_shader(varying, uniforms):片元着色器：只读 varying 和 uniform，输出最终颜色。
6. def interpolate(v_a, v_b, t):光栅化插值，对 pos 和 color 每个分量做线性 lerp。
7. vs = [vertex_shader(attr, uniforms) for attr in TRIANGLE]逐顶点跑一遍顶点着色器，得到每个顶点的 varying。
8. v = interpolate(vs[0], vs[1], t)在边 AB 上取 t=0.5 处做插值，模拟片元接收到的 varying。
9. grid[py][px] = color把片元颜色写进像素网格，对应渲染管线的最终输出阶段。

常见误区

面试题