Vercel开源vgpu：让WebGPU着色器成为TypeScript模块

人工智能

Shader 仍然是普通 Web 团队最难交付的东西。WebGPU 提供了硬件支持，却在你动手画一个像素之前就把 adapter、bind group layouts、pipeline descriptors 全扔到你面前。Vercel 在内部承担了这些成本，在 vercel.com 上构建了这些 shader，现在将成果开源。vgpu 是一个 TypeScript 库，它把 .wgsl 文件当作可导入的模块，对外暴露一个 Gpu context，并且能在浏览器 canvas、无头 Node.js、CI 快照测试中运行同一个 shader。

是的，vgpu 采用 MIT 许可证并发布到 npm，所以 pnpm add vgpu 就是完整的接入路径。它是一个库，而非托管服务，因此没有账号、没有配额、没有推理账单。

一个 context，无隐藏全局状态

init() 获取一个 adapter 和 device，并返回一个单一的 Gpu handle。其他所有东西都挂载在上面。README 中的浏览器快速开始只有四行代码：

const gpu = await init();
const surface = gpu.surface(canvas, { dpr: [1, 2] });
const wave = gpu.effect(WAVE_WGSL, { set: { speed: 2 } });
gpu.frame.loop(() => { wave.set({ time: gpu.time }); wave.draw(); });

surface 包装了 canvas，并将设备像素比限制在 1 到 2 之间。effect 将 WGSL 编译为一个全屏效果，其 uniforms 通过 set() 按 WGSL 中的名称寻址。帧是显式的：passes、clears、draws 都是调用，而非隐式的场景图状态。

WGSL 作为一个模块系统

真正的差异化在于 shader 工具链。.wgsl 文件可以像 TypeScript 模块一样导入和导出。vgpu 在构建时解析模块图、反射 bindings、移除未使用的声明并生成紧凑的 shader 源码。这消除了那些通常会与 shader 失去同步的手写 binding 声明。README 指出一个完整的全屏效果经过 gzip 压缩后只有 25 KB，而且这个预算在 CI 中强制执行。

三个运行时，一个 API

该包暴露了 vgpu、vgpu/node、vgpu/mock、vgpu/scene、vgpu/client、vgpu/core 的子路径导出。Node 路径由 Dawn 提供支持并离屏渲染：

const target = gpu.target({ size: [256, 256], format: "rgba8unorm" });
const pixels = await target.read();

这正是让 CI 渲染变得可行的原因。pixelmatch 和 pngjs 是发布包的直接依赖，与文档化的 workflow 一致：CI 编译 shader、渲染一帧无头画面、比较快照。mock adapter 是确定性的，适用于完全不应该接触 GPU 的测试。

Vercel 称这是一个面向 agent 的库，包装方式也印证了这一点。该包发布了 vgpu 二进制文件，因此 npx vgpu docs、npx vgpu examples、npx vgpu check 无需全局安装即可工作。vgpu.sh 发布了 agents.md、llms.txt 和完整的文档导出，外加一个无需 token 的 examples 发现 API，带有 OpenAPI 3.1 描述。在 vgpu.sh/api/mcp 有一个托管的只读 MCP 服务器，@modelcontextprotocol/server 是直接依赖项。仓库中还有一个可安装的 agent skill。

Vercel 开源了 vgpu，这是一个 WebGPU 库，用于在 vercel.com 上交付 shader。

一个 API surface 可以运行在浏览器中、通过 Dawn 运行在无头 Node.js 中，以及在确定性的 mock 中。

.wgsl 文件可以像 TypeScript 模块一样导入和导出，带有 binding 和 layout 的反射功能。

一个完整的全屏效果经过 gzip 压缩后为 25 KB，仓库称 CI 强制执行这一预算。

采用 MIT 许可证，在 npm 上版本为 v0.3.1，带有 CLI、llms.txt 和一个托管的只读 MCP 端点。

查看 GitHub 仓库、文档和示例，以及 npm 包。此外，欢迎关注我们的 Twitter，别忘了加入我们的 15 万+ ML SubReddit 并订阅我们的Newsletter。等一下，你用 telegram 吗？现在你也可以加入我们了。

Asif Razzaq 是 Marktechpost Media Inc. 的首席执行官。作为一个有远见的企业家和工程师，Asif 致力于将人工智能的潜力用于社会公益。他最新的努力是推出了一个人工智能媒体平台 Marktechpost，该平台以深入报道机器学习和深度学习新闻而著称，内容既有技术深度又易于被广泛读者理解。该平台每月浏览量超过 200 万次，展示了其在受众中的受欢迎程度。