WebGPU实战：基于Rust/WASM构建浏览器端专业非线性视频编辑器

这是一款完全开源、在浏览器中运行的非线性视频编辑器（NLE）。它无需安装，真正做到开箱即用。借助 WebGPU 和 Rust/WASM 的强大组合，即使是高分辨率视频和复杂特效，也能实现流畅的编辑体验。

软件已打包好，下载解压后即可直接使用。启动方式如下：

node server/index.mjs

启动后，在浏览器中访问 http://localhost:3000/ 即可进入编辑器。

核心亮点

• 零安装，直接运行：打开浏览器即可使用，功能完整。
• GPU 加速：利用 WebGPU + Rust/WASM 的技术栈，实现了接近原生应用的高性能。
• 多轨时间线：支持无限视频和音频轨道，操作直观。
• 关键帧动画：支持贝塞尔曲线缓动，动画表现丰富细腻。
• 实时效果：亮度、对比度、饱和度、模糊、色调等效果可实时预览。
• 本地优先：所有编辑素材都保存在本地浏览器中，保障了用户的隐私与数据安全。

技术架构

项目的技术栈选择颇具匠心，旨在充分发挥浏览器的计算潜力。

• UI 层：采用 React 和 TanStack Start 构建，负责处理所有的用户交互逻辑。
• 渲染引擎：核心的视音频处理和合成逻辑由 Rust 编写，并编译为 WebAssembly (WASM) 模块运行，高效处理计算密集型任务。如果你对 Rust 的高性能与安全性感兴趣，可以深入了解更多。
• GPU 渲染：通过 WebGPU API 直接调用显卡资源，实现高性能的视频帧处理和特效渲染。这是实现流畅编辑体验的关键，标志着浏览器 前端 图形能力的重大飞跃。

系统要求

• 浏览器：Chrome 113+ 或 Edge 113+（需要浏览器支持 WebGPU）。
• 内存：8GB 及以上（处理高清视频建议 16GB）。
• GPU：需要现代显卡，并支持 WebGPU 或 WebGL2。

使用体验

• 首次加载：由于需要下载 WASM 模块，首次打开页面时加载速度稍慢。
• 操作流畅度：核心模块加载完成后，界面交互非常流畅，时间线拖拽、素材导入等操作响应迅速。
• 效果预览：应用滤镜、调整参数时的预览响应几乎是实时的，效果可媲美一些主流的桌面视频编辑软件。

Tooscut 为我们清晰地展示了在浏览器中进行专业视频编辑的全新可能性。它无需安装、开箱即用，并且性能已经非常接近原生应用。对于需要随时随地、快速进行轻量级专业视频创作的用户和开发者而言，这无疑是一款非常值得关注和尝试的工具。

欢迎在 云栈社区 交流更多关于 WebGPU、WASM 及前沿前端技术的实践心得。

项目地址：https://github.com/tooscut/tooscut

下载链接：
https://pan.baidu.com/s/1OwkEnt3w0Bts0Z3bGFqgCg?pwd=sbjg