第2章 CPU 准备 vs GPU 绘制
文档摘要
第 2 章 · CPU 准备 vs GPU 绘制 章节摘要：WebGL 每一帧都是一次跨芯片交接：CPU 负责准备顶点、索引、纹理像素、Uniform 数值并提交命令，GPU 负责跑着色器、光栅化、写帧缓冲。本章不按 API 清单平铺，而按数据停在哪一端来拆：管线总览、顶点与图元、缓冲区、着色器编译与运行、Attribute 对 Uniform、纹理解码对采样。读完你应能在一帧时间线上标出“上传、绑定、draw、着色”各自的位置，并解释为什么每帧改缓冲和每帧只改 Uniform 是两种完全不同的账单。
第 2 章 · CPU 准备 vs GPU 绘制
章节摘要：WebGL 每一帧都是一次跨芯片交接：CPU 负责准备顶点、索引、纹理像素、Uniform 数值并提交命令，GPU 负责跑着色器、光栅化、写帧缓冲。本章不按 API 清单平铺，而按数据停在哪一端来拆：管线总览、顶点与图元、缓冲区、着色器编译与运行、Attribute 对 Uniform、纹理解码对采样。读完你应能在一帧时间线上标出“上传、绑定、draw、着色”各自的位置，并解释为什么每帧改缓冲和每帧只改 Uniform 是两种完全不同的账单。
读前必看
阅读完本章，你应当能够：
- 画出从 CPU 提交到 GPU 写屏的简化管线，并标出可编程阶段在哪
- 区分顶点、图元、索引各自由谁组装、由谁消费
- 说明缓冲区的 STATIC 与 DYNAMIC 提示如何对应 CPU 写入频率
- 对照着色器在 CPU 上的编译链接与在 GPU 上的逐顶点逐片元执行
- 用通道观点区分 Attribute、Uniform、varying、纹理采样
- 指出纹理在 CPU 解码与 GPU 滤波之间的代价差
核心概念速览
金句：WebGL 性能问题里有一半不是“GPU 不够强”，而是 CPU 每帧还在当搬运工，GPU 只是在等货。
| 数据 | 主要停在哪端 | 每帧还该动吗 |
|---|---|---|
| 静态网格 | GPU 缓冲 | 否，只绑定 |
| MVP 矩阵 | CPU 算完再 Uniform | 物体或相机动才写 |
| 纹理像素 | GPU 采样 | 否，除非视频 |
| 着色器源码 | CPU 编译一次 | 否，禁止热路径编译 |
子章节导航
2.1 渲染管线：CPU 提交 vs GPU 执行
把规范里的管线画成两端：命令录制在 CPU，顶点与片元阶段在 GPU。对照一次 draw 前后哪些工作已经结束、哪些才刚开始。
2.2 顶点图元：CPU 组装 vs GPU 消费
点、线、三角形由 CPU 决定拓扑，GPU 按拓扑消费顶点。对照 drawArrays 与 drawElements，以及 CPU 侧重复顶点与 GPU 侧索引复用。
2.3 缓冲区：CPU 写入 vs GPU 常驻
缓冲是显存里的数组。对照一次写入多次绘制，与每帧流式写入。提示枚举不是协议，但是给驱动的频率信号。
2.4 着色器：CPU 编译 vs GPU 运行
编译链接发生在 CPU 与驱动，失败表现为日志；运行发生在 GPU，失败表现为画面错。对照这两种失败为什么不能用同一套方法查。
2.5 Attribute vs Uniform 两条通道
按顶点变的走 Attribute，按绘制调用变的走 Uniform。对照错误地把每顶点颜色塞进 Uniform、或把 MVP 塞进 Attribute。
2.6 纹理：CPU 解码 vs GPU 采样
图片在 CPU 解成像素，上传后由 GPU 按 UV 滤波。对照格式、mipmap、各向异性这些决策分别打在哪一端。
子章节之间的逻辑关系
六节沿同一条数据河往下走。先建立两端，再看河里漂的是顶点还是像素，再看装河水的容器（缓冲）、加工的程序（着色器）、两种进水口（Attribute/Uniform），最后看另一条支流：纹理。后一节默认前一节的分界还在。
2.1 两端分界 └► 2.2 顶点从哪来 ─► 2.3 装进缓冲 ─► 2.4 用程序加工 └► 2.5 两种进水口 └► 2.6 纹理支流
本章六节可以当成一帧的拆解手册。调试画面错误时，按 2.1 的两端决定你是该看 JS 日志还是该看着色输出；按 2.3 决定仓库有没有被写过；按 2.5 决定数据走错了哪根管子。不要从片元公式倒着猜，除非你已经确认 CPU 提交的合同是对的。
引擎用户请把“几何”映射为 VAO 加缓冲，“材质”映射为 program 加 Uniform 加纹理单元。映射一旦建立，本章不再抽象。
把本章当成体检表。画面错先问提交合同：缓冲有没有写、程序有没有链、通道有没有 enable。画面对但慢，再问频率：每帧写仓还是只写 Uniform，纹理有没有 mip。体检表比着色器论文更接近日常。引擎把体检表藏进对象，出问题时仍要按这六节把对象拆回通道。
六节读完应能在纸上画一条河：CPU 数组进仓，解释成 Attribute，VS 加工，光栅成片元，FS 采样纹理，写出颜色。Uniform 是河岸上的闸门，一次 draw 开一档。闸门与河水不要倒灌。倒灌就是把 MVP 塞进顶点色、把每顶点色塞进循环 draw。第 2.5 节专门挡这件事。
若只读一节，读 2.1。它给了后面所有节共用的尺子：提交在 CPU，执行在 GPU。尺子在手，缓冲、着色器、纹理的对照才不是名词游戏。引擎用户同样适用，只是提交被藏进 render。藏住不等于搬家。
调试口诀：先合同后公式。合同是缓冲写了没有、程序链了没有、通道 enable 了没有。公式是点积与采样。合同错时公式再对也是黑或炸。口诀让你少改着色器。引擎用户把口诀翻译成：几何上传了吗、材质编译了吗、贴图槽指对了吗。翻译后仍是同一把尺子。
本章六节建议连读。跳着读时至少保留 2.1 与 2.5：前者给尺子，后者给通道。没有尺子和通道，纹理与缓冲节会退化成 API 说明书。说明书解决不了每帧写仓还是写 Uniform 这种现场问题。把尺子画在手边，出 bug 先量两端再改公式。
六节连读一遍的时间，通常比在错误通道上调一夜更短。短的是阅读，长的是误诊。把阅读放在误诊前面。
前置知识与后续延伸
- 前置知识：第 1 章已选定版本与封装层级；本章例子按裸调用写，引擎用户把对象映射回缓冲与程序即可。
- 后续延伸：第 3 章处理仍留在固定阶段的测试与混合，以及离屏这份“第二次 GPU 绘制”；第 4 章的效果路线全部建立在本章的通道模型上。