在 p5.js 里教 GPU 编程：现在有计算着色器了
来源: davepagurek.com — 2026-04-03
概述
p5.js 维护者 Dave Pagurek 认为 GPU 编程的门槛高得离谱——在 Vulkan 里从零画一个三角形要写上千行代码，于是他把 p5 的着色器系统 p5.strands 设计成一套脚手架：只要求你会循环、分支、变量和函数，就能写出自己的滤镜、顶点动画与粒子系统。配合 WebGPU 的存储缓冲区与计算着色器，他把 Nature of Code 里的反弹球与 boids 群集算法都搬进了 p5，在一台 M1 MacBook Pro 上能跑到一万个代理，而学习者完全不必先理解着色器管线。
核心要点
- 计算机图形教育正处在尴尬位置：GPU 早已不只是画三角形，而是通用并行计算平台，但要入门需要大量背景知识。
- 作者的思路是脚手架式学习：先隐藏暂时不相关的部分，让学习者每一步都有产出，之后再逐层撤掉脚手架。
- p5.strands 只要求你会循环、分支、变量、函数和一点 JavaScript 数学，不需要先懂着色器管线、uniforms 或 varying。
- 写自定义滤镜只需用 buildFilterShader 加一个函数，通过 filterColor.texCoord 拿到像素坐标，就能做出渐变、噪声与动画。
- 从滤镜到形状只需改用 worldInputs 块修改顶点位置，配合 buildGeometry 与 model(geometry, count) 就能一次画很多实例，用 instanceID() 区分。
- WebGPU 阶段引入 createStorage 与 uniformStorage，把位置数据放进存储缓冲区，再从着色器里按 instanceID 读取，甚至可以直接从 SVG 路径采样点位。
- 计算着色器 buildComputeShader 相当于「把 for 循环的每一轮同时跑」，反弹球、球球碰撞乃至 boids 群集都只需写一轮迭代的逻辑。
- 教学上的关键一跃其实是「同一段代码要在每个像素上运行」这个反转，p5 让学习者先专注于此，而非一上来就被管线细节淹没。
- p5.strands 在 WebGL 下已经可用，计算着色器将在 p5.js 2.3 发布；每个代码块也都能改写成 GLSL 或 WGSL，并可用 inspectHooks() 查看生成的底层实现。
金句
计算着色器有点像 for 循环，但它不是一轮接一轮地执行，而是把所有轮次一次性并行跑完。
👍 0
👎 0
← 返回 Lobsters 首页