vgpu Skill：一个库通吃浏览器、Node、测试的 WebGPU 开发神器
vgpu 是 Vercel Labs 出品的模块化 WebGPU 开发库，同时附带一个官方 Skill——让 AI 编码助手（Claude Code、Copilot、Cursor 等）能够精准地查阅项目本地安装版本的文档，而非依赖过时的 hosted docs。截至 2026 年 10 月初，该仓库累计约 2,400 星，9 月底刚推送了 Blender 资产生成指引和 Agent 工作流改进，在 GitHub Trending 上稳定在 WebGPU/图形学分类前列。
功能与设计原则
vgpu 的核心设计哲学是「一处编写，多处运行」：同一套 TypeScript + WGSL 代码，无需修改即可在浏览器、headless Node（Dawn 后端）、以及纯软件 mock（用于 CI 测试）三个环境中执行。它做到了三项关键工程决策：WGSL typed 导入（构建时反射，消除手写 binding 声明）、单一 Gpu 上下文（init() 返回唯一句柄，所有 API 以其为第一参数）、显式帧调度（frame.pass() 而非隐式场景图状态）。
Skill 层的核心职责是版本路由：安装命令 npx skills add vercel-labs/vgpu，Skill 指示 Agent 先查项目本地的 package.json / lockfile 确认 vgpu 版本，再用 pnpm exec vgpu docs cat ... 读取该版本的文档，而非请求 hosted docs（那个永远是最新的，但可能与项目锁定版本不匹配）。
认可度
截至 2026 年 10 月 6 日，vercel-labs/vgpu 的核心数据：
- GitHub Star：约 2,400（stargazers.cn / GitHub Orgs 页实时数据）
- Forks：119
- 最近更新：2026 年 10 月 3 日（Blender 资产工作流 + Agent 迭代改进）
- Skill 单独 Star（skills 子目录）：约 2,326（SkillsMP 收录数据）
- 维护方：Vercel Labs（Vercel 官方实验性项目，质量有背书）
链接
GitHub 仓库：https://github.com/vercel-labs/vgpu
Skill 安装命令：npx skills add vercel-labs/vgpu
原作者
Vercel Labs——Vercel 官方实验室，专注探索前端工程和 AI 编码工具的前沿项目。vgpu 是其 2025-2026 年在 WebGPU 图形学方向的旗舰作品，同时维护着 fx（Zig 编写的高速 CLI 工具）、scriptc（TypeScript→Native 编译器）等多个高星开源项目。
介绍
WebGPU 作为下一代 GPU 编程标准，在浏览器端已获主流支持，但在 Node.js 环境和 CI 测试中运行 Shader 代码长期缺乏统一方案。vgpu 填补了这个空白：开发者用 TypeScript 写渲染逻辑，用标准 WGSL 写 Shader，init() 自动检测运行环境（WebGL2/WebGPU 浏览器适配器 / Dawn Node 适配器 / 纯软件 mock），所有后续调用用同一个句柄，无需写平台分支代码。
vgpu 在 API 设计上极度克制：25KB gzipped 的完整全屏特效体积由 CI 强制限制；内置 bundle / target pre-warm / in-place set() / ping-pong / MSAA/depth 等默认优化，Shader 作者从第一天起就用上生产级性能参数。@vgpu/wgsl-std 还附带了 hash、noise、color、sampling 等常用 WGSL 工具函数，像标准库一样导入复用。
对于 AI 编码助手，vgpu 提供了三类 Agent-ready 资源：Skill（npx skills add vercel-labs/vgpu）做文档版本路由、llms.txt / llms-full.txt 供 LLM 直接消费文档、vgpu.sh/examples 的示例 Gallery 可通过 CLI 搜索拉取到本地。
特点
- typed WGSL 导入：
.wgsl文件可以像 TypeScript 模块一样 import/export，反射自动维护 binding 声明，零手写代码 - 单一 Gpu 上下文：
init()返回唯一句柄，所有 API（draw、effect、frame、surface、target……）以它为第一参数，无隐藏全局状态 - 三运行时统一：浏览器（Dawn WebGPU）、headless Node（Dawn）、deterministic mock（无 GPU）——同一份代码覆盖三种场景
- CI 强制体积上限：完整全屏 Shader 特效 ≤ 25KB gzipped，构建流水线强制检查
- 显式帧调度：
frame.pass(target, effect)而不是隐式状态机，渲染过程完全可预测、可调试 - @vgpu/wgsl-std 标准库：hash、noise、color、sampling 等常用 WGSL 函数直接导入复用
- Skill 版本路由：强制 Agent 读取项目锁定版本的文档，避免用最新 hosted docs 指导旧版本项目导致 API 不匹配
使用方法
安装 Skill
npx skills add vercel-labs/vgpu
安装库
pnpm add vgpu
pnpm add -D @webgpu/types
最小示例（浏览器）
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);
});
Agent 用 Skill 查阅文档
# 确认项目本地版本
pnpm exec vgpu --version
# 查阅该版本的 getting-started
pnpm exec vgpu docs cat getting-started.md
# 按主题搜索
pnpm exec vgpu docs find "effect"
# MCP 方式（需先启动）
pnpm exec vgpu mcp
使用场景与人群
适用场景：
- WebGPU Shader 开发（浏览器端 3D 渲染、GPU 加速计算）
- 需要在 Node.js 环境下运行 GPU 代码（服务端渲染、性能计算）
- CI 测试 Shader 逻辑（mock adapter，无需真实 GPU）
- AI 编码助手辅助 WebGPU 项目（文档精准路由、示例拉取）
目标用户：
- 前端图形学开发者 / 游戏开发者
- 需要 GPU 加速能力的 AI Agent 项目维护者
- 正在将 WebGL 迁移到 WebGPU 的团队
- 对 Shader 性能优化有需求的创意编码者
输入与输出案例
案例一：WGSL Shader 导入与类型安全
输入（在 Claude Code 中）：
“帮我写一个基于时间变化的 noise grain 特效”
Agent 通过 Skill 查阅 wgsl-std/hash 文档后输出：
// grain.wgsl
import { hash2 } from "@vgpu/wgsl-std/hash";
export fn grain(uv: vec2f, time: f32) -> f32 {
return hash2(uv * time).x;
}
Agent 无需手写 binding 声明，构建时 WGSL 反射自动将 hash2 的参数名、类型与 JS 侧 effect() 的 set 对象对应起来。
案例二：多环境复用
同一份 wave 渲染代码：
- 浏览器：
const gpu = await init()→ Dawn WebGPU 适配器 - Node headless：
import { init } from "vgpu/node"→ Dawn 软件渲染 - CI test：
import { init } from "vgpu/mock"→ 确定性 mock，无需 GPU
frame.pass(canvasSurface, wave) 的调用方式在三端完全一致，Agent 只需写一次渲染逻辑，测试和生产环境无缝切换。
评论区
登录后可评论。