---
title: babylon.jsゆるLT資料: ボーン階層を雑に扱いたい
tags: 
author: [Yu Yanagida](https://www.docswell.com/user/udemegane)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GEWL3LPZ72.jpg?width=480
description: babylon.jsゆるLT資料: ボーン階層を雑に扱いたい by Yu Yanagida
published: July 18, 22
canonical: https://www.docswell.com/s/udemegane/5MRDGK-2022-07-18-081558
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GEWL3LPZ72.jpg)

ゆるLTの資料
うでメガネ


# Page. 2

![Page Image](https://bcdn.docswell.com/page/47ZMVMKLE3.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YJ6N5NQMJV.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJ55Y5RQJ4.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/9E2NGNDW7R.jpg)

PostProcess
スキップ


# Page. 6

![Page Image](https://bcdn.docswell.com/page/D7YPVP297M.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/VEN5M58DJ8.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/Y79YNYK8E3.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/G786K6RZJD.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/L7L9Z9K1ER.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EMZVZ257W.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PER626MZJ9.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/P7XMDMV1JX.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/37KGXGQMED.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LJ3N5NP2J5.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/8JDWDWL6EG.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VEP9X94Z78.jpg)



# Page. 18

![Page Image](https://bcdn.docswell.com/page/27VMLMXM7Q.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/5JGGXGVXJL.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/47QX8X65JP.jpg)



