[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 の手足・肘・膝・腰の球をつかんで動かせる。体を動かすだけなので、カメラを回さずに済む
  • 書き出す: VRMA(アニメーション)、透過 PNG(ポーズの画像)
  • ファイル: VRM とポーズは、ブラウザの中だけで処理します。アップロードされません

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

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

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

スクリーンショット

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

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

動画(PC)

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

動画(WebXR/VR)

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 で触ります

動かないとき

  • VRM が出ない: .vrm の形式か、確認してください。VRM 0.x と 1.0 の両方に対応しています
  • 指が動かない: 指のボーンが無いモデルでは、握りが出ません
  • 髪や服が止まる: PHYSICS が OFF です。ON にすると揺れます(ポーズを作るときは、OFF のほうが止まって見えます)
  • ENTER VR が出ない: ブラウザが WebXR(immersive-vr)に対応していません。Quest のブラウザで開いてください
  • 足が浮く: PIN FEET で、足が届かない高さまで腰を上げたときです
  • 書き出した VRMA で、手足の向きが違う: 使うアプリの VRMA の対応を確認してください。VRMA MAKER は、VRM 1.0 の座標系で書き出します

よくある質問

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

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

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

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

関連

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

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