VRM制作ツール群(ImageToVRM / モーションキャプチャー)

画像1枚からVRMアバターを作り、Webカメラでそのまま動かせるツール群。

VRMモーションキャプチャーの画面。左のパネルに「VRMモデルを読み込む」「カメラを開始」「ポーズをリセット」のボタンと、上半身モード・指くっきりモード・背景の設定が並び、右の広い領域に「ここに .vrm ファイルをドラッグ&ドロップ」と表示されている。

VRMアバターを「作る」と「動かす」の両方を、なるべく手軽に済ませるために作ったツール群です。ImageToVRMは画像1枚からヒューマノイドボーン入りのVRM 0.xを生成します。ブラウザだけで完結する2Dモード(紙人形型)と、ローカルAI(TripoSR + CUDA)で写真を立体化する3Dモードの2種類を用意しました。モーションキャプチャー側はブラウザだけで動き、MediaPipeでWebカメラ映像から体・頭・表情(まばたき・口の形・視線)・両手の指をトラッキングしてVRM 0.x / 1.0 のモデルをリアルタイムに動かします。画像や映像を外部サーバーに送らず、すべてローカルで処理する設計にしています。

「作る」側を、機材の有無で2モードに分けた

画像からVRMアバターを作るとき、必要な品質と手持ちの機材は人によってまったく違います。そこでImageToVRMには2つのモードを用意しました。

2Dモードは立ち絵イラストから紙人形型のVRMを作ります。ブラウザだけで完結し軽いので、GPUの無いPCでも動きます。3DモードはローカルのAIで写真やイラストを立体化し、立体メッシュのVRMを出力します。こちらはNVIDIAのGPUが必要で、初回にPython環境とPyTorch、生成モデルを合わせて数GBぶん用意します。

3Dモードには入力の選択肢を複数用意しました。写真1枚から約20秒で生成する高速な方式と、正面を必須として左側面・背面・右側面のキャラ設定画を足せる高品質な方式です。後者はビューを足すほど背面と側面の形状・テクスチャが正確になります。他のサービスで作った3DモデルのファイルをそのままドロップしてVRM化することもできます。

画像も映像も外に出さない

顔写真やキャラクターの立ち絵は、どこかのサーバーに送りたくない種類のデータです。ImageToVRMもモーションキャプチャー側も、処理をすべて手元で完結させています。AIによる立体化もローカル実行で、画像が外部に送信されることはありません。

出力するVRMは一般的なVRM対応アプリでそのまま読み込めるので、作ったあとの使い道を縛りません。

配信で実際に使うと困る部分を潰す

モーションキャプチャー側はブラウザだけで動き、Webカメラの映像から全身のポーズ、頭の向き、表情(まばたき・口の形・視線)、両手の指をトラッキングします。ただし、素直に作っただけでは配信で使ったときに困る点が出たので、専用の切り替えを足しました。

  • 上半身モード: 脚と腰の位置を固定してカメラを胸から上に寄せる。上半身しか映していないときに、推定できない下半身が暴れるのを止められる
  • 背景の単色化: グリーンバックやブルーバック、任意の単色に変更でき、単色のときは床のグリッドも自動で消える。OBSのクロマキーでそのまま抜ける
  • 指くっきりモード(既定でON): 指の曲げを伸ばす/曲げるの方向へ強調し、じゃんけんの形がはっきり出る。繊細な中間のポーズを優先したいときはOFFにできる

起動方法まで用意する

HTMLファイルを直接開いても動く場合はありますが、カメラの許可まわりの挙動がブラウザによって違います。そのため起動用のバッチファイルを用意し、ローカルサーバー経由で開く方法を推奨にしました。初回はトラッキング用のモデルのダウンロードで数十秒かかるため、その待ち時間も説明に明記しています。

使用技術
  • JavaScript
  • Three.js
  • WebGL
  • MediaPipe
  • VRM 0.x / 1.0
  • Python
  • TripoSR
  • CUDA
担当
  • 企画
  • VRM生成の実装
  • トラッキング実装
  • ローカル完結の設計
成果
  • 画像1枚からVRM 0.xを生成する2D/3Dの2モードを実装
  • 体・表情・指のトラッキングをブラウザだけで実現
  • 画像・映像を外部送信しないローカル処理
制作期間
制作済み
ステータス
制作済み

← 制作実績の一覧へ戻る