berkantay/gpucanvas

项目介绍

gpucanvas 把实时 DOM 或 React 节点放到无限画布上，由 WebGPU 绘制。节点仍然是真实元素，React 状态、事件、CSS 和可访问性照常工作，而平移和缩放不再每帧触碰 DOM 布局。它面向设计工具、仪表盘和代理驱动的界面，这类场景需要在一块画布上同时呈现成千上万个实时屏幕。

库会把节点按页分组、栅格化进纹理图集，并把可见节点合并为一次实例化绘制。WebGPU 或 HTML-in-Canvas 不可用时，同一套 API 回退到 CSS transform 容器。

除渲染外，它提供：

• 编辑器：通过 bindEditor 和 React 的 useEditor 选择、逐层下钻、移动和缩放元素，带吸附参考线。
• WGSL 着色器特效：glass、frost、shockwave、glitch、VHS 等内置效果，也可以用 defineEffect 写自定义着色器。
• 快照：对任意节点截图、比较像素差异，并记录历史胶片。
• 转场：在实时节点之间执行 dissolve、wipe、fade 等过渡。
• 代理视图：把视口内容序列化为 JSON，并可截取元素或区域的图像。
• 标记：箭头、图钉、注释和光标，叠加在画布上方并跟随元素。

快速使用

演示需要 Chrome 157 或更高版本。GPU 路径需要开启 chrome://flags/#canvas-draw-element 并重启 Chrome；不开启时演示会使用 1,000 个屏幕的 DOM 回退。打开在线演示，单击屏幕选中、双击逐层下钻，或按 b 运行基准测试导览。工具栏可切换着色器特效和交互模式。

在 React 项目中使用：

npm install gpucanvas

import { GpuCanvas, CanvasNode } from 'gpucanvas/react';

<GpuCanvas style={{ width: '100vw', height: '100vh' }}>
  {cards.map((card) => (
    <CanvasNode key={card.id} x={card.x} y={card.y} width={240} height={150}>
      <Card {...card} />
    </CanvasNode>
  ))}
</GpuCanvas>;

这段代码与 React 用法示例一致。本地运行演示：

bun install
bun run dev        # http://localhost:5199/?mode=gpu&n=10000

开发模式支持 mode=auto|gpu|dom，n 指定屏幕数量。

使用约束

• GPU 后端依赖 WebGPU 和 HTML-in-Canvas，目前后者是 Chrome 157 的开关。其他浏览器和配置会回退到 CSS transform 的 DOM 后端。
• 快照、capture 和完整着色器路径需要 GPU 后端；DOM 后端会拒绝快照，并用 CSS filter 近似部分效果。
• 项目处于 0.4 早期版本，API 仍可能变化。
• 按组件拾取依赖 React 内部 fiber；生产构建通常会压缩组件名，需要名称时请给组件加自定义属性。
• 停放的节点使用 content-visibility: hidden，Tab 键会跳过它们；跨页面的键盘焦点仍是待解决问题。
• 基准数据是在 M 系列 Mac、Chrome 157 下单次运行的结果，几个百分点的差距属于噪声。
• 许可证为 MIT。

HotRepo 点评

该仓库在 2026 年 11 月 12 日至 13 日的首个统计窗口内，以 107 Star、5 Fork 进入 HotRepo 的 TypeScript 新项目榜。这只是单次早期快照，不能说明持续采用。更值得关注的是它的路线：没有在 canvas 上重新实现一套 UI 工具包，而是继续以 DOM 为事实来源，围绕它增加 GPU 呈现和工具层。README 还记录了 Chrome 157 与 WICG 说明不一致的行为，对当前评估 HTML-in-Canvas 的人有参考价值。