有人用 WebGPU 在浏览器里做了个 3D 动画编辑器，IK 和物理引擎都有
MMD，全称 MikuMikuDance，是日本开发者樋口优在 2008 年发布的一款 3D 动画制作软件，主要用来给初音未来等虚拟角色制作舞蹈和表演动画。多年来社区积累了大量资源，PMX 格式的模型和 VMD 格式的动作数据构成了整个生态的核心。
但 MikuMikuDance 只有 Windows 版本，安装配置繁琐，不支持在线协作，macOS 和 Linux 用户基本无法直接使用。
Reze Studio 试图解决这个问题。它是一个完全运行在浏览器里的 MMD 动画编辑器，不需要安装任何软件，本地跑起来就能加载 PMX 模型、编辑 VMD 动画。IK（逆运动学，让骨骼自动适配姿势的计算方式）和物理模拟也在浏览器里实现了。
项目由开发者 AmyangXYZ 独立开发，目前处于早期阶段，核心编辑流程已经可以跑通。
渲染层和技术选型
Reze Studio 的渲染层基于作者自己开发的 reze-engine，底层使用 WebGPU。
WebGPU 是浏览器里的下一代图形 API，相比更早普及的 WebGL，它更接近现代 GPU 的工作方式，支持计算着色器，对复杂场景的渲染性能更好。Chrome 113 起正式启用，Safari 和 Firefox 也陆续跟进，目前在主流浏览器里的覆盖情况已经比较稳定。
物理模拟使用的是 Ammo.js，它是 Bullet 物理引擎的 WebAssembly 移植版本。Bullet 被 Blender 和不少游戏引擎采用，Ammo.js 把它的能力带进了浏览器环境。Reze Studio 用它处理 MMD 模型里的布料、头发等软体物理效果。
编辑器界面基于 Next.js 和 shadcn/ui 构建，代码以 TypeScript 为主。
已实现的功能
模型与动画加载
支持加载本地 PMX 模型文件和 VMD 动画文件。加载后可以看到带 IK 计算和物理模拟的完整 3D 动画播放效果，骨骼姿势和布料物理均实时生效。VMD 文件支持导入和导出，编辑完成后可以把结果保存回 VMD 格式，在其他 MMD 工具里继续使用。
时间轴编辑器
时间轴提供了两种视图模式：dope sheet（显示各帧是否有关键帧的概览视图）和 per-channel 曲线编辑器（按骨骼通道分开显示动画插值曲线）。关键帧可以在当前播放位置插入和删除，贝塞尔曲线插值支持逐帧调整，用来控制动作的缓入缓出效果。
骨骼与变形管理
面板里提供骨骼层级列表，可以展开查看模型的完整骨骼结构。变形（Morph）列表显示模型支持的面部表情和形态控制选项，通过滑块或直接输入数值来调整，旋转和平移参数同理支持两种输入方式。
会话持久化
动画数据存储在浏览器的 IndexedDB 里，编辑器状态（视图设置、界面布局等）保存在 localStorage 里。刷新页面不会丢失编辑中的内容，下次打开自动恢复。
键盘快捷键
支持空格键播放/暂停，方向键逐帧移动，Home/End 键跳转到动画的首尾位置。
安装与运行
项目基于 Node.js，克隆仓库后本地运行：
git clone https://github.com/AmyangXYZ/reze-studio.git
cd reze-studio
npm install
npm run dev启动后访问 http://localhost:4000 打开编辑器。目前没有线上可直接访问的 Demo，需要本地运行。
运行前需要准备好 PMX 格式的模型文件和 VMD 格式的动画文件。PMX 模型可以从 Booth、DeviantArt 等平台找到社区分发的资源，注意各模型有自己的使用授权规则，非商业个人使用为主。
基本操作流程：
| 步骤 | 操作 | 说明 |
|---|---|---|
| 1 | 启动编辑器 | 访问 localhost:4000 |
| 2 | 加载 PMX 模型 | 通过界面选择本地模型文件 |
| 3 | 加载 VMD 动画 | 导入动作数据，模型开始播放动画 |
| 4 | 在时间轴上编辑 | 插入、删除关键帧，调整插值曲线 |
| 5 | 导出 VMD | 将编辑后的动画保存为 VMD 文件 |
举个例子：如果有一段舞蹈动画，某几个动作的衔接不够流畅，可以在时间轴里找到对应帧，调整贝塞尔曲线让缓出更自然，或者删掉冗余帧，最后导出修改后的 VMD 文件。
规划中的功能
README 里列出了一批还在规划的方向：变形权重的关键帧支持、动画图层与混合权重、自定义骨骼分组、剪切/复制/粘贴、撤销/重做、3D 变换操控器，以及更长期的动作捕捉导入、实时协作和 AI 辅助动画生成。
目前还没有撤销/重做功能，误操作后只能手动还原，实际编辑时需要注意。
写在最后
Reze Studio 做的事情在技术路线上并不常见：把一套有完整生态支撑的桌面专用工具，选用 WebGPU 这个相对新的底层 API，在浏览器里从头重建。从 IK 计算到物理模拟，这些在桌面客户端里通常依赖专用运行时的能力，这里全部在 Web 环境里实现了。
对前端开发者来说，这个项目有两个值得关注的点：一是作为 WebGPU 在真实项目里落地的参考案例，可以看到 WebGPU 渲染引擎加上 Ammo.js 物理引擎是如何组合工作的；二是 MMD 格式的模型和动画资源在社区里积累量很大，如果想做带角色动画的 Web 3D 项目，这套工具链和数据格式值得了解。
项目处于早期阶段，功能还不完整，线上没有可访问的 Demo，需要本地运行。当前更适合有兴趣参与开发，或者想研究 WebGPU + 物理引擎实现思路的开发者。
GitHub：https://github.com/AmyangXYZ/reze-studio (opens in a new tab)