渲染管线基础：CPU与GPU协作、绘制调用、顶点与片段着色器、帧缓冲区

渲染管线，说白了就是一张图从「脑子里想的」变成「屏幕上显示的」全过程。我早年刚接触动画系统时，总觉得这玩意儿是图形学才该操心的东西。直到有一次，我负责的UI动画在低端机上掉帧掉到没法看……嗯，从那以后我才明白，不懂渲染管线，你连动画为什么卡都说不清楚。

这一节，我们就把渲染管线拆开来看。不扯太深，但核心的几个环节——CPU和GPU怎么配合、Draw Call是什么、着色器干了啥、帧缓冲区怎么用——你得心里有数。

2.1 CPU与GPU的协作模式

先问一个问题：CPU和GPU，谁更忙？

答案是：CPU通常更闲，但更容易成为瓶颈。

CPU擅长串行、复杂的逻辑判断。GPU擅长并行、重复的数学计算。渲染时，CPU负责「准备数据」，GPU负责「执行绘制」。具体流程是这样的：

1. CPU 准备数据：加载模型、纹理、着色器，计算变换矩阵，剔除不可见物体。
2. CPU 发送命令：通过图形API（OpenGL/DirectX/Vulkan）向GPU发送绘制命令，也就是Draw Call。
3. GPU 接收命令：驱动层将命令放入命令缓冲区，GPU按顺序取出执行。
4. GPU 并行计算：顶点着色器、片段着色器、光栅化……所有计算在GPU内部并行完成。
5. GPU 输出结果：写入帧缓冲区，最终显示到屏幕。

这里有个关键点：CPU和GPU是异步工作的。CPU发完命令后不会傻等，而是继续准备下一帧的数据。但一旦CPU提交命令的速度超过了GPU的处理速度，命令缓冲区就会堆积，造成延迟。反过来，如果CPU提交太慢，GPU就会空转。

2.2 绘制调用（Draw Call）

Draw Call，就是CPU告诉GPU「嘿，把这块数据画出来」的那一声吆喝。每次Draw Call，CPU都要做不少准备工作：验证状态、绑定资源、更新常量缓冲区……这些开销虽然单次不大，但架不住数量多。

我见过一个项目，一个场景里有两千多个独立的网格，每个网格一个Draw Call。结果呢？CPU忙得冒烟，GPU闲得发慌。帧率直接掉到20fps以下。

指标	低Draw Call场景	高Draw Call场景
CPU耗时	低（2-3ms）	高（10-20ms）
GPU耗时	正常	可能空闲
帧率	稳定60fps	可能掉到30fps以下
典型场景	合批后的UI	大量独立小物体

怎么优化？核心思路就一个：减少Draw Call数量。

• 合批（Batching）：把多个小网格合并成一个大的。静态物体用静态合批，动态物体用动态合批或GPU Instancing。
• 纹理图集（Texture Atlas）：把多张小纹理拼成一张大纹理，减少材质切换。
• 减少材质数量：不同材质意味着不同的渲染状态，会打断合批。

2.3 顶点与片段着色器

着色器（Shader），是运行在GPU上的小程序。渲染管线里有两个最基础的着色器阶段：顶点着色器和片段着色器。

顶点着色器（Vertex Shader）

顶点着色器处理每个顶点。它负责把顶点从模型空间变换到屏幕空间，也可以处理顶点颜色、法线、纹理坐标等属性。每个顶点都会执行一次。

举个例子，一个简单的顶点着色器：

// GLSL 示例
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoord;

out vec2 TexCoord;

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

void main()
{
    gl_Position = projection * view * model * vec4(aPos, 1.0);
    TexCoord = aTexCoord;
}

你看，它只做了坐标变换和纹理坐标传递。顶点着色器不能创建或删除顶点，只能修改顶点的属性。

片段着色器（Fragment Shader）

片段着色器处理每个像素（准确说是每个片段）。它决定像素最终的颜色。片段着色器的执行次数远多于顶点着色器——一个1080p的画面，有超过200万个像素需要处理。

// GLSL 示例
#version 330 core
in vec2 TexCoord;

out vec4 FragColor;

uniform sampler2D ourTexture;

void main()
{
    FragColor = texture(ourTexture, TexCoord);
}

这个着色器只是从纹理里采样颜色。实际项目中，片段着色器里可能包含光照计算、阴影、后处理特效等复杂逻辑。

2.4 帧缓冲区（Framebuffer）

帧缓冲区，就是GPU绘制完成后存放最终图像的地方。它通常包含颜色缓冲区、深度缓冲区和模板缓冲区。

• 颜色缓冲区：存储每个像素的颜色值。
• 深度缓冲区：存储每个像素的深度值，用于遮挡剔除。
• 模板缓冲区：存储模板值，用于实现遮罩、轮廓等效果。

渲染管线最后一步，就是把帧缓冲区的内容交换到屏幕上（双缓冲机制）。

你可能会问：这跟动画有什么关系？关系大了。很多动画效果，比如过渡转场、模糊背景、截图特效，都需要操作帧缓冲区。

举个例子，实现一个「截图模糊」的动画：

1. 把当前帧的颜色缓冲区内容拷贝到一张纹理中。
2. 用这张纹理作为输入，运行一个模糊的片段着色器。
3. 把模糊结果渲染到屏幕上，作为转场动画的背景。

这个过程，本质上就是离屏渲染——不直接渲染到屏幕，而是先渲染到一个中间帧缓冲区，处理完再输出。

2.5 本章知识体系

下面这张图，把渲染管线的核心流程和本章知识点串起来了。你可以把它当作一个快速参考。

这张图把CPU、Draw Call、GPU、着色器、帧缓冲区、屏幕显示串在了一起。你对照着看，应该能对整个流程有个直观的印象。