CEDEC2020 プロシージャルゲームコンテンツ制作ブートキャンプ 2020 Part 1 モバイルゲームはじめに

©KLab Inc.
Part1　モバイルゲーム　はじめに
プロシージャルゲームコンテンツ制作ブートキャンプ 2020

©KLab Inc.
©KLab Inc.
■　自己紹介
○ 佐々木洋太
○ 技術統括部RRRグループ所属
■ ※RRR = リアルタイムレンダリングリサーチ
○ VFXシニアアーティスト
2

©KLab Inc.
©KLab Inc.
自己紹介
○ アニメ制作会社、3DCG制作会社で主に2D・3Dのエフェクト・コンポジット・
映像制作に携わった後KLabに入社。
○ 入社後は先端VFXの技術検証に携わりつつ「禍つヴァールハイト」のカット
シーン制作に参加。
○ 現在は新規プロジェクトへの協力や、高度なVFXの技術検証及び社内導入
・制作力向上への貢献を技術・アートの双方から行っている。
3

©KLab Inc.
©KLab Inc.
概要
○ モバイルゲーム開発におけるプロシージャル手法の利点
○ モバイルゲームでも使えるPositionBasedDynamicsのプロシージャル手法紹
介
○ プロシージャルエフェクトアセット制作Tips
■ Fake Lighting & Vector Flow
■ Flow Map 作成アセット
■ RGBAテクスチャマージアセット
■ 各種エフェクト素材作成アセット
○ まとめ等
4

©KLab Inc.
©KLab Inc.
概要
○ モバイルゲーム開発におけるプロシージャル手法の利点
○ モバイルゲームでも使えるPositionBasedDynamicsのプロシージャル手法紹
介
○ プロシージャルエフェクトアセット制作Tips
○ まとめ等
5

©KLab Inc.
©KLab Inc.
使用するツールのバージョン
○ Houdini : 18.0.287 ～ 18.0.566 までの ProductionBuild
■ SideFXLabs : 297 ～ 566
○ Unity : 2019.3系～2019.4系
○ AfterEffects : CS6 , CC2019
6

©KLab Inc.
モバイルゲーム開発におけるプロシージャル手法の利点
CEDEC2020
7

©KLab Inc.
©KLab Inc.
○ プロシージャル手法というのは魅力的ですが、そもそもモバイルゲーム開発
においてメリットがあるのか？
8

©KLab Inc.
©KLab Inc.
○ 一般的な考え方として、プロシージャル手法は高品質・高効率・量産といっ
た昨今のクリエイティブ全般で必要とされている要素を備えているので、ど
んな制作においても一定の恩恵はある。
■ こういった一般的なメリット以外にもモバイル商材特有のメリットも存在
する。
9

©KLab Inc.
©KLab Inc.
○ モバイル商材におけるプロシージャルのメリット：1
■ モバイルゲームの殆どは運営型で、リリース後もコンテンツを追加し続ける
販売形態です。
■ そのためリリース後のコストを抑えつつ、質と量を担保できる手法とは相性
が良い。
■ そうなるとアセットや素材の流用や調整がやりやすいプロシージャル手法は
効果的で、モバイルゲーム開発においてプロシージャルな仕組みは有用だと
考えられる。
10

©KLab Inc.
©KLab Inc.
○ モバイル商材におけるプロシージャルのメリット：2
■ モバイル商材は各レギュレーションや各端末へ対応するために、様々なバリ
エーションや試行錯誤をするケースが多い。
■ 低スペック端末で如何に品質を損ねずにパフォーマンスをだすかといった調
整も、プロシージャル手法で様々なものを作っておくと試行錯誤がし易く落と
し所を探しやすい。
■ 総じてプロシージャル手法のイテレーションを高速で回せるという特徴は、
様々なバリエーションや試行錯誤を要するモバイル開発とは相性が良い。
11

©KLab Inc.
©KLab Inc.
○ モバイルゲーム開発においてプロシージャル手法は有効なのか？
■ YES.
12

©KLab Inc.
モバイルゲームでも使える PositionBasedDynamics 手法の紹介
13

©KLab Inc.
©KLab Inc.
○ モバイルゲームでこういうソフトボディシミュレーション系の素材を求めら
れた時、どうやって使えるようにするか？
14

©KLab Inc.
©KLab Inc.
○ 真っ先に思いつくのはVertex Animation Texture。
15

