2026.07.15
从 GLSL 到 WebGPU/TSL：节点材质迁移与性能账本
WebGL 不会立刻消失，但节点材质与 WebGPU 后端已经值得为新项目记账。这篇付费长文给出迁移决策树、TSL 对照表、粒子/后处理迁移路径与一帧性能账本。
如果你手里已经有一套跑得不错的 GLSL 顶点/片元着色器，最差的决策是「听说 WebGPU 就全盘重写」。最好的决策是：先搞清楚哪些收益来自后端、哪些来自节点图、哪些只是换皮，再决定新场景用 TSL、旧场景何时触碰。
你将读到什么
- WebGL vs WebGPU 对创意编程的真实差异（不是宣传册）
- Three.js 节点材质 / TSL：和手写 GLSL 的心智映射
- 迁移决策树：保遗留、双轨、新项目默认节点
- 从 galaxy / GPGPU 粒子到节点图的对照改写
- 性能账本：CPU 上传、compute、带宽、过绘制怎么记
- 兼容与降级：feature detect、fallback 材质、用户可感知的差
- 与《R3F 性能清单》的衔接：迁移后清单要改哪几条
前置阅读：《星系顶点着色器》《百万粒子 GPGPU》。以下是迁移与记账全文——