gpucanvas - 用 WebGPU 把成千上万个实时 DOM 节点画到无限画布上

gpucanvas 是一个面向 Web 前端的画布库：它把仍然活着的 DOM 节点（包括 React 组件渲染出的界面）放到一块可无限平移缩放的画布上，由 GPU 负责绘制，而点击、输入与组件状态依旧落在真实元素上。据项目自述，它同时提供一层编辑器，可以点选、逐层下钻、移动与缩放节点；可以在活组件上跑 WGSL 着色器特效与转场；可以给节点拍快照、做像素级对比；还能把画布内容整理成带 id 的 JSON 树和区域图像，供 AI agent 读取与指认。它适合需要在同一屏里并排展示大量真实界面、又希望保持这些界面可交互的前端团队，以及想把界面本身作为 agent 可读对象的工具开发者。

维护者与状态

项目由 berkantay 维护，仓库创建于 2026-11-12，最后一次提交在 2026-11-15。最新 release 为 v0.4.4，发布于 2026-11-15。截至 2026-11-15，仓库星标数为 431。项目自述把当前状态标为 early（0.4），并明确提示 API 仍可能变化，接入时应对版本升级留出余量。

主要能力

以下能力均据项目 README 与说明整理，属于项目自述，未经本站独立验证。

• 画布渲染。据项目说明，实时 React 或普通 DOM 节点由 WebGPU 在一次实例化绘制中画出；平移与缩放不触碰 DOM，而点击、键盘输入与状态更新仍能到达真实元素。
• 编辑器。README 中称，单击选中、双击逐层深入，可下钻到任意元素或 React 组件；移动与缩放带吸附参考线，轮廓以 2 CSS 像素宽绘制并跟随元素布局。编辑器本身不移动任何东西，变换结果由调用方通过 updateNode、状态或样式落地。
• 着色器特效。项目自述可在活组件上运行 WGSL：跟随指针的玻璃透镜、霜冻、抖动，按下时扩散的冲击波，以及 glitch、vhs、glow、hue、ripple、blur、pixelate、grayscale 等；也支持用 defineEffect 写自定义效果，效果可读取节点的 uv、尺寸、时间、缩放、参数与指针位置。
• 转场。据项目说明，dissolve、wipe、fade 可在 GPU 上让一个节点淡出、另一个淡入，期间两者都保持存活。
• 快照。README 中称可把任意节点存为图像、在版本之间做像素差异对比，并保留一条历史胶片带。
• Agent 视图。项目自述可把画布内容输出为带 id 的简短 JSON 树，并提供任意区域的图像，供 AI agent 读取与指认；标注方面支持元素间箭头、评论钉、便签与跟随相机的实时光标。

使用入口

仓库地址为 berkantay/gpucanvas，在线演示与文档在 berkantay.github.io/gpucanvas。

据项目说明，安装方式为：

npm install gpucanvas

React 侧从 gpucanvas/react 引入 GpuCanvas 与 CanvasNode，把节点作为子元素放入即可；编辑器通过 bindEditor 绑定到画布，可配置 pick（'node'、'element' 或自定义函数）、trigger 与 onChange、onTransform 回调；React 中另有 useEditor、pickComponents 等辅助接口。特效通过 canvas.setEffect(node, effects.ripple) 这类调用挂到节点上，传 null 恢复原样。项目还列出 getElementAt、getNodesIn、setSelection、screenToWorld 等底层方法，便于自行实现交互。

许可与限制

许可证为 MIT。

据项目说明，GPU 路径依赖 WebGPU 与 HTML-in-Canvas，需要 Chrome 157 及以上的桌面版本；更早的 Chrome 或其他 Chromium 构建需在 chrome://flags/#canvas-draw-element 中开启后重启。缺少 HTML-in-Canvas 时，演示会回退到 DOM 版本并减少节点数量。Firefox、Safari 以及所有 iPhone 与 iPad 浏览器目前都没有 HTML-in-Canvas，只能运行 DOM 版本。移动端为控制内存占用会以更小的规模启动。此外，pickComponents 与 componentOf 依赖 React 内部 fiber，生产构建通常会压缩组件名，需要组件名时应自行添加标记属性。项目自述状态为早期版本，API 仍可能变动。