一、渲染管线入门：从固定到可编程的进化之路

大家好，我是这门课的主讲。今天咱们聊聊渲染管线——这个图形学里最基础、也最核心的概念。

说实话，我刚开始学图形学那会儿，看到「渲染管线」这四个字，脑子里浮现的是工厂流水线。后来发现，这个比喻还真挺贴切。你想想看，一堆原始数据（顶点、纹理、光照信息）从一端进去，经过一道道工序，最后从另一端出来一张漂亮的图像。这就是渲染管线干的事。

什么是渲染管线？

渲染管线，说白了就是GPU处理图形数据的一套固定流程。它把三维场景转换成二维图像，每一步都有明确的任务。

我习惯把它分成三个阶段来看：

• 应用程序阶段：CPU准备好数据，比如顶点坐标、颜色、纹理坐标，然后打包发给GPU
• 几何阶段：GPU处理这些顶点数据，做变换、裁剪、投影
• 光栅化阶段：把处理好的几何体转换成像素，最终输出到屏幕

嗯，这里要注意，不同教材对管线的划分方式不太一样。有的分四步，有的分五步。我个人觉得，抓住「顶点处理 → 光栅化 → 像素处理」这个主线就够了，细节可以慢慢填充。

固定管线 vs 可编程管线

这里有个重要的历史分水岭。早期的GPU用的是固定管线，后来才进化到可编程管线。

固定管线是什么？就是GPU把每一步都焊死了。你只能通过设置一些参数来调整效果，比如调调光照强度、改改雾的浓度。至于内部怎么算的，你管不着，也没法改。

我记得刚入行那会儿，公司还在用DirectX 9的固定管线。想做个简单的卡通渲染效果，折腾了半天，发现根本做不了——因为固定管线不支持非真实感渲染。那时候我就意识到，这条路走不远。

后来可编程管线出来了，情况完全变了。GPU把顶点处理和像素处理这两个关键步骤开放出来，让你自己写代码控制。这就是顶点着色器和片元着色器的由来。

对比项	固定管线	可编程管线
灵活性	低，只能调参数	高，可以写自定义逻辑
性能	稳定但上限低	优化空间大
学习曲线	简单	需要理解着色器编程
主流现状	已淘汰	所有现代引擎都在用

顶点着色器：管线的第一道关卡

顶点着色器，顾名思义，处理的是顶点数据。每个顶点都会经过它一次。

它主要干三件事：

• 坐标变换：把模型坐标转成世界坐标，再转成观察坐标，最后投影到裁剪空间
• 逐顶点光照：计算每个顶点的颜色（如果走逐顶点光照的话）
• 传递数据：把处理好的顶点信息传给下一阶段

我写一个最简单的顶点着色器给你看看：

// GLSL 顶点着色器示例
#version 330 core

layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;

out vec3 vertexColor;

uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main()
{
    // 坐标变换：模型 → 世界 → 观察 → 裁剪
    gl_Position = projection * view * model * vec4(aPos, 1.0);
    
    // 传递顶点颜色到片元着色器
    vertexColor = aColor;
}

你看，代码其实不长。核心就是那个矩阵乘法，把顶点从模型空间一路变换到裁剪空间。至于为什么是 projection * view * model 这个顺序？嗯，这个咱们后面讲矩阵变换的时候会细说。

片元着色器：决定每个像素的颜色

片元着色器（也叫像素着色器）是管线的最后一道程序化关卡。它决定屏幕上每个像素最终显示什么颜色。

为什么叫「片元」？因为一个像素可能对应多个片元——比如半透明物体叠加的时候。片元着色器处理的是这些「候选像素」，最后通过深度测试、模板测试等，才确定哪个片元真正成为像素。

来看一个简单的片元着色器：

// GLSL 片元着色器示例
#version 330 core

in vec3 vertexColor;
in vec2 texCoord;

out vec4 FragColor;

uniform sampler2D ourTexture;

void main()
{
    // 从纹理采样颜色，再乘以顶点颜色
    vec4 texColor = texture(ourTexture, texCoord);
    FragColor = texColor * vec4(vertexColor, 1.0);
}

这里有个细节：片元着色器的输出是 vec4，代表 RGBA 四个通道。你可以在着色器里做各种花哨的效果——混合纹理、计算光照、做后处理，全看你的想象力。

我曾经在做一个水下场景时，片元着色器里写了复杂的焦散效果模拟。一开始性能惨不忍睹，后来优化了一下，把一些计算挪到顶点着色器里预处理好，帧率就上来了。所以说，着色器编程不只是写对，还要写巧。

本章知识体系总览

下面这张图是我用SVG画的，把本章的核心逻辑串起来了。你可以把它当作一张「地图」，后面学细节的时候随时回来对照。

这张图里，我把渲染管线分成了五个阶段。其中顶点着色器和片元着色器是你可以编程控制的部分，也是我们这门课后面要反复深入的内容。

固定管线就像一台傻瓜相机，你按快门就行。可编程管线则像一台单反，给了你调光圈、快门、ISO的自由。但自由也意味着责任——你得知道自己在做什么，才能拍出好照片。

好了，这一章就到这里。记住这个流程，后面我们会一步步拆解每个阶段，看看GPU到底是怎么把一堆数字变成你屏幕上那幅画面的。

---

公众号:蓝海资料掘金营，微信deep3321