01
关键洞察
TypeGPU 是 WebGPU 的上层类型安全封装，两者在 GPU 上的 执行性能完全一致——因为 TypeGPU 在构建时把 TypeScript 编译为 WGSL， 运行时直接调用原生 WebGPU API。真正的差异体现在开发效率、类型安全和内存布局管理上。 本页所有演示均在浏览器中实时运行，你可以拖动滑块、切换模式亲手验证。
💡 关键洞察：TypeGPU 是 WebGPU 的上层类型安全封装，两者在 GPU 上的执行性能完全一致。
真正的差异体现在开发效率、类型安全和内存布局管理上。
粒子数量 50,000
计算负载 5x
演示模式
实时渲染对比 LIVE GPU
🔴 原生 WebGPU 手动 WGSL + 手动布局
60
FPS
0.8
GPU 时间
ms / frame
2.1
CPU 开销
ms / frame
12
显存占用
MB
🟢 TypeGPU TypeScript + 自动布局
60
FPS
0.8
GPU 时间
ms / frame
0.4
CPU 开销
ms / frame
12
显存占用
MB
内存布局对比 INTERACTIVE
点击按钮修改结构体字段顺序，观察手动布局如何容易出错。 vec3f 实际占 16 字节（含 4 字节填充）！
🔴 WebGPU：手动计算偏移量
position (vec3f)
color (vec3f)
velocity (vec2f)
padding (浪费)
🟢 TypeGPU：声明式自动布局
position (vec3f)
color (vec3f)
velocity (vec2f)
padding (自动优化)
✅ 布局始终正确！ TypeGPU 的 typed-binary 自动计算所有 offset、stride 和 padding，WGSL 结构体定义同步生成。修改 Schema 一处，全项目自动更新。
代码复杂度实时对比 INTERACTIVE
相同功能：原生 WebGPU 约 142 行有效代码，TypeGPU 约 48 行。 切换标签页查看着色器、管线配置与内存布局三处的写法差异。
🔴 WebGPU 实现 ~142 行有效代码
🟢 TypeGPU 实现 ~48 行有效代码
GPU 执行性能历史（证明两者性能一致） LIVE
随着粒子数量增加，WebGPU 和 TypeGPU 的 GPU 执行时间曲线完全重合， 证明 TypeGPU 的运行时性能与原生 WebGPU 相同。差异仅体现在 CPU 侧的开发效率上。
核心结论
GPU 性能：完全一致
TypeGPU 在构建时将 TypeScript 编译为 WGSL，运行时直接调用原生 WebGPU API。GPU 执行性能与原生 WebGPU 完全一致，无额外开销。上图中的双曲线重合证明了这一点。
类型安全：编译时捕获
TypeGPU 消除了 JS 与 WGSL 之间的类型断层。缓冲区类型、着色器参数、内存布局在编译时即被验证，错误在代码编写阶段就被捕获，而不是在运行时以奇怪的画面异常呈现。
开发效率：提升 3 倍
相同功能下 TypeGPU 代码量减少 60% 以上。无需手动计算偏移量、无需维护 WGSL 字符串、无需担心内存对齐陷阱。团队中的任何 TypeScript 开发者都能参与 GPU 编程。