一个基于 React + Tauri 的 Live2D 模型录制工具，支持动作和表情控制。
- 支持 Live2D 模型加载和显示
- 基于 PIXI.js 的高性能渲染
- 响应式布局，自动适应窗口大小
- 点击模型: 随机播放动作
- 动作分类: 按类型分组显示（如 angry、smile、thinking 等）
- 动作列表: 包含以下动作类型：
angry- 愤怒表情动作smile- 微笑表情动作thinking- 思考动作cry- 哭泣动作sad- 悲伤动作serious- 严肃表情动作shame- 害羞动作surprised- 惊讶动作wink- 眨眼动作bye- 告别动作kandou- 感动动作kime- 决定动作nf/nnf- 各种面部表情动作
- 动画参数控制: 支持设置动画索引和优先级
- 动画索引: 控制动作的播放顺序
- 优先级: 控制动作的播放优先级（0-10）
- 表情切换: 支持多种表情状态
- 实时预览: 显示当前使用的表情
- 表情分类: 按类型分组，便于选择
- 可折叠: 支持隐藏/显示控制面板
- 分类显示: 动作和表情按类别分组
- 状态显示: 实时显示当前动作和表情
- 美观界面: 半透明黑色主题，现代化设计
- 参数控制: 动画索引和优先级设置
- 透明背景录制: 支持VP9/VP8编码的WebM格式
- 模型边框录制优化: 只录制模型范围内的内容，显著提升性能
- 录制区域可视化: 可显示录制边框，实时预览录制范围
- 自动边框计算: 根据模型尺寸和位置自动计算最优录制区域
- 多格式导出: 支持WebM和MOV格式导出
- 时间线同步: 录制与时间线播放完全同步
# 开发模式
npm run dev
# 或使用 Tauri 开发模式
npm run tauri:dev- 显示/隐藏控制面板: 点击右上角的控制面板按钮
- 播放动作: 点击控制面板中的动作按钮
- 切换表情: 点击控制面板中的表情按钮
- 随机动作: 直接点击 Live2D 模型
- 在时间线中添加动作/表情/音频片段
- 点击开始录制，时间线会同步播放，动画实时被捕获
- 录制结束后点击下载 WebM 保存文件，也可点击转 MOV 转换为 ProRes 4444 格式
实时录制使用浏览器
MediaRecorder+canvas.captureStream()捕获，录制时长等于动画时长，帧率受运行时性能影响。
- 在时间线中添加动作/表情/音频片段
- 点击离线导出 WebM，程序会逐帧渲染并截图，进度条显示导出进度
- 导出完成后点击下载 WebM 保存文件
离线导出逐帧调用
applyTimelineAtTime(t)精确定位每一帧，PNG 序列由 Rust 后端 FFmpeg 合成，不受实时性能限制，不会丢帧，音频按帧边界精确对齐。导出速度比实时录制慢，但质量更稳定。
| 实时录制 | 离线导出 | |
|---|---|---|
| 速度 | 与动画等长 | 慢于实时（逐帧渲染） |
| 帧率稳定性 | 受性能影响，可能丢帧 | 每帧完整渲染，不丢帧 |
| 音频同步 | Web Audio API 实时播放 | FFmpeg 按帧精确对齐 |
| 适用场景 | 快速预览导出 | 最终成品导出 |
public/model/
├── anon/ # 爱音角色模型
│ ├── model.json # 模型配置文件
│ └── live2d/
│ └── chara/
│ ├── 037_casual-2023_rip/ # 模型文件
│ └── 037_general_rip/ # 动作和表情文件
└── soyo/ # 其他角色模型
- 前端: React 19 + TypeScript
- 渲染引擎: PIXI.js 6.5
- Live2D: pixi-live2d-display
- 桌面应用: Tauri 2.0
- 构建工具: Vite 6.3
- 录制技术: MediaRecorder API + VP9/VP8编码
- 将模型文件放入
public/model/目录 - 确保
model.json文件包含正确的动作和表情配置 - 在
Live2DView.tsx中更新模型路径
- 动作文件格式:
.mtn文件 - 表情文件格式:
.exp.json文件 - 在
model.json中配置motions和expressions字段
- 模型边框录制: 通过
createModelFrameRecorder实现区域录制 - 性能提升: 只录制模型范围内的内容，减少文件大小和处理时间
- 动态边框: 支持录制过程中动态调整录制区域
- 边框可视化: 可选的录制区域边框显示
MIT License