babylon.jsゆるLT資料: ボーン階層を雑に扱いたい

ゆるLTの資料 うでメガネ

自己紹介 ハンドルネーム: うでメガネ 本名: 柳田 ・babylon.js歴 半年～ほど ・Unreal Engineなど 5年～ ・大学院生（修士1年）

本日のお題 babylon.jsでいい感じのポートフォリオサイトを作ることを試みた中で、 「これ便利だな～」「うわめんどくさっっっ！！！」と思ったものの紹介 ゆるLTなので、難しい説明はナシ！！！！ 具体的には ・PostProcess周り ・キャラクターアニメーション管理

ポートフォリオサイト なんかいい感じの空間にいい感じのキャラクターがいて、いい感じのUIを置きた い！！！

PostProcess スキップ

キャラクターアニメーション

UE・Unityにおけるアニメーション管理 アニメーションとモデルが、 直接繋がっていない！！(重要) 例えば、 アニメーションアセット 何らかの抽象化レイヤー ・UnityのHumanoid Avatar ・UEのスケルトン キャラクターモデル

なにが嬉しいか アセットの使いまわしができる。 抽象化レイヤーがボーンの構造の差異などを吸収し、各アセットの橋渡し役となる。

babylon.jsにはこれが無い！！！

UE・Unityにおけるアニメーション管理 ステートマシン等による高度な状態管理システム。 歩く・走る・ジャンプ...etc等の管理を行う

babylon.jsにはこれも無い！！！

何が問題か ・キャラクターモデルと、アニメーションを別々にインポートすると使いまわせない ・ひとつの.glb or .babylonファイルに入っているアニメーションとモデルだけでやりく りしなければならない ・アニメーションの状態管理が超絶メンドクサイ ・人間の頭はテキストによる状態管理が出来るほどよく出来ていない

じゃあどうしよう 無いなら作ってしまえ！ https://github.com/udemegane/bjs-character-animation-sample.git https://codesandbox.io/s/crazy-cookies-5iiy0s 今日作り始めました ... 作り終わってません ......

• https://github.com/udemegane/bjs-character-animation-sample.git
• https://codesandbox.io/s/crazy-cookies-5iiy0s

目標 ・キャラクターアニメーションの3Dメッシュからの完全な分離・・・Done！ ・異なるボーン構造のメッシュに対してもアニメーションの再利用を(ある程度)可能にす る・・・7割くらい ・ステートマシンで扱える様にする・・・1割くらい

ウルトラ超ざっくりとした説明 Skeletonクラス Boneクラス ボーン構造と、それらの Animatableを取り扱う Nodeの派生クラス ボーンを取り扱う Animatableクラス Animationとそれに対応する Nodeを管理する Animationクラス キーフレームのみ保持 他にもRuntimeAnimationとかAnimationGroupとか色々あります

現状 ・アニメーションとメッシュを別々にインポートできる ・キャラクターアニメーションを単独で扱える ・ボーン階層が同型ならばアニメーションの再利用が出来る

状態管理 JS製のFSM(有限オートマトン)ライブラリがあったので、それを使う

ポストプロセス 組み込みで強力なシェーダー色々！！！ 自作もできる！！！すごい！！！！！ なし あり