前回、plaskというサービスを使って生成したモーションデータをBlender上でアバターに割り当てる手順を説明しました。
このデータを出力すれば、別のツールでアバターを動かすことができます。今回、glb形式で出力したかったのですが、簡単にはできませんでした。
そこで、この記事ではglb形式でモーション付きアバターを出力する方法を解説します。
使用した環境
・Blender2.93
・glTF Viewer
- 1. 単純にexport > glbを実行しただけだと、アニメーションがエクスポートされなかった
- 2. Collectionの中にアバターとアニメーションデータを全て格納し、Active Collectionを選択してglb形式で出力する
- 3. 不要なアニメーションデータを削除する、あるいはアニメーションデータを追加するときは NLA Editorで設定する
- 4. Babylon Sandboxでも再生できるが、再生手順に注意する必要がある
- おわりに
1. 単純にexport > glbを実行しただけだと、アニメーションがエクスポートされなかった
まずは特に深く考えず、前回の記事でリターゲッティングしたアバターモデルを選択し、glb形式でエクスポートしてみました。これを再度Blenderでインポートすると、このようになりました。
この黒い線は、それぞれのボーンの法線かもしれませんが、なぜ法線が大量に表示されるかは不明です。
この法線は、Viewport OverlaysのExtraというオプションのチェックを外すと非表示にできます。
ただ、これをみて分かるように、なぜかボーンがすごく細くなった状態しか再現されていません。一応再生ボタンを押すと元のモーションの動きは再生されるのですが、アバターの本体が表示されていない状態です。
2. Collectionの中にアバターとアニメーションデータを全て格納し、Active Collectionを選択してglb形式で出力する
色々調べたのですが、Collectionの中に必要データを格納し、Active Collectionを指定して出力すればよいとわかりました。
Collectionは、Blender2.8以降の機能です。いわゆるグループ化です。以下の説明がわかりやすいので引用させていただきました。
コレクションとは、オブジェクトやカメラ、ライトなどのシーン内のアイテムをグループ毎にまとめることのできる機能です
Collectionの追加方法です。 Scene Collectionという箇所で右クリックし、"New Collection" を選択します。するとこのように、Collection2 が新しく増えます。
このCollection2の中に、前回作成したリターゲッティング状態のデータを全て格納します。格納するにはドラッグ&ドロップでよいです。ただ、なぜかArmatureを全て選択しても１回目のドラッグ&ドロップでは、meshの一部が格納できず、もう一度残されたmeshを選択して格納したら全て格納できました。
Collection2の中に必要なデータを全て格納できたら、それ以外のデータを別のCollection (ここではCollection1) に入れ、非表示にします。
Collection2を選択したら、File > Export > glTF (glb 2.0) を選択します。出てきたウインドウで、Include > Active Collection、Animation > Animationにチェックを入れて "Export glTF 2.0" ボタンを選択します。
動作確認はgLTF Viewerでできます。これは、glb形式を提唱しているKhronos Groupが提供しているViewerです。
Viewerのサイトにアクセスし、出力したglbデータをアップロードするとこのようになります。右側のdat GUIで作成されたパネルを開き、AnimationというカテゴリのBaseという文字を選択すると、今回作ったアニメーションが再生されます。
3. 不要なアニメーションデータを削除する、あるいはアニメーションデータを追加するときは NLA Editorで設定する
アバタに付加されているモーションの追加、削除にはNLA (No Liner Animation) Editorを使います。NLA Editorを開くには以下の画像のように進めます。
この中でAdd > Add Tracksを実行すると追加、 Edit > Delete Tracksを選択すると削除できます。今回は１つしかモーションがないのでAddもDeleteもしませんでした。
こちらを参考にさせていただきました。 qiita.com
4. Babylon Sandboxでも再生できるが、再生手順に注意する必要がある
Babylon Sandboxというサイトがあります。ここにobjやglb、babylon形式のモデルをアップロードすると、Babylon.jsの環境で動作確認ができます。
Babylon.js Sandbox - View glTF, glb, obj and babylon files
このサイトに先ほどのglb形式のアバターをアップロードしても、アニメーション再生を確認できます。
ただ、操作に注意点があります。まず、アップロード後、画面下部にシークバーが表示されますが、ここが動いても動かなくてもアニメーション再生はされません。
アニメーション動作を確認するには、以下の画像のように進めます。
ちなみに、Babylon Sandboxは、データの構造、細かい情報、画面そのもののスクリーンショットや録画など、色々なことができて割と便利なサイトです。
おわりに
結果だけみるとシンプルな手順ですが、試行錯誤が続いたのでたどり着くまでに時間がかかりました。これで好きに作ったモーションを任意のアバターに出力してWebXRなどでも活用することができるようになりました。そろそろ中断しっぱなしのBabylon.js EditorやGodot Engineの勉強を再開する予定なので、今回のモーション付きアバターも活用できればと思います。