©KLab Inc.
©KLab Inc.
○ Vertex Animation Texture は、国内に限っていえばミドルハイ以上の環境
なら理論上動作する場合が多いので、そのレンジのみを対象端末にして
いるのであれば使用しても良いと思われます。
○ ただし、実際はVATが動かないような低スペックだったりグローバル展開
を踏まえて国内より更に想定端末スペックの低い国外の様々な端末が対
象になる場合が多いので、それらにも対応した仕組みで作るのが現実的
である。
16

©KLab Inc.
©KLab Inc.
○ ではどうするか？
■ 古典的ではあるがボーンベースのアニメーションなら問題ない。うまくア
セットに落とし込めれば実用的と判断。
17

©KLab Inc.
©KLab Inc.
○ ツール選定
■ アセット作成で真っ先に思いつくのはプロシージャル力の高いHoudini。
18

©KLab Inc.
©KLab Inc.
○ ツール選定
■ HoudiniにはVellumという強力なソフトボディツールがある。
19

©KLab Inc.
©KLab Inc.
○ ツール選定
■ Houdiniにはソフトボディをボーンベースアニメーションに変換するツール
が備わっている。
20

©KLab Inc.
©KLab Inc.
○ ツール選定
■ Houdiniの使用が望ましい理由が多いので、Houdiniを使用。
21

©KLab Inc.
©KLab Inc.
22

©KLab Inc.
©KLab Inc.
○ シーン紹介
23

©KLab Inc.
©KLab Inc.
○ シーン紹介
24

©KLab Inc.
©KLab Inc.
○ シーン紹介
■ 時間の都合で、ソフトボディ素材自体の作り方は簡易的なものとさせて頂
きます。
25

©KLab Inc.
©KLab Inc.
○ Houdiniソフトボディ基礎知識
■ Vellum
26

©KLab Inc.
©KLab Inc.
○ Houdiniソフトボディ基礎知識
■ 基本的にはVellumConstraintsノードにソフトボディに変換したいノードや
コリジョンを繋ぎます。
■ VellumConstraintsに至るまでを非破壊で組んでおくことでプロシージャル
アセット化しやすくなります。
27

©KLab Inc.
©KLab Inc.
○ シーン紹介：全体図
28

©KLab Inc.
©KLab Inc.
○ シーン紹介
■ 布とチューブはHoudini内で作
成しています。
■ FBX等の外部素材を使う事も多
いので、ネイティブ素材はこうし
て仕分けておくことで可読性の
良いアセットになります。
29

©KLab Inc.
©KLab Inc.
○ シーン紹介
■ ネイティブ素材と外部素材をどちらも使えるようにしておくと便利です。
30

©KLab Inc.
©KLab Inc.
○ シーン紹介
■ コリジョンも同様です。
31

©KLab Inc.
©KLab Inc.
○ シーン紹介
■ ５枚の布をシミュレーションするので元
素材を５つにコピーし、それぞれ後で分
離できるようにグループ分けをしておき
ます。
■ 本来ならこの手の情報の整理や追加と
いった処理はサブネットの中で行った
方がスマートですが、今回は説明しや
すいように全部同じ階層に表示してい
ます。
32

©KLab Inc.
©KLab Inc.
○ シーン紹介
■ ネイティブジオメトリを使わずに
外部FBXのみを使う場合もある
ので、そういう時用の構造も作っ
ておくと便利です。
■ 前スライドの「サブネットの方が
スマート～」というのは右の画像
のような構造の事です。
33

©KLab Inc.
©KLab Inc.
○ シーン紹介
■ Vellumの構造は最初に説明したものと基本的に
同じです。
■ 布とチューブとの接触面を固定するために、
VellumConstraintsノードを一つ追加してアタッチ
設定を追加しています。
34

©KLab Inc.
©KLab Inc.
○ シーン紹介
■ シミュレーション後のデータをグループ毎に分けます。
35

©KLab Inc.
©KLab Inc.
○ シーン紹介
■ 複数のオブジェクトをシミュレーショ
ンしている場合はそれぞれボーンア
ニメーションに変換する必要がある
ので、sim後にSplitSOP等で事前に
設定していたグループ毎に分離しま
す。
■ ジオメトリが一つの場合は特に気に
しなくて大丈夫です。
36

©KLab Inc.
©KLab Inc.
○ シーン紹介：終わり
37

©KLab Inc.
©KLab Inc.
○ ボーンベースアニメーションに変換
■ SideFXLabs Skinning Convertor を使用
38

