[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
VRM のポーズを作って、並べて、VRMA にするブラウザアプリ。
lain-lab.comスタートメニューから起動
トップページのスタートメニューからも起動できます。
スクリーンショット
ポーズ作成、保存、アニメーション作成
動画(PC)
動画(WebXR/VR)
動画(WebXR モーションキャプチャー)
バージョンアップで新たにミラーモードを追加。
左ステックを押し込むとMIRRORモードになり、簡易モーションキャプチャーが可能。
使い方
ポーズを作る
- ページを開くと、VRM が読み込まれます。自分の VRM は、
VRM …で選ぶか、ウィンドウにドロップします - 体の白い点をクリックするか、一覧で骨を選びます
- 出てきた輪を回して、ポーズを付けます
- 指は
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 が目の前に立ちます。
| 球 | 動き |
|---|---|
| 水色 | 手・足の先。つかんで動かすと、肘・膝が付いてくる(IK) |
| 黄色 | 肘・膝。手足は動かず、曲がる向きだけが変わる |
| 緑 | 腰。PIN FEET が ON なら、足は地面に固定 |
- グリップ: 近くの球をつかむ。トリガー: レーザーで遠くの球をつかむ。離すと、ポーズが確定します
- 素手(
VR HANDSをTRACKINGに): 親指と人差し指でつまむ - 両手で、別々の球を、同時につかめます
A: キーを置く /B: 元に戻す /X: 再生・停止 /Y: やり直し / 左スティック: 歩く / 右スティック(左右): 再生位置- 一覧・タイムラインの操作、胴・頭・指の回転は、VR の中ではできません。PC で触ります
VR で、自分の動きを写して録る(MIRROR)
VR の中で、自分の頭と両手の動きを、そのまま VRM に写して、録画できます。録った動きは、タイムラインに、キーとして入ります。
- VR に入って、腕を前に伸ばして(または、下ろしたまま)、左スティックを押し込みます。その時の姿勢が、基準になります
- 体を動かすと、VRM が、鏡のように動きます(自分の右手が、VRM の左手になります)
Aで録画を始めて、もう一度Aで止めます。録った動きは、タイムラインの後ろに、キーで入ります- 左スティックを、もう一度押し込むと、終わります
| 操作 | 動き |
|---|---|
| 左スティックの押し込み | 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
VRMA EDIT
VRM のモーション(.vrma)を、見ながら切る・つなぐ・ポーズを直すブラウザアプリ。
lain-lab.com