📚 课程目录第2章渲染管线基础

渲染管线基础：CPU/GPU协同工作流程、顶点着色器、片段着色器、光栅化

渲染管线，说白了就是屏幕上一帧画面从无到有的完整流水线。我刚开始做座舱优化时，总觉得这玩意儿是图形学理论，跟实际调优关系不大。后来被一个掉帧问题折磨了两周，才发现问题出在顶点数据提交阶段——嗯，从那以后我再也不敢轻视这条管线了。

座舱显示跟游戏渲染不太一样。游戏追求每秒60帧甚至120帧，座舱更看重稳定性和响应速度。你想想看，导航地图卡一下、仪表指针跳一下，用户马上就能感知到。所以理解渲染管线的每个环节，是性能调优的第一步。

CPU/GPU协同工作流程

渲染不是CPU一个人干完的，也不是GPU自己包办的。它们俩分工明确：

角色	负责内容	典型瓶颈
CPU	应用逻辑、场景管理、提交绘制命令（Draw Call）	Draw Call过多、数据拷贝开销
GPU	顶点处理、光栅化、像素填充、后处理	填充率不足、着色器复杂度高

我个人习惯把CPU和GPU的协作比作「生产车间」：CPU是计划员，负责拆解任务、打包指令；GPU是生产线，负责批量处理。CPU把一帧的绘制命令打包成命令缓冲区（Command Buffer），然后通过驱动提交给GPU。GPU拿到命令后，开始真正的渲染工作。

关键指标：CPU提交时间 vs GPU渲染时间

如果CPU提交一帧需要8ms，GPU渲染需要10ms，那这一帧的总耗时就是10ms（并行流水线取最大值）。座舱场景下，我建议把CPU提交时间控制在5ms以内，GPU渲染时间控制在11ms以内（对应60fps的16.6ms预算）。

我在项目中遇到过一个问题：仪表盘上的指针动画，每帧都要更新顶点位置。CPU端每次都要重新计算并上传顶点数据，导致CPU提交时间飙到12ms。后来改成预计算+顶点缓冲对象（VBO）更新，CPU时间降到了3ms。这就是典型的CPU-GPU协同优化。

顶点着色器

顶点着色器是GPU管线的第一站。它处理每个顶点，主要做三件事：

坐标变换：把模型坐标转成世界坐标，再转成观察坐标，最后投影到裁剪空间
顶点属性传递：把法线、纹理坐标、颜色等数据传给后续阶段
逐顶点光照计算（可选）：如果使用Gouraud着色，光照就在这算

座舱场景中，顶点着色器的负载通常不高。但有一种情况要注意：导航地图的3D建筑模型。这些模型动辄几万到几十万个顶点，如果每个顶点都做复杂的坐标变换，GPU压力会很大。

// 一个典型的顶点着色器（GLSL）
#version 300 es
layout(location = 0) in vec3 aPosition;
layout(location = 1) in vec2 aTexCoord;

uniform mat4 uModelViewProjection;

out vec2 vTexCoord;

void main() {
    gl_Position = uModelViewProjection * vec4(aPosition, 1.0);
    vTexCoord = aTexCoord;
}

这个着色器只做了一次矩阵乘法，非常简单。但如果你在座舱项目里看到顶点着色器里写了循环、条件分支或者纹理采样，那就要警惕了——这些操作在顶点着色器里开销很大。

避坑指南：顶点着色器中的纹理采样

我曾经在一个HUD项目中，看到同事在顶点着色器里采样高度图来偏移顶点位置。结果GPU顶点处理时间从0.5ms涨到了4ms。顶点着色器不是不能采样纹理，但采样次数要严格控制。座舱场景下，我建议顶点着色器只做线性变换和简单的属性传递。

光栅化

光栅化是把顶点组装成的三角形，转换成屏幕上的像素片段。这一步是GPU的硬线逻辑，开发者能干预的空间不大。但理解它的工作原理，对性能调优很有帮助。

光栅化主要做两件事：

三角形遍历：判断哪些像素被三角形覆盖
属性插值：对顶点属性（颜色、纹理坐标、法线等）做重心坐标插值

座舱场景中，光栅化的性能瓶颈通常来自过绘制（Overdraw）。比如仪表盘上的半透明指针，如果指针下面还有多层UI元素，GPU就要反复计算同一个像素。

过绘制级别	典型场景	优化建议
1x（无过绘制）	不透明UI、纯色背景	理想状态
2x-3x	半透明弹窗、阴影效果	减少重叠层数
4x以上	复杂仪表盘、多层地图	必须优化

我记得有一次调一个仪表盘项目，GPU渲染时间一直下不来。用工具一看，过绘制达到了5x。原因是仪表盘上的指针、刻度、数字、背景用了四层半透明叠加。后来改成先渲染不透明层，再单独处理半透明层，过绘制降到了2x，GPU时间从14ms降到了8ms。

片段着色器

片段着色器（也叫像素着色器）是管线的最后一站。它处理每个像素片段，决定最终颜色。座舱场景中，片段着色器往往是GPU性能的瓶颈所在。

片段着色器的常见操作：

纹理采样：从纹理中读取颜色值
光照计算：逐像素光照、阴影计算
颜色混合：透明度混合、颜色校正
后处理效果：模糊、色调映射、抗锯齿

优化技巧：减少纹理采样次数

片段着色器里每多一次纹理采样，GPU的填充率就会下降一截。座舱场景中，我建议把多个纹理合并成一张纹理图集（Texture Atlas），或者用纹理数组（Texture Array）来减少采样次数。另外，能用LOD（层级细节）的地方一定要用，远处的纹理用低分辨率版本，能省不少带宽。

为什么片段着色器这么容易成为瓶颈？因为它的执行次数跟屏幕分辨率直接相关。1920x720的屏幕，一帧就有138万个像素需要处理。如果每个像素都做复杂的计算，GPU很快就撑不住了。

// 一个低效的片段着色器示例
#version 300 es
precision mediump float;

in vec2 vTexCoord;
uniform sampler2D uTexture1;
uniform sampler2D uTexture2;
uniform sampler2D uTexture3;

out vec4 fragColor;

void main() {
    vec4 color1 = texture(uTexture1, vTexCoord);
    vec4 color2 = texture(uTexture2, vTexCoord);
    vec4 color3 = texture(uTexture3, vTexCoord);
    // 三次纹理采样，开销很大
    fragColor = (color1 + color2 + color3) / 3.0;
}

这个着色器每像素采样三次纹理。在座舱场景中，如果屏幕上有大量这样的像素，GPU带宽很快就会打满。我建议的做法是：在CPU端预合成纹理，或者用纹理数组一次采样搞定。

本章知识结构

下面这张图展示了渲染管线的完整流程，以及每个阶段的关键优化点：

核心要点回顾

CPU负责提交命令，GPU负责执行渲染，两者并行工作
顶点着色器做坐标变换，座舱场景中负载通常不高
光栅化是硬线逻辑，过绘制是主要优化方向
片段着色器是性能瓶颈高发区，纹理采样次数要严格控制

理解渲染管线，不是为了写更炫酷的着色器，而是为了在性能出问题时，能快速定位瓶颈在哪。我个人习惯的做法是：先用性能分析工具看CPU和GPU的时间分布，如果GPU时间超标，再逐段排查顶点着色器、光栅化、片段着色器。这样一步步来，问题基本都能找到根因。