先日Babylon.js のGUI Editorを試した頃から、何かのゲームっぽいものを一通り作成しようと思い、キャラクタを動かすタイプのゲーム開発を進めています。
今回は、キャラクタに複数のアニメーションを割り当ててBabylon.js で表示する方法を解説します。
使用した環境
・Blender 2.9.3
1. Babylon.jsで再生可能な、アニメーション付きのキャラクター3DCGモデルを作るには
他の方法でもよいのですが、一例としてこちらに書かれている手順でやるのがおすすめです。
このドキュメントでは、AdobeのMixamoというサービスを使ってキャラクタアニメーションをつける方法を紹介しています。
今回はReady Player Meを使ってキャラクターを生成しMixamoでアニメーションを割り当てました。
2. 具体的な手順
2.1 Ready Player Meを使ってキャラクターモデルを生成
Ready Player Meを使うと、人型キャラクターアバターを自分の写真から簡単に生成できます。 (写真がなくても生成できます)
まず、トップページの「Create Avatar」をクリックして、自分のメールアドレスを登録します。
すると自分のメールアドレスに認証コードが届くのでこれでサインインします。
サインインすると、先ほどの「Create Avatar」のボタンが「Enter Hub」に変わるので、「Enter Hub」をクリックします。
次に表示されたページで、「My Avatar」 > 「Create New Avatar + 」をクリックすると新しいアバターを作成することができます。
作成されたアバターは My Avatarのページに表示されます。この中でダウンロードしたいアバターを右クリックして、"Download avatar .glb"を選び、glb形式でダウンロードします。
2.2 Blenderを使ってglbをfbxとして出力
AdobeのMixamoがglb非対応なのでfbxに変換します。なぜかテクスチャ情報がなくなってしまったのですが、Mixamoで使うには問題ないのでこのまま進めます。
ちなみに、私の環境だけかもしれませんが、以前書いたこちらの方法を使ってもダメでした。
2.3 Adobe Mixamoを使ってfbxにアニメーションを割り当て
Mixamoとはこちらです。AdobeIDとアニメーションを割り当てたいfbxモデルがあれば無料で使えます。
Mixamoの使い方については、例えばこちらにまとまっています。
自分の3DCGモデルに複数のアニメーションを割り当てたい場合、running、idle、walkingなどを割り当てるたびに右上のDownloadを選択して、running.fbx、idle.fbx、walking.fbxを個別に取得します。
ちなみに、runningとwalkingなど、移動に関するアニメーションは、画面上でInPlaceを選択してから出力します。
これを選択しないと、アニメーションをループ再生させるたびにキャラクターの位置が開始時に戻ります。
そのため、Babylon.js Editorでキー操作で移動するとき、常に初期位置に戻ってしまい移動ができなくなります。
2.4 Blenderでアニメーション付きfbxを読み込み、NLAで元々のglb形式のキャラクタに割り当て
2.1でReady Player Meから生成したglb形式の3DCGモデル、2.3でMixamoから生成したfbx形式の3DCGモデルをBlenderにインポートします。
全てインポートしたらfbx形式のモデルの階層構造を開き、Animation以下の名称をわかりやすいものに変更します。
(例：walking.fbxをインポートした結果の場合、walkingと変更)
変更したらそのfbxを全て削除してもOKです。理由はよくわかりませんがインポートしたfbxを消してもアニメーション情報はBlender上に残っているためです。
全て名称変更、削除が完了したら、[1]アニメーションをつけたいモデルを選択して、画面下で[2]メニューを開き、[3] NLAを選択します。
NLA (NonLinear Animation) を使うと、１つの3DCGモデルに複数のアニメーションを割り当てることができます。
Ready Player Meで生成した3DCGモデルにはアニメーションが何も入っていないので、まずはNLAの画面から、Add > Include Selected Objectsを選択します。次に、Add > Add Action Stripを選ぶと、先ほど追加したアニメーションデータが候補に並ぶので１つずつ追加します。
一通り追加するとこのようになります。(ここでは別の検証のため、boneをInFrontオプションで手前に表示していますが、アニメーション割り当て作業には不要です)
ここまでできたら、BlenderのCollectionの中にキャラクタのデータが入っていることを確認し、File > Export > glb 、Active Collectionを選択してglbで出力します。
3. Babylon.js Sandboxで確認してみる
Babylon.js Sandboxとは、3DCGモデルをBabylon.jsの環境で確認できるサイトです。
Babylon.js Sandbox - View glTF, glb, obj and babylon files
3DCGモデルをアップロードするだけで表示を確認、glbの編集やexportなどもできます。
先ほど生成した3DCGモデルをアップロードしてみました。右下に付与したアニメーションが示され、ここを変更することで異なるアニメーションが再生できることが確認できます。
4. おわりに
思ったより長くなったので、Babylon.js Editorで読み込んでキャラクタを動かす方法などは次回記載します。
