[Web Tool] VRMA MAKER — VRM のポーズを作って、アニメーション(VRMA)にする(WebXR対応)

[Web Tool] VRMA MAKER — VRM のポーズを作って、アニメーション(VRMA)にする(WebXR対応)

概要

VRMA MAKER は、VRM のポーズを作って、タイムラインに並べて、VRMA(VRM Animation)にするアプリです。既存のモーションを直す VRMA EDIT と違い、ゼロから作ります。

  • ポーズを作る: 骨を回す、手足の先を引っ張る、腰を動かす。握り・表情も付けられる
  • ポーズを残す: 一覧に登録して、あとで呼び出せる。ファイルにも保存できる
  • アニメーションにする: ポーズをタイムラインに置くと、間は自動で補間される。動き方も選べる
  • VR で作る: Quest などで、VRM の手足・肘・膝・腰の球をつかんで動かせる。体を動かすだけなので、カメラを回さずに済む
  • VR で、自分の動きを写して録る(MIRROR): 頭と両手の動きが VRM に写り、録画してタイムラインに入れられる。手を振る、手のひらを返す、といった動きを、体を動かして作れる
  • 書き出す: VRMA(アニメーション)、透過 PNG(ポーズの画像)
  • ファイル: VRM とポーズは、ブラウザの中だけで処理します。アップロードされません

スタートメニューから起動

トップページのスタートメニューからも起動できます。

VRMA MAKER — ポーズ作成、保存、アニメーション作成

スクリーンショット

ポーズ作成、保存、アニメーション作成

VRMA MAKER — ポーズ作成、保存、アニメーション作成 VRMA MAKER — ポーズ作成

動画(PC)

VRMA MAKER — ポーズ作成、保存、アニメーション作成

動画(WebXR/VR)

VRMA MAKER — ポーズ作成、保存、アニメーション作成(VR)

動画(WebXR モーションキャプチャー)

バージョンアップで新たにミラーモードを追加。
左ステックを押し込むとMIRRORモードになり、簡易モーションキャプチャーが可能。

VRMA MAKER — ポーズ作成、保存、アニメーション作成(VR/モーションキャプチャー)

使い方

ポーズを作る

  1. ページを開くと、VRM が読み込まれます。自分の VRM は、VRM … で選ぶか、ウィンドウにドロップします
  2. 体の白い点をクリックするか、一覧で骨を選びます
  3. 出てきた輪を回して、ポーズを付けます
  4. 指は FINGERS で点を出せます。GRIP L / R で、握りをまとめて付けられます
操作動き
R(または ROTATE)回転
G(または MOVE)移動。腰、両手・両足(IK)、肘・膝(向きを回す)
X / Y / Zその軸だけに固定(もう一度で解除)
Ctrl+Z / Ctrl+Y元に戻す / やり直し
IK (HAND / FOOT)手足の先を、水色の球で動かす
  • PIN FEET: 腰を動かしても、両足を地面に固定します(膝が曲がる)。足が届かない高さでは浮きます
  • KEEP HAND/FOOT ANGLE: IK で動かしても、手首・足首の向きを保ちます
  • MIRROR: 左右を入れ替えます

ポーズの一覧

+ ADD CURRENT POSE で、今のポーズを登録します。

  • クリック: そのポーズにする
  • ↻: 今のポーズで上書き
  • ⇥: 再生位置に、キーとして置く
  • ダブルクリック: 名前を変える
  • ⇩ LIBRARY / LIBRARY …: ファイルに保存 / 読み込み

アニメーションにする

下のタイムラインに、キー(ポーズ)を置きます。

操作動き
KEY +今のポーズを、再生位置に置く
空いているところをダブルクリックその時刻に、キーを足す
一覧からドラッグその時刻に、そのポーズを置く
キーをドラッグ時刻を動かす
EASEそのキーから、次のキーまでの動き方(LINEAR、EASE IN-OUT、IN、OUT、HOLD)
DUP / MIRROR + / LOOP KEY複製 / 左右反転して後ろに足す / 先頭のポーズを末尾に足す(ループ用)
Space再生 / 停止
← / →1 フレーム
Deleteキーの削除

間のフレームの修正: 再生位置をキーの間に置いて、ポーズ(回転・IK)を動かすと、そこに新しいキーができます。

書き出し

ボタン内容
⇩ VRMAアニメーションを、VRMA で保存します(30fps、OPTIMIZE で間引き)
⇩ ANIM (.json)編集の続き用。POSE / ANIM … で読み込めます
⇩ PNG今の画面を、画像で保存します。TRANSPARENT で背景が透明になり、PNG SIZE で大きさを選べます
⇩ POSEポーズ 1 つを、.json で保存します

VR で作る