©KLab Inc.
©KLab Inc.
○ SideFXLabs Skinning Convertor：基本
■ ボーンアニメーションにしたい要素をSkinningConvertorに繋ぐとこのような
ビジュアルになります。この球体がボーンのアタリです。
39

©KLab Inc.
©KLab Inc.
■ 基本的には「Convert To Bones」ボタンを押すだけで良い。
■ 「Num Bones」タブでボーンの数を決められる。デフォルトは100でモバイ
ルで使うには負荷が高い場合があるので、適宜調整が必要。
40

©KLab Inc.
©KLab Inc.
■ デフォルトだとボーンは自動生成されます。
● 自作ボーンも使用できますが殆どの場合自動で問題ありません。
● 自動ボーンの精度は結構良いので、ボーン数を調整したSkinning
Convertorノードを複数作ることで、簡単にLODのようなバリエーション
を作成できます。
■ Skinning Convertor はメッシュが一繋ぎでないと上手く機能しません。
● 割れたり千切れたり離れたりしているメッシュでは上手くいかない。
41

©KLab Inc.
©KLab Inc.
○ SideFXLabs Skinning Convertor：最重要！
■ Skinning Convertor を適応するメッシュが複数あり、それらのサイズ・トポロ
ジーといった情報が同じ場合、自動生成ボーンは全く同じものが作られ、相
互に入れ替えてもきちんと動きます。
● 上記の性質を利用することで、Houdiniから書き出した複数のアニメー
ションクリップをUnity上で一個のメッシュに適応することができます。
● 毎回別のメッシュを書き出していたらデータサイズがどんどん膨れていく
ので、メッシュ数が少なく出来るならそれに越したことはありません。
42

©KLab Inc.
©KLab Inc.
■ それぞれ別のメッシュを別のSkinningConvertorを設定しています。
■ ただし、メッシュのトポロジーやSkinningConvertorのボーン数・seedは同じ
値です。
43

©KLab Inc.
©KLab Inc.
■ 一つのメッシュに全アニメーションを適応できる。
44

©KLab Inc.
©KLab Inc.
○ SideFXLabs Skinning Convertor：実行
■ 「Convert To Bones」ボタンを押すとobj階層にボーンアニメーションに変換さ
れた要素がobj階層にサブネットとして生成されます。
45

©KLab Inc.
©KLab Inc.
○ SideFXLabs Skinning Convertor：実行
■ 名前には元のオペレーター名とボーン数が記載されています。
■ FBXとしてエクスポートする際はこのサブネットを選択します。
46

©KLab Inc.
©KLab Inc.
○ SideFXLabs Skinning Convertor：データ構造
■ サブネットの中身はこんな感じです。
■ デフォーム用のオブジェクトとボーンが入っています。
47

©KLab Inc.
©KLab Inc.
○ SideFXLabs Skinning Convertor：データ構造
■ アニメーションだけをエクスポートする場合は、デフォーム用のオブジェクトの
ディスプレイフラグをオフにします。
48

©KLab Inc.
©KLab Inc.
○ SideFXLabs Skinning Convertor：注意点
■ SkinningConverterのバージョンですが、Houdini18を使用する場合
はSideFXLabsのバージョンが297までなら問題なく使用できます。
■ 297以降はSkinningConverterの中のノード構成が変わっています。
■ バージョン460まで色々と試しましたが、297以降はコンバート時にエ
ラーが起こるorコンバートは一見正常に完了するが、そのままの設
定だとFBXエクスポート時に骨とメッシュの関係が維持されないとい
う事があるので注意が必要です。
49

©KLab Inc.
©KLab Inc.
○ SideFXLabs Skinning Convertor：注意点
■ Skinning Converter SideFXLabs 297
50

©KLab Inc.
©KLab Inc.
○ FBXエクスポート
■ SOPでもROPでも該当ノードがあるのでエクスポートできます。
■ しかし、PDGでアセットを回す場合はROPnet内でFBXエクスポートを行
わないと上手くいかない場合があります。
51

©KLab Inc.
©KLab Inc.
○ FBXエクスポート
■ ROPだと複数のデータを書き出したい時等にまとめて管理しやすい&他
の人も見やすいので、個人的にはROPがお奨めです。
52

©KLab Inc.
©KLab Inc.
○ ROP Filmbox FBX
53

