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

383 Views

July 18, 22

スライド概要

profile-image

コンピューターグラフィックスが好きな大学院生

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

ゆるLTの資料 うでメガネ

2.

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

3.

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

4.

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

5.

PostProcess スキップ

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

18.

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

19.

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

\初めてのセミナーを開催します/

採用セミナー開催