vgpu

WebGPU 虽然解锁了浏览器硬件图形算力，但底层适配器、绑定组、渲染管道等复杂配置，一直是普通前端团队落地着色器项目的巨大门槛。近日 Vercel 将内部着色器开发工具 vgpu 正式开源，一款专为 AI 编码代理优化的 TypeScript WebGPU 库，一份代码可同时跑在浏览器、无头 Node.js 环境以及 CI 自动化测试流程。

vgpu 核心定位

vgpu 主打轻量化、GPU‑优先的极简 API，将 .wgsl 着色器文件视作可直接导入的代码模块，自动完成绑定反射，省去大量手写 WebGPU 底层样板代码。同时从架构层面深度适配 AI 智能体，配套文档索引、示例检索、MCP 服务，让 Cursor 这类 AI 编码工具也能够流畅生成、调试着色器项目。

主要特性

1、类型化 WGSL 模块导入

WGSL 着色器文件可以像 TS 文件一样直接 import。工具自动反射着色器内部绑定名称、数据类型，不需要手动编写类型声明文件。官方还内置 @vgpu/wgsl‑std 标准库，提供噪声、哈希、色彩采样等开箱即用的图形函数，着色器之间也可以互相导出函数、结构体复用代码。

2、单一无状态 GPU 上下文

init() 返回独立的 GPU 句柄，所有绘制、特效、帧渲染函数都将该上下文作为入参。全程不存在隐藏全局变量，代码结构干净，便于 AI 代理理解和修改逻辑。

3、跨三套运行时环境，一份代码多处运行

• 浏览器：画布实时渲染可视化效果
• 无头 Node.js：基于 Dawn 后端，后台离屏渲染
• Mock 模拟环境：纯软件确定性适配器，CI 流水线无需物理显卡即可执行渲染快照测试

4、精简打包体积

未使用的着色器声明会在打包阶段自动裁剪。全屏特效产物压缩后仅约 25KB，包体积上限由 CI 流程强制校验管控。

5、显式帧渲染模型

帧、渲染通道、画布清除动作全部由开发者显式调用，没有隐式场景图状态，渲染逻辑可预测，非常适合 AI 代理分步执行图形任务。

6、AI‑Agent 友好配套工具链

内置完整的命令行工具，赋能大模型自主开发着色器：

• npx vgpu docs：本地离线调取文档
• npx vgpu examples：搜索、拉取官方示例源码
• npx vgpu check：着色器语法校验
• 自动输出 llms.txt、agents.md 供大模型读取项目资料
• 支持启动 MCP 服务，AI 代理可远程查询文档、下载案例

快速上手示例

浏览器端动画渲染

import { clock, init, effect, frameLoop, surface } from "vgpu";
import waveShader from "./wave.wgsl";
const gpu = await init();
const canvasSurface = surface(gpu, canvas, { dpr: [1, 2] });
const wave = effect(gpu, waveShader, { set: { speed: 2 } });
const time = clock(gpu);
frameLoop(gpu, (frame) => {
  wave.set({ time: time.time });
  frame.pass(canvasSurface, wave);
});

Node.js 无头离屏渲染

import { draw, frame, init, target } from "vgpu/node";
import triangleShader from "./triangle.wgsl";
const gpu = await init();
const colorTarget = target(gpu, { size: [256, 256], format: "rgba8unorm" });
const triangle = draw(gpu, { shader: triangleShader });
frame(gpu, (f) => f.pass(colorTarget, triangle));
const pixels = await colorTarget.read();
gpu.dispose();

安装命令

pnpm add vgpu
pnpm add -D @webgpu/types