©KLab Inc.
©KLab Inc.
○ ROP Filmbox FBX 設定
■ Export Invisible Objects
● 非表示要素をどう扱うかの項目
○ As Hidden Null Nodes
■ 非表示要素をヌルで書き出す。デフォルト設定。
○ Don’t Export
■ 非表示要素を書き出さない。無駄な要素が書き出されない
ので出来ればこれが良いが、この設定だとUnityインポート
時に必要なデータが読み込まれない事があるのでそういう
場合は「AsHiddenNullNodes」を使う。
54

©KLab Inc.
©KLab Inc.
○ ROP Filmbox FBX 設定
■ Export Animation Clips(Takes)
● アニメーションクリップの尺や名前を決める
○ ここを設定しないと同じ名前のアニメーションクリップが量産され
てUnityでの作業時に困ることになるので注意。
55

©KLab Inc.
©KLab Inc.
○ Unityでのインポート
■ 普通にFBXデータを読み込むのと同じ方法で大丈夫。
56

©KLab Inc.
©KLab Inc.
○ Unityでのインポート時の注意点
■ インポート時にAvatarが無い場合がある
● Avatarが無いとアニメーションがきちんと反映されないので、Avatarが
無い場合は「Avatar Definition」のタブから「Create From This
Model」を選択してAvatarを作成しましょう。
57

©KLab Inc.
©KLab Inc.
○ Unityシーン
58

©KLab Inc.
©KLab Inc.
○ Unityシーン
59

©KLab Inc.
©KLab Inc.
60

©KLab Inc.
©KLab Inc.
○ 複数のオブジェクトをシミュレーションする場合の設定
■ 今回紹介したようなパワープレイでも良いのですが、他にも幾つかあるの
で紹介いたします。
61

©KLab Inc.
©KLab Inc.
○ 複数のオブジェクトをシミュレーションする場合の設定 : 1
■ 複数のVellumConstraintsをVellumSolverにマージする。
62

©KLab Inc.
©KLab Inc.
○ 複数のオブジェクトをシミュレーションする場合の設定 : 2
■ 複数のVellumConstraintsのデータをDOPnet内でVellumSourceを使って
マージする。
63

©KLab Inc.
©KLab Inc.
○ 複数のオブジェクトをシミュレーションする場合の設定
■ 各種VellumSOPで行う場合
● 視覚的に分かりやすい
● DOPに入らないのでHoudiniCoreでも作業できる
● DOPに入らないため極々細かい調整はできない
■ DOPnetで行う場合
● 極々細かい調整ができる
● DOPnet内部を扱うためHoudiniFXライセンスが必要
64

©KLab Inc.
©KLab Inc.
○ 最新のスキニングコンバーター事情
■ Dem Bone Skin Converter
● 今年の7月頃、Houdini18.0.501以降、SideFXLabsに上述の
「DemBoneSkinConverter」というツールが追加されました。
● こちらも少し検証した結果をスライドに用意しております。
○ ※時間の関係で紹介は講演の最後とさせて頂きます。
65

©KLab Inc.
プロシージャルエフェクトアセット制作Tips
66

©KLab Inc.
©KLab Inc.
○ 概要
プロシージャルエフェクトアセット制作 Tips
67

©KLab Inc.
©KLab Inc.
○ 概要
68

©KLab Inc.
©KLab Inc.
○ Fake Lighting とは？
Fake Lighting & Vector Flow
69

©KLab Inc.
©KLab Inc.
○ Fake Lighting とは？
■ Normal Map によるリライトの亜種
● Normal Map をそのまま使用するとフラグメントシェーダーの計
算が重くなりモバイル向けとは言い難い。
● そのためRGBの各ライトを各方向から当てたデータをテクスチャ
化し、そのRGB情報を基に擬似的に Normal Map によるリライ
トのようなライト調整を行う手法。
70

©KLab Inc.
©KLab Inc.
○ 簡易解説
71

©KLab Inc.
©KLab Inc.
○ RGBライトリグのセッティング
■ TextureSheetROPの「RenderRGBLight」のチェックをオンにすると自動的
にRGBライトリグのサブネットが作成されます。
72

©KLab Inc.
©KLab Inc.
○ RGBライトリグ
■ RGBライトリグのサブネットはネットワークビューに画像のように作成され
ます。
73

©KLab Inc.
©KLab Inc.
○ SideFXLabs Texture Sheet ROP
■ レンダリング時にテクスチャシートを自動生成してくれたり、前述のライトリ
グを作れたり、レンダリングしたエミッションマスクやBlendNormalsといった
各種AOVを半自動でパッキングできたりと、プロシージャル且つイテレー
ションの良い優れものノード。
74

