跳到主要内容

WebGL 与 WebGPU 图形知识体系

面向已经会 DOM / TypeScript 和 Canvas 2D 心智，但没把 GPU 当生产光栅器的前端。目标不是「画出一个旋转立方体」，而是能在上下文丢失、纹理上传、读回、DPR 和能力探测这些条件下，把一帧的真相写成 GPU 程序。

不复述 MDN 方法清单，不教 Three.js 入门。每节回答：机制是什么、什么时候适用、什么时候不适用、失败时长什么样。

示例默认是浏览器里的通用 TypeScript，不绑 React、Vue、小程序、Three、Pixi。框架只是宿主。场景图可以留在 CPU，换掉的是光栅器——这是 Canvas 00 章 自建 scene 的回报。

生产默认走 WebGL2。WebGPU 在探测到 adapter 之后用，用来做计算着色和更干净的资源生命周期；不是「2026 年可以删掉 WebGL 的许可证」。

1. 先建立的心智模型​

GPU 表面的真相是 程序 + 资源，不是 path，也不是 DOM 节点：

CPU 场景 / 矩阵 / 属性数组
        ↓ 上传 buffer / texture
GPU 程序（vertex + fragment，或 compute）
        ↓ 写入 drawing buffer / 交换链纹理
合成到屏幕上的 <canvas>

改一个物体的位置，如果自己不改 buffer 或 uniform 再 draw*，屏幕不变。这点和 Canvas 2D 一样是立即提交；不同点是：提交的是 一次 draw call 的 GPU 状态，不是 CPU 上的 fill()。

因此工程上的真实工作不是记住 gl.drawArrays，而是：

  1. 管上下文种类（webgl2 / webgpu 与 2d 互斥）和丢失恢复。
  2. 管 drawing buffer 尺寸（CSS 像素 ≠ drawingBufferWidth）。
  3. 管 CPU 场景图与 GPU 资源的同步（谁是 source of truth）。
  4. 管读回：readPixels / mapAsync 会插入 CPU–GPU 同步。
  5. 管能力探测：扩展、limits、adapter 为 null 时的 WebGL2 降级。

2. 学习路径​

阶段学完后你能做什么章节
模型解释为什么 2D 和 GL 不能绑同一 canvas；能把 CSS 点变到 NDC01、05
封装自己管 VAO / buffer / texture / pipeline，而不是全局污染 gl 状态02
交互相机、GPU ID 拾取、DOM overlay03
运行时合批、避免读回、上下文丢失能活04、06、07
决策这帧该 WebGL2、WebGPU、Canvas 2D 还是 Three09
场景对着散点、粒子、后处理、视频纹理直接开工10、场景对照

3. 模块清单​

目录内容
00-总览与学习路径能力分层、和 Canvas / SVG 的边界
01-GPU管线模型管线、NDC、上下文生命周期
02-GPU资源工程buffer、纹理、FBO、shader、实例化、compute
03-交互与命中指针到 NDC、ID 缓冲、相机、overlay
04-动画与时序提交、丢失恢复
05-高清屏与布局DPR 与 drawingBuffer
06-性能与可观测合批、读回、同步点
07-浏览器差异扩展、移动端、WebGPU 降级
08-安全与导出taint、readPixels、截图
09-选型边界WebGL vs WebGPU vs 2D，自研 vs Three/Pixi/Babylon
10-生产场景散点、粒子、后处理、瓦片、视频、计算着色、三维查看

4. 通用判断原则​

  1. 先问帧的真相是不是 GPU 程序。 对象要可访问、可复制文本，走 SVG/DOM；要笔刷和像素烘焙，走 Canvas 2D；要万级实例或每像素公式，才上 GL。
  2. 场景图留在 CPU。 GPU buffer 是投影，不是文档。不要从 readPixels 反推业务对象。
  3. 读回是架构决策。 热路径上的 readPixels 等于主动插入同步。拾取能用 CPU 空间索引就不要每帧读 ID 图。
  4. 一张 canvas 一种上下文。 2D UI + GL 场景用两张叠，或 UI 也在 GL 里画。
  5. WebGPU 必须可降级。 requestAdapter() 为 null 不是异常边角，是产品路径。

5. 权威资料​

核对日期：2026-08-26