渲染管线数据流图解详解

你有没有想过，游戏里一个角色是怎么从一堆数据变成屏幕上活灵活现的动作？这背后其实有一条看不见的流水线在默默工作——这就是渲染管线。它像工厂的装配线，把原始数据一步步加工成最终的画面。

顶点输入：一切的起点

渲染的第一步是把模型的顶点数据送进管线。这些数据通常包括位置、颜色、纹理坐标和法线。它们存在显存里，等着被 GPU 调用。就像做菜前先把食材准备好，缺了哪样都不行。

顶点着色器：变形与计算

顶点进入管线后，第一站是顶点着色器。这里会进行坐标变换，比如把模型从本地空间转到世界空间，再转到相机视角下。这个阶段还能做动画骨骼计算，让角色动起来。每个顶点独立处理，效率很高。

vec4 worldPos = modelMatrix * vec4(aPosition, 1.0);
vec4 viewPos = viewMatrix * worldPos;
vec4 glPosition = projectionMatrix * viewPos;
gl_Position = glPosition;

图元装配与光栅化

顶点处理完后，GPU 把它们按三角形、线段或点组合起来，形成图元。接着进入光栅化阶段，把三维的三角形投影到二维屏幕上，拆成一个个像素片段（fragments）。这一步决定了哪些像素需要着色。

片元着色器：上色的关键

每个像素片段都会跑一遍片元着色器，计算最终颜色。这里会采样纹理、计算光照、应用阴影。你可以理解为给画好的线稿上色，加质感，让它看起来更真实。如果开启了透明混合，还会和背景像素混合。

vec4 textureColor = texture(uTexture, vTexCoord);
vec3 lightEffect = calcLighting(vNormal, vViewDir);
fragColor = vec4(textureColor.rgb * lightEffect, textureColor.a);

测试与混合：最后的筛选

不是所有像素都能显示出来。深度测试决定谁在前面谁在后面，避免远处物体盖住近处的。还有模板测试可以做特殊效果，比如镜子或轮廓线。通过测试的像素才会写入帧缓冲，成为画面的一部分。

输出到屏幕

最终，所有处理好的像素组成一帧图像，存在帧缓冲里。等到垂直同步信号到来，整张画面被推送到显示器。这个过程每秒重复几十次，你就看到了流畅的动画。