©KLab Inc.
©KLab Inc.
○ Texture Sheet ROP＆RGBライトリグの詳細解説
■ BornDigital様のこちらのブログでTextureSheetROP及びRGBライトリグ
の使い方を詳細に解説されています。
● 丁寧に解説されているのでFakeLighting初心者の方はこちらから始
めてみると良いでしょう。
● ただし、解説で使っているバージョンが少し古くUIや仕様が現行の
Houdiniと一部異なる所があるので注意して下さい。
■ 時間の都合で本セッションでは上記リンクの基礎的な説明は省略させて
頂きます。
75

©KLab Inc.
©KLab Inc.
○ RGBライトリグの注意点
■ RGBライトリグでライトは画像のように作られる。
76

©KLab Inc.
©KLab Inc.
○ RGBライトリグの注意点
■ しかしこれだとgifのように180度手前を横切るようなライティングにはなり
ません（左右が同じ色だと90度までしか変化が無い）。
77

©KLab Inc.
©KLab Inc.
○ 解決法
■ TextureSheetROPで生成したRGBライトとは別に左右が違う色のライトを
作成し、RGBライトの素材とは別素材として書き出します。
78

©KLab Inc.
©KLab Inc.
○ 解決法
■ RGBライト素材とスクラッチしたライトの素材を適宜マージします。奥行き
のチャンネルはRGBライトの方が良い場合が多いです。
79

©KLab Inc.
©KLab Inc.
○ イテレーション
■ FakeLightingで必要とされる素材生成はワークフローを組めばほぼ自動化
できます。
● しかし、実際のビジュアルを詰める時に「どのライトグループの素材を使
うか」「VolumeNormalsとBlendNormalsの割合はどれくらいがかっこい
いか」等の理由から試行錯誤の必要が生じます。
○ そのため一連の流れをHoudiniでプロシージャル化しておくとス
ムーズにイテレーションが回せます。
○ COPでテクスチャマージを行ったのも、TextureSheetROPがパッ
キングの試行錯誤をし易いような構造を自動生成してくれるので、
スムーズに作業を進められるためです。
80

©KLab Inc.
©KLab Inc.
○ Texture Sheet ROP の注意点
81

©KLab Inc.
©KLab Inc.
○ 爆発の作り方
■ 本セッションは爆発の作り方講座ではないので簡単に説明していきます。
82

©KLab Inc.
©KLab Inc.
○ 爆発の作り方：基本
■ 基本的にHoudini18で追加されたPyrosolverを使用しています。
83

©KLab Inc.
©KLab Inc.
■ 基本的にHoudini18で追加されたPyrosolverを使用しています。
● Houdini18で追加されたSparsePyroは煙や爆発を作るのに適していま
す。
● Pyrosolverには一通り爆発を制御するためのパラメータが揃っています。
● ソース・フォース・コリジョンをしっかり作っておけばPyrosolverで難しい調
整をしなくても良い感じのディテールになります。
● Temperatureの扱いが17.5までと少し変わっているので、炎素材を作成
する場合は従来のPyroを使った方が作り易い場合があります。
84

©KLab Inc.
©KLab Inc.
■ 青枠内がソース、緑枠内がフォース補助のコリジョンです。
● シミュレーションはソース作りが肝です。
85

©KLab Inc.
©KLab Inc.
○ 爆発の作り方：Tips
■ 「FlameLifespan」のパラメータは結構ダイレクトに爆発が消えるまでの時間
に影響します。
● テクスチャシート利用想定で、出現から消失までを作りたい場合はこの
値を少なめにしておくと良いでしょう。
86

©KLab Inc.
©KLab Inc.
○ 爆発の作り方：Tips
■ GasTurbulenceやGasDisturbをより細かく調整する場合は、PyroSolver内
のForceサブネットの中に追加します。
87

©KLab Inc.
©KLab Inc.
○ Vector Flow　
88

©KLab Inc.
©KLab Inc.
○ Vector Flow とは？
■ MotionVector素材を用いる事で、少ないテクスチャ枚数でもアニメー
ションをスムーズに見せるテクニック。　
89

©KLab Inc.
©KLab Inc.
○ MotionVector素材作成
■ Houdiniで作成
■ AfterEffectsで作成
■ FacedownFX SlateEditorで作成
■ 上記３種それぞれに善し悪しがある。
90

©KLab Inc.
©KLab Inc.
91