WebXR に対応したブラウザ(Quest のブラウザなど)で開くと、左パネルに ◇ ENTER VR が出ます。押すと、VRM が目の前に立ちます。

VRMA MAKER — ポーズ作成(VR)
球動き
水色手・足の先。つかんで動かすと、肘・膝が付いてくる(IK)
黄色肘・膝。手足は動かず、曲がる向きだけが変わる
緑腰。PIN FEET が ON なら、足は地面に固定
VRMA MAKER — ポーズ作成(VR)
  • グリップ: 近くの球をつかむ。トリガー: レーザーで遠くの球をつかむ。離すと、ポーズが確定します
  • 素手(VR HANDS を TRACKING に): 親指と人差し指でつまむ
  • 両手で、別々の球を、同時につかめます
  • A: キーを置く / B: 元に戻す / X: 再生・停止 / Y: やり直し / 左スティック: 歩く / 右スティック(左右): 再生位置
  • 一覧・タイムラインの操作、胴・頭・指の回転は、VR の中ではできません。PC で触ります

VR で、自分の動きを写して録る(MIRROR)

VR の中で、自分の頭と両手の動きを、そのまま VRM に写して、録画できます。録った動きは、タイムラインに、キーとして入ります。

  1. VR に入って、腕を前に伸ばして(または、下ろしたまま)、左スティックを押し込みます。その時の姿勢が、基準になります
  2. 体を動かすと、VRM が、鏡のように動きます(自分の右手が、VRM の左手になります)
  3. A で録画を始めて、もう一度 A で止めます。録った動きは、タイムラインの後ろに、キーで入ります
  4. 左スティックを、もう一度押し込むと、終わります
操作動き
左スティックの押し込みMIRROR の入り / 切り
A録画の開始 / 停止
B基準の取り直し(立ち位置・手首の向きを、今の姿勢に合わせる)
右スティックの押し込み鏡 / 操り人形(右手が、VRM の右手)の切り替え
トリガー・グリップ手を握る
  • 頭の向きは、頭・首・胸に写ります。しゃがむと、腰が下がります(足は、地面に固定)
  • コントローラーをひねると、VRM の手首の向きが変わります。手のひらを返す、手を振る、ができます
  • 頭の前に、MIRROR の状態と、録画の秒数が出ます
  • 録った動きは、細かい揺れを間引いて、キーにします。あとで、PC で、キーを動かしたり、消したり、EASE を変えたりして整えられます
  • MIRROR の間は、球・歩く・再生は使えません

写るのは、頭と両手だけです。足・胴のひねり・指(握り以外)・表情は、写りません。

動かないとき

  • VRM が出ない: .vrm の形式か、確認してください。VRM 0.x と 1.0 の両方に対応しています
  • 指が動かない: 指のボーンが無いモデルでは、握りが出ません
  • 髪や服が止まる: PHYSICS が OFF です。ON にすると揺れます(ポーズを作るときは、OFF のほうが止まって見えます)
  • ENTER VR が出ない: ブラウザが WebXR(immersive-vr)に対応していません。Quest のブラウザで開いてください
  • MIRROR で、VRM の手首が、変な向きのまま: 基準を取った姿勢と、今の手首の向きが違います。B で、基準を取り直してください。手首をまっすぐにして、押すと、合いやすいです
  • MIRROR の録画が、荒い: 頭と両手の 3 点だけで写しているので、細かい動きは出ません。録ったあとに、PC でキーを整えてください
  • 足が浮く: PIN FEET で、足が届かない高さまで腰を上げたときです
  • 書き出した VRMA で、手足の向きが違う: 使うアプリの VRMA の対応を確認してください。VRMA MAKER は、VRM 1.0 の座標系で書き出します

よくある質問

Q. VRMA を読み込んで直せますか。 できません。VRMA は、書き出しだけです。既存のモーションを直すときは、VRMA EDIT を使ってください。

Q. 登録したポーズは、どこに残りますか。 ブラウザの中(localStorage)です。別のブラウザへ移すときは、⇩ LIBRARY で保存してください。

Q. キーは、何個まで置けますか。 決めていません。多いときは、サムネイルの作り直しが遅くなります。

Q. 読み込んだファイルは、送信されますか。 されません。ブラウザの中だけで動きます。

関連

実装は、技術記事にまとめています。

▼ [Astro] #199 MIRROR — VR の頭と両手を VRM に写して録画する(基準の取り方・IK・間引き・VRMA) https://lain-lab.com/posts/astro-199-mirror

▼ [Astro] #198 VRMA MAKER — VRM のポーズを作って、並べて、VRMA にする(IK・タイムライン・足の固定・VR) https://lain-lab.com/posts/astro-198-vrma-maker