VRM+VRMA+VOICEVOXで作る3Dゆっくり動画メーカー

作ったもの

タイトルの通りなんですが、ふと思い立って3Dアバターをつかって「ゆっくり風動画」を作って小銭稼ぎができないか、と思い立っていろいろ試してみた結果、

• モデルデータ：VRM
• モーションデータ: VRMA
• 描画エンジン: Three.js + three-vrm.js
• 音声合成エンジン: VOICEVOX
  という技術スタックに落ち着きました。

機能

• 2体の3Dモデルが会話する動画を自動的に生成
• モデル(VRM)表示
• モーション(VRMAフォーマット)再生
• VOICEVOXによるテキストからの自動音声合成
  • リップシンク
  • フェイシャルアニメーション
• カメラワーク設定
• キャラクターのテロップ表示
• 背景画像表示
• 黒板への画像・動画・テキスト表示

サンプル動画

こんな感じの動画を、設定JSONとシナリオCSVを食わせることでちょいちょいと作れます。

GitHubリポジトリ

開発環境

• Claude Code
• VSCode
• Node.js
• Python

紆余曲折

1. 最初はpython+WebGLで作り始めたけど、どうにも3Dモデルの表示がうまく行かないので挫折
2. 次にThree.jsを使って3Dモデルを表示したが、揺れ物が動かせないので挫折
3. three-vrm.jsを使ったが、一部のモーションが崩れるので挫折
4. 崩れる一部のモーションが、three-vrmのサンプル実装では表示されることに気づいて、サンプル実装に合わせてサーバーをNode.jsベースに変更

4回作り直したので、vrm-talk5というプロジェクト名になりましたｗ

VRoid Studioで出力したモデルデータとBOOTHでダウンロードしたモーションデータを使ったこともあり、three-vrm.jsがとにかく安定でした。

クレジット

• 音声合成エンジン: VOICEVOX (https://voicevox.hiroshiba.jp/)

• サンプルVRM: Vroid Studio (https://vroid.com/studio)

• サンプルVRMA:

  • pixiv 様 (Animation credits to pixiv Inc. 's VRoid Project)
  • 織部呉服 様 (https://booth.pm/ja/items/5876268)
  • スパッツ 様 (https://booth.pm/ja/items/5917598)

• サンプル背景画像:

  • 青空教室 様 (https://commons.nicovideo.jp/works/nc301161)

• サンプル音声:

  • VOICEVOX:冥鳴ひまり
  • VOICEVOX:満別花丸