©KLab Inc.
©KLab Inc.
■ Houdiniで作成 : Good
● 元のシミュレーションに対して最も正しいVelocityが反映される。
● 素材を作成するHoudini地続きの作業なので最もプロシージャ
ル。
92

©KLab Inc.
©KLab Inc.
■ Houdiniで作成 : Bad
● カメラが「orthographic」でないと上手くレンダリングされない。
● レンダリングした元データを一旦他のツールで加工やオプティマ
イズしようとする際には使えない。
○ 実機での容量やパフォーマンスを鑑みてテクスチャを適宜
オプティマイズする事はよくあるので、それができないのは
厳しい。
93

©KLab Inc.
©KLab Inc.
94

©KLab Inc.
©KLab Inc.
■ AfterEffectsで作成 : Good
● 加工したりオプティマイズした既存の素材を使って後から
MotionVector素材を作れる。
● AfterEffects自体も非破壊的に作業ができるツールなので、
ワークフローをしっかりしておけばプロシージャルアセット化が可
能。
95

©KLab Inc.
©KLab Inc.
■ AfterEffectsで作成 : Bad
● 有償プラグインのTwixtorが必要。
○ 映像仕事では必須級のプラグインなので映像会社なら問
題なく導入できると思いますが、ゲーム会社でわざわざこ
のために購入しようとしてスムーズに稟議を通るか分から
ないところ。
96

©KLab Inc.
©KLab Inc.
97

©KLab Inc.
©KLab Inc.
■ FacedownFX SlateEditorで作成 : Good
● Guerrilla Games の方が作ったツールなので、リアルタイム用
途の素材作りにはとても使いやすい。
● AfterEffects同様、加工やオプティマイズを施した素材に後から
MotionVectorを追加できる。
● 非商用利用は無料だったりとFree版のライセンスもある。
98

©KLab Inc.
©KLab Inc.
■ FacedownFX SlateEditorで作成 : Bad
● Badというか当たり前ではあるが、商用利用は基本的に有償。
○ 1円でも購入手続きが発生すると稟議書を通す必要が生じ
てスムーズな導入がし辛くなる。
● 個人開発系のツールだからか、よくエラー落ちする。
99

©KLab Inc.
©KLab Inc.
○ 個人的には FacedownFX SlateEditor が一番使いやすい。
■ ゲーム会社の人がゲーム向けに作ったツールだからか、欲しいもの
がきちんと作れてかゆい所に手が届く使い心地。
100

©KLab Inc.
©KLab Inc.
○ Fake Lighting & Vector Flow Shader
■ Shader Graph での作成例
● スライド上の画像だと各ノードが見辛いと思いますので、次スライドに
Shader作成の参考にしたサイトのリンクを記載致します。
101

©KLab Inc.
©KLab Inc.
○ Shader について
■ Unityでエフェクト向けのこの手のShaderを作ろうと思っても、公式サンプ
ル等での配布や参考はないのでR&D及びフルスクラッチになる。
● UE4のMotionVectorの資料は調べれば大量にでてくるので、UE4
のマテリアルを参考にすれば比較的作りやすいです。
■ Shader参考
● Klemen Lozar's Online Portfolio
102

©KLab Inc.
©KLab Inc.
○ Tips
■ MotionVector素材をUnityで使用する場合は、インスペクターにある
「sRGB」のチェックを外します。
■ 元素材より解像度は低くても問題ありません。
● 例 : 元素材が512x512、MotionVector素材が128x128でも問
題ない。
○ 場合によっては更にオプティマイズ可能。
103

©KLab Inc.
©KLab Inc.
○ Shader Graph って使っていいの？
■ 本セッションの資料のShaderは基本的にShaderGraphで作っております
が、「ShaderGraphは重くて実用性がない」とよく聞くので、本当にそうな
のか色々と検証しました。
104

©KLab Inc.
©KLab Inc.
○ Shader Graph 検証
■ コードで最適化して作ったものより端的にいうと1.5倍位重い。
■ Presitionを全てfloatにしないと端末でのピクセル計算がおかしくなったり
バグが起こったりする。
■ 自動でGPUインスタンシングやSRPbatcherが入る。
■ OpenGLのNo-ops計算は自動で最適化される。
■ ノードで作ったものをコードに変換できるので、最終的な最適化は従来の
Shader同様行える。
■ バトルエフェクトのように一瞬だけでて消えるようなものだったら、エンジ
ニアが最適化せずにアーティストが組んだShaderGraphのままでもパ
フォーマンス的に大丈夫な場合がある。
105

©KLab Inc.
©KLab Inc.
○ Shader Graph 検証結果
■ 当然エンジニアが最適化して作ったものよりは重くなる。
● しかし、だからといって全てのShader作成や修正をエンジニアに丸
投げするのは現実的ではない。
● ShaderGraphで作ったShaderはコードに変換できるので、アーティ
ストの作業段階ではShaderGraphを使い、最終的に実装時にコード
に変換して最適化というアプローチでも問題ないと思われる。
106

©KLab Inc.
©KLab Inc.
○ Shader Graph 検証結果
■ 結論：ShaderGraphは使っても良い
● ただし、ShaderGraphを使うためのワークフローやパイプライン構築
や根回しはしておくこと。
107

©KLab Inc.
©KLab Inc.
○ 概要
108

©KLab Inc.
©KLab Inc.
○ Flow Map とは？
■ 流体の流れを２次元で表現するために用いるもの。RGチャンネルを
ベクトル情報として利用する。
Flow Map 作成アセット
109

©KLab Inc.
©KLab Inc.
○ Houdiniで作るメリット
■ FlowMapを作れるツールは色々とあるが、Houdiniだと実際に動きを
確認しながら作れてイテレーションが良い。
110

©KLab Inc.
©KLab Inc.
○ 肝になるノード
■ 画像の４点。バージョンアップで結構中身が変わるわりには公式の
example動画が数年前のしか無いので、自分自身で色々と触ってみ
て使い心地を確認しましょう。
111

©KLab Inc.
©KLab Inc.
○ アセット構成
■ アセットのノード構成自体は画像の通りシンプルに組めます。
112

©KLab Inc.
©KLab Inc.
○ 解説1-2
■ Normalを作成し、VOPで軽くNormalにノイズを当てます。
● こうしておくと「FlowMapSOP」を繋いだ際にVelocityの制御がし易い
です（個人の感想）。
115

©KLab Inc.
©KLab Inc.
○ スライド上の画像だと各ノードが見辛いと思いますので、Shader作成の参考
にしたサイトのリンクを記載致します。
○ 参考サイト
■ Unity Shader Graph - Part 01: Flow Map
■ https://baba-s.hatenablog.com/entry/2018/10/12/170000
■ https://soramamenatan.hatenablog.com/entry/2020/03/08/223922
126

©KLab Inc.
©KLab Inc.
○ RGBAテクスチャマージとは？
■ RGBAの各チャンネルに別々のテクスチャ情報を格納する事で、一枚の
テクスチャに複数の形状や情報を持たせる手法。
■ UnityのShaderGraphには内部でテクスチャベイクを行う機能がないの
で、ShaderGraphでテクスチャマージ素材を使う場合は事前に各素材を
マージしておく必要があります。
■ 将来的にはShaderGraph内部でテクスチャマージを行えるようになるそ
うです。時期は未定。
RGBAテクスチャマージアセット
128

©KLab Inc.
©KLab Inc.
○ 陥りがちなミス
■ ChannnelCopyノードに画像データを挿しても上手く各情報を分離統合で
きない場合。
● shapeノードをダミーノードとして使う事で解決。
● 公式のexampleが分かりやすい例となっています。
○ Link : Channel Copy compositing node
132

©KLab Inc.
©KLab Inc.
○ Houdini以外の選択肢
■ Substance Designer でも簡単に作れます。
● しかし、このためにフローティングライセンスを使うのも躊躇われ
るので自分はHoudiniで作ることが多いです。
133

©KLab Inc.
©KLab Inc.
○ 炎プロップ素材 : 作り方
■ 炎の仕込み自体は、自分が以前作ってSideFX社公式サイトにも掲
載して頂いているチュートリアルと似たようなものです。
● Link : https://www.sidefx.com/ja/tutorials/author/_sasa_/
136

©KLab Inc.
©KLab Inc.
○ 炎プロップ素材 : 作り方
■ 爆発作りの箇所でも触れましたが、Sparseソルバはこういうプロップ
炎素材作りは逆にやり辛い場合があります。
■ そのため従来のPyroギミックを使用していますが、Houdini18になっ
て追加された要素も幾つか使用して改良しています。
137

©KLab Inc.
©KLab Inc.
○ 改良点 : Pyro Post Process の使用
■ Houdini18から追加されたPyroPostProcessによりビュー上でも炎の色が
見やすくなりました。
● しかし、根元に色味が残りがちになるので従来のマテリアル構成を使う
方が良かったりもします。
138

©KLab Inc.
©KLab Inc.
○ 改良点 : Pyro Post Process の使用
■ 従来のPyroギミックを使う場合は「Bindings」タブの「Flame」のチャンネルを
「heat」にすることでHoudini17.5までの感じの色味にすることができます。
139

©KLab Inc.
©KLab Inc.
○ 改良点 : ROPの設定
■ 新しく炎のバリエーションを作った場合でも、既存の設定をコピーしてパスを少
し変えるだけでシミュレーションからレンダリングまでbatchで自動的に回るよう
にしています。
145

©KLab Inc.
©KLab Inc.
○ プロシージャル手法のイテレーションを高速で回し、試行錯誤がし易いという特
徴は一作業者として非常に魅力的です。
○ 冒頭でも述べましたが、プロシージャル手法のこういった特徴はモバイルゲーム
開発においても各レギュレーションや端末への対応・低スペック端末向けの調整
を柔軟且つ高速に進める上でメリットが大きいです。
○ 特にモバイル商材だと限りある端末リソースのパフォーマンスのギリギリを如何
に攻めるかというのも重要な点ですので、試行錯誤を重ねてイテレーションを高
速で回せるプロシージャル手法は相性がよく効果的です。
○ また、プロシージャル手法やアセットはリリース後のコンテンツ追加で質・量・速
度を担保するうえで役立ちます。
まとめ
147

©KLab Inc.
©KLab Inc.
○ 最新のスキニングコンバーター事情
■ Dem Bone Skin Converter
● 今年の7月頃、Houdini18.0.501以降、SideFXLabsに上述の
「DemBoneSkinConverter」というツールが追加されました。
149

©KLab Inc.
©KLab Inc.
■ 先に記載しておきますが、Houdini18.0.566及びSideFXLabs566環境だと
不具合が起こって色々と上手くいかない可能性があります。
● SideFX社の多喜様にシーンファイルをお渡しして検証をお願いした結
果、DailyBuildの567にアップデートしたら不具合が緩和されました。
● とはいえ私のように現行最新のProductionBuildである566を使って同
じような問題に頭を悩ます方もいるかと思いますので、資料として残す
意味も含めて不具合ごとスライドには記載しています。
151

©KLab Inc.
©KLab Inc.
○ Dem Bone Skin Converter：不具合の可能性有
■ 画像のような簡単な布落下シーンのコンバート＆エクスポートに何故か10分
位かかります。（従来のSkinningConverterだと1分未満）
● ※個人環境に由来する問題の可能性がある。問題なく使えるという人も
いる。原因は不明。
154

©KLab Inc.
©KLab Inc.
■ 精度が気がかり
● 青色：オリジナル。
● 赤色：SkinningConvertor。ボーン数100(球体はボーンのアタリ)。
● 灰色：DemBoneSkinConverter。ボーン数100。
157

©KLab Inc.
©KLab Inc.
■ Unityでの使用
● SideFXLabsバージョン566のDemBoneSkinConvertorでエクスポートした
FBXは、Unity2019.3f系及び2019.4LTS系でURP・HDRP共に問題なくイ
ンポートできます。
○ アニメーションも問題なく再生できます。
159

©KLab Inc.
©KLab Inc.
■ 複数のマシンで検証
● 私が検証した３台のWindows10ワークステーション環境では件のメッ
シュのガタつきが必ず起こりました。
● マシンによってはエクスポートボタンを押して処理が走っているウィン
ドウはでるのですが、書き出したはずのデータがどこにも存在しない
という問題も起こりました。
160

©KLab Inc.
©KLab Inc.
■ 検証まとめ
● ツール自体は魅力的。
○ とはいえ最初からアニメーションのみエクスポートができないの
は気がかり。
● 私と同じような不具合に遭遇した場合は、ツールのバージョンを変え
たり最新のDailyBuildにすると解決する場合があります。
● 現行のDailyBuildで不具合が緩和されているので、次の
ProductionBuildでは恐らく今回私が遭遇したような不具合は起こら
ないと思います。
● 次のProductionBuildに期待！
161

CEDEC2020 プロシージャルゲームコンテンツ制作ブートキャンプ 2020 Part 1 モバイルゲームはじめに

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Similar to CEDEC2020 プロシージャルゲームコンテンツ制作ブートキャンプ 2020 Part 1 モバイルゲームはじめに

Similar to CEDEC2020 プロシージャルゲームコンテンツ制作ブートキャンプ 2020 Part 1 モバイルゲームはじめに (20)