总览与学习路径
这一章把 GPU 表面放进前端图形栈，避免一上来就抄立方体教程。
这一章覆盖什么
- GPU 程序作为第三种表面（相对 Canvas 2D / SVG）
- WebGL2 与 WebGPU 的职责切分
- 学习顺序和能力分层
文档清单
| 文档 | 解决的问题 |
|---|---|
| 本 README | 路线与分层 |
| GPU 程序与三种表面 | 为什么生产代码提交的是 draw call，而不是 path |
| 场景对照 | 散点/粒子/滤镜/视频等从哪篇读起 |
能力分层
| 层级 | 表现 |
|---|---|
| L1 能画 | 能清屏、画一组三角形、换颜色 |
| L2 能对齐 | DPR、drawingBuffer、指针到 NDC 一致 |
| L3 能交互 | 相机、拾取、overlay 与 GL 画面锁在同一套矩阵 |
| L4 能跑 | 合批、无热路径读回、上下文丢失可恢复、WebGPU 可降级 |
| L5 能选 | 说得出这帧为什么不是 Canvas 2D 或 SVG |
本体系默认读者从 L1 附近起步，正文按 L2–L4 写。L1 的「旋转立方体」教程不占篇幅。