Babylon.js v4.2.0 Practiceめも⑤

その④からのつづきです。　今回はglTFファイル形式による3Dモデルアニメーションを切り替えるコードのリストを作成してみました。　コードは例によってCodePenに投稿したものです。

文字列タイトルによるリンクはコード付きのCodePenページへの、サムネイル画像によるリンクはコードなしのフルスクリーンのCodePenページへのリンクとなっています。

まずはBabylon.jsのサンプルにあったものをほぼそのままコピペしたもの２つです。 Babylon.js v3.3.0 Practiceめも④にあるコードのBabylon.js v4.2.0版としての引き継ぎでもあります。

Babylon.js v4.2.0 Practice#42 glTF 3D Model Animation Switching 01

Babylon.js v4.2.0 Practice#43 glTF 3D Model Animation Switching 02

次にThree.jsで使用していたglTF3Dモデルアニメーションを流用してアニメーションの切り替えを試してみました。

こちらは上記のコード２つを参考に割と単純に移植できた感じです。

Babylon.js v4.2.0 Practice#44 glTF 3D Model Animation Switching 03

次にこちらのロボットの3Dアニメーションの切り替えです。　一見上記と同じように単純な移植で切り替え機能が動いたようでした。　

が、実際はどれか1つのアニメーションによって3Dモデルのパーツ部分が離れてしまった場合、次のアニメーションに移行してもその離れた部分が残ってしまう事があり、おかしな表示になってしまいました。

次からの残り２つのコードではその辺の改善をいろいろ試してみたものです。

Babylon.js v4.2.0 Practice#45 glTF 3D Model Animation Switching 04

前のコードにあった、ロボット3Dモデルのパーツ部分が分離状態になってしまうアニメーション切り替えを修正できないか試してみたコードその１です。　

この「Animation blending and Animation weights using AnimationGroup」という掲示板にリンクのあった「Alien with animation play and stop」というコードを参考させていただきました。

モデルのアニメーションを切り替えるボタン押下時の処理にあった「currentGroup.stop();」に「currentGroup.reset();」を付け加えることで、アニメーション移行時に前のアニメーションにリセットがかかりパーツの分離が起こらないようにしてみました。

具体的なコードの修正としては、元々ボタン押下時の処理に

currentGroup.stop();

とだけあったものに「currentGroup.reset();」を追加して

currentGroup.reset();
currentGroup.stop();

と変更しました。　これでパーツが分離してしまうアニメーションから次のアニメーションに変更するタイミングで一回リセットが行われるので、分離してしまったパーツも元にもどるようでした。　

が、まだリセット時に一瞬でアニメーションが元にもどるようで少し違和感を感じたので、次のコードでさらに滑らかなアニメーション遷移ができないかコードの改善を試してみました。

Babylon.js v4.2.0 Practice#45_02 Test glTF 3D Model Animation Switching 04_02

前のコードで書いていた、より滑らかなアニメーション遷移を目指してみたコードです。　前のコードと同じようにこの「Animation blending and Animation weights using AnimationGroup」という掲示板より、リンクのあった「Additive animation blending」というコードを参考にさせていただきました。

アニメーションにかかる？Weight（重さ）というパラメータをじんわりと変更していくことによって、滑らかにアニメーションを遷移させることができるようです。　それぞれのアニメーションに重さを設定して、Sychronizeさせる関数呼んだりと、なかなか設定めんどくさかったですw。　そんな感じで、GUI（ボタン）とアニメーション遷移まわりのコードはかなり冗長なものとなっています。

そんなわけで、最初はここにコード抜き出したものを記述して説明残しておこうかと思っていましたが、かなり長くなりそうなので今は躊躇中ですw（20210308時点）。

Babylon.js v4.2.0 Practice#45_03 Test glTF 3D Model Animation Switching 04_03

参考まとめ
Babylon.js v4.2.0　CodePen投稿コードまとめ