GCC2016 ゲームエフェクト制作の現状報告

ゲームエフェクト制作の現状報告
株式会社スクウェア・エニックス林武尊
©2016 SQUARE ENIX CO., LTD. All Rights Reserved.
公開版

自己紹介
2

自己紹介
• 林武尊（TAKERU HAYASHI）
• スクウェア・エニックス大阪支社
• 入社して丁度１０年
• エフェクト作っています
• 最近はマテリアルを作ったり

自己紹介
• スクエニ大阪支社について
• 20年以上前からあります
• グランフロント大阪
• キングダムハーツシリーズ
• サガ2 / サガ3 / FF EXPLORERS

自己紹介
• KINGDOM HEARTS Re:CHAIN OF MEMORIES
• KINGDOM HEARTS Birth by Sleep
• KINGDOM HEARTS 3D [Dream Drop Distance]
• KINGDOM HEARTS -HD 1.5 ReMIX-
• KINGDOM HEARTS -HD 2.5 ReMIX-
• KINGDOM HEARTS HD 2.8 Final Chapter Prologue
• KINGDOM HEARTS III

自己紹介
関西でゲームエフェクトの勉強会を主催
「VFX技術者交流会」
https://vfxstudygroup.doorkeeper.jp/
登録して頂ければそちらに告知をお送りします

自己紹介
Houdini 勉強会
（3週間に1回ペース）
興味ある方はご連絡ください

自己紹介
情報交換を盛んにしていきたい！
それと‥
関西を盛り上げたい！

エフェクト関連コミュニティ
9

• 「GDC Visual Effects Artist Roundtable」
GDC2012年から始まったエフェクトのラウンドテーブル
GDC ラウンドテーブルで得た情報量 2015 - Demystifying VFX, Technical Artist, Art Director & Leadership at GDC 2015 -
http://www.slideshare.net/tarokobayashit/gdc-2015-vfx-technical-artist-art-director-leadership-at-gdc-2015
GDC 2015 Visual Effects Artist Roundtable Summary
http://www.drewskillman.com/gdc2015_vfxroundtable.pdf
http://gdcvault.com/play/1015883/Visual-Effects-Artist

• 「Game Community Summit」
毎年行われている＆エフェクトのラウンドテーブルがある
GCS 2015
http://gamecomsummit.wix.com/2015
GCS 2014
https://sites.google.com/site/gamecs2014/
GCS 2013
https://sites.google.com/site/gamecs2013/
GCS 2012
https://sites.google.com/site/gamecomsummit/
GameVFX Roundtable セガ岩出さん主催
https://sites.google.com/site/gamevfxroundtable/home
https://sites.google.com/site/gamevfxroundtable/home/ibentonado

• 「ゲームエフェクトコミュニティ」
セガ伊藤さん＆岩出さん主催
G@Game_VFX
https://twitter.com/Game_VFX
第1回ゲームエフェクト交流会
http://game-vfx.connpass.com/event/21065/
Facebookグループ「ゲームエフェクトコミュニティ」
https://www.facebook.com/groups/game.effect/

• akiさんのエフェクト関連コミュニティ
Effectのまとめ
http://frontakk.tumblr.com/
Googleコミュニティ「エフェクトミドルウェア」
https://plus.google.com/u/0/communities/100735120232911860301
Googleコミュニティ「Houdini Japan Community」
https://plus.google.com/u/0/communities/117774287727110728592
Facebookグループ「Houdiniユーザー助け合い所」
https://www.facebook.com/groups/599365066830244/

「関西AECGオフ」
「INDUSTORY」
http://industory.jp/
© 2016. industory

２０１５年を振り返って
15

2015年を振り返って
エフェクト情報が豊作の年だった

• CEDEC2015
FINAL FANTASY XV -EPISODE DUSCAE-のエフェクトはこうして作られた
https://cedil.cesa.or.jp/cedil_sessions/view/1435
妄想から実装へ～次世代VFX表現の、リアルタイムへの落とし込みの挑戦とプロセス～
GameVFX Bootcamp 2015
• CGWORLD
「 METAL GEAR SOLID V 」のメイキングなど
http://cgworld.jp/magazine/cgw206.html
• 月刊MdN
2015年 11月号「特集：エフェクト表現の物理学爆発と液体と炎と煙と魔法と。」
http://www.amazon.co.jp/dp/B015FK5B1C
• ハラタオルさんの「3DCGセル調エヘクト本」
http://www.amazon.co.jp/dp/B00TQJVDD4

• SIGGRAPH2015
ボリュームレンダリング系が充実していて当たり年とのこと / 神戸で「SIGGRAPH ASIA」もあった
http://advances.realtimerendering.com/s2015/
• AU Japan 2015
ベイマックスとアナと雪の女王のエフェクトメイキング
http://monoist.atmarkit.co.jp/mn/articles/1510/28/news009.html
• 菊地蓮氏の「ハイエンドエフェクトＣＧ制作の現状」
https://atnd.org/events/65880
• ジェットスタジオ近藤啓太に聞くエフェクトスキルアップトレーニング
http://cgworld.jp/interview/1505-jetstudio.html

Houdiniも浸透が始まってきた？

ここから本題
20

本日のお品書き
21

• 近年の注目タイトル
• 近年の技術トピック
• 次のテクスチャフォーマット
• フローマップどうやって作る？
• パフォーマンスの改善案
• 半透明のソートと深度
• ポストエフェクトについて
• モバイルのエフェクト事情
• VRのエフェクト事情
• エフェクト制作に便利なツール

ゲーム業界のアーティストやエンジニア・映像業界の方々
約50人にヒアリング

• 去年の講演内容とは被りません
スライドシェアのページ
http://www.slideshare.net/ponta5884/up-44405567
興味ある方はこちらも一通り目を通して頂ければと思います
色々と勘違いして書いたものが混在していますが‥

Q
「近年の注目タイトルは？」Ｑ.

近年の注目タイトルは？
• GUILTY GEAR Xrd -SIGN- / -REVELATOR-
• NARUTO－ナルト－疾風伝ナルティメットストーム4
• Street Fighter V
• Splatoon（スプラトゥーン）
• スーパーロボット大戦OG ムーン・デュエラーズ
国内

• Bloodborne
• FINAL FANTASY零式HD
• METAL GEAR SOLID V: THE PHANTOM PAIN
• Ace Combat 7
• 二の国II
国内

• ゼルダの伝説最新作
• Scalebound
• モンスターハンターストーリーズ
• FINAL FANTASY XV
• KINGDOM HEARTS III
国内

• inFAMOUS Second Son
• Ryse: Son of Rome
• Batman Arkham Knight
• Rise of the Tomb Raider
• Tom Clancy's Rainbow Six Siege
海外

• DRIVECLUB
• Just Cause 3
• Ori and the Blind Forest（オリとくらやみの森）
• Cuphead
• Gigantic
海外

• Tom Clancy's The Division
• Quantum Break
• Horizon Zero Dawn
• Paragon
• Uncharted 4
海外

• その他のタイトル、海外のインディーズタイトルなど
・「十三機兵防衛圏」ヴァニラウェア新作
・「スナックワールド」ゲーム画面はまだ
・「Year Walk 最後の啓示」スウェーデンの儀式
・「CLOSERS」セガのアクションRPG
・「Diablo3」BlendAddを活用したエフェクト
・「Unravel」毛糸のキャラクター
・「OVERWATCH」ブリザード新作
・「no man‘s sky」自動生成される惑星
・「HK project」Koola氏のUE4による新作
・「Hellblade」Ninja Theoryの新作
・「FOR HONOR」UBI新作
・「ABZU」風の旅人のチームの新作
・「The Witness」Braidのデベロッパー新作
・「RIME」スペインのデベロッパー新作
・「INSIDE」LIMBOのデベロッパー新作
・「Year Of The Ladybug」狂気の世界
・「Dreams」ポイントクラウド、LBPのスタッフ新作
・「Beyond Eyes」水彩タッチ
・「firewatch」NPRの美しい自然
・「Everybody’s Gone to the Rapture -幸福な消失- 」
・「Darkest Dungeon」ストレス管理RPG
・「Robinson: The Journey」VR
・「Hover Junkers」VR
・「Land‘s End」VR
・「Cryptark」ローグライク要素もある全方向スクロールSTG
・「FAR」イラストタッチ
・「SuperMegaQuest」ドット
・「Duelyst」ドットのエフェクトがとても良い
・「Doko Roko」ドット
・「Hyper Light Drifter」ドット
・「KRITIKA」韓国のMMO
・「Way to the Woods」学生作品

• 西川善司の「試験に出るゲームグラフィックス」（1）
「GUILTY GEAR Xrd -SIGN-」で実現された「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密，前編
http://www.4gamer.net/games/216/G021678/20140703095/
• 西川善司の「試験に出るゲームグラフィックス」（2）
「GUILTY GEAR Xrd -SIGN-」で実現された「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密，後編
• GDCの舞台で世界に披露された「GUILTY GEAR Xrd -SIGN-」の「アニメにしか見えない3Dグラフィックス」制作手法
• GDC GuiltyGearXrd's Art Style : The X Factor Between 2D and 3D
http://www.gdcvault.com/play/1022031/GuiltyGearXrd-s-Art-Style-The

• 「FINAL FANTASY 零式HDにみる新しいHDリマスター」講演資料完全版
http://hexadrive.jp/lab/case/1573/
• 『FINAL FANTASY 零式 HD』我ら来たれり！（ビジュアル編）
http://hexadrive.jp/hexablog/いいモノづくり道/5467/
• 『FINAL FANTASY 零式 HD』我ら来たれり！（テクノロジー編）
• 『FINAL FANTASY 零式 HD Steam』再び我ら来たれり！（グラフィック編）
• 『FINAL FANTASY 零式 HD Steam』再び我ら来たれり！（追加機能編）

Q
「近年の技術トピックは？」Ｑ.

近年の技術トピックは？
「GDC2015 VFX Artist Raoundtable」より抜粋

• エフェクトのPBR
エフェクトは専用にライティング / Fableが成功例
• グローバルな風 / フィールド
エフェクト側で影響するか設定したり風の量を持たせたり
• フリップブック周りのテクニック
次のトピックでご紹介
• エフェクトアーティストの育成
アートや手描き能力、アニメーション、シミュレーション
• おすすめツールとミドルウェア
Houdini使用者が増えている印象（40人中6～7人との話）
• オフラインシミュレーション
流体をメッシュ化してループにするなど / OpenVDB
• チーム編成
エフェクト同士で固まるかどうかなど
• VR
とにかく重いという話 / 本スライドVRのトピック参照
• ボリュームレンダリング
まだ誰からも話が挙がらなかったとのこと
• その他のテクニック
アルファクランチ（しきい値）など

ありがたいことに日本語で紹介されているスライドが！
• GDC ラウンドテーブルで得た情報量 2015
- Demystifying VFX, Technical Artist, Art Director & Leadership at GDC 2015 -
http://www.slideshare.net/tarokobayashit/gdc-2015-vfx-technical-artist-art-director-leadership-at-gdc-2015
• GDC 2015 Visual Effects Artist Roundtable Summary ※英語

フリップブック周りのテクニックについて

フリップブックって？
「パラパラ漫画」連番画像を1枚のテクスチャに敷き詰めて順に再生する
（連番テクスチャ、アニメテクスチャ、パターンアニメ、スプライトアニメ、テクスチャアトラス）
Epic Games, Inc. All rights reserved. Epic Games, Inc. All rights reserved.

ラウントテーブルで出ていた話題はこんな感じらしい

ディストーション(歪み)とオプティカルフローマップは
フリップブックの品質を向上しサイズを小さくできる
Distortion & Optical flowmaps to improve quality of flipbooks and reduce size.
補足：「フローマップ」と「オプティカルフローマップ」はどちらもベクトル情報をテクスチャにベイクしたものだが
フローマップはただ流れる方向を指定したもので、オプティカルフローマップは2つの画像間で相関関係のあるピクセルの移動を示したもの

つまりどういうことか？

こちらのサイトをチェックしてみてください
• Klemen Lozar Online Portfolit | Frame Blending with Motion Vectors
http://www.klemenlozar.com/frame-blending-with-motion-vectors/
After Effectsプラグイン「Twixtor」のPro版で制作している模様
http://www.flashbackj.com/revision_effects/twixtor/

• 「KILLZONE 3」でオプティカルフローマップを使ってたらしい
• ハードサーフェスな連番に対して効果的だけど重なり合うような半透明（煙）に使うと崩れる
• フレームレートが高くなってきているのでオプティカルフローでパターンを補間している
• （補間することで）テクスチャサイズを小さくできておすすめ
• 半透明な部分があるとオ－バーラップされるので注意が必要
• After Effectsのプラグインでオプティカルフローマップを作成していた
ディストーション(歪み)とオプティカルフローマップは
フリップブックの品質を向上しサイズを小さくできる
Distortion & Optical flowmaps to improve quality of flipbooks and reduce size.

話題になっていたSIGGRAPH2015の
「Uncharted 4」のフリップブック周りの技術
Chasing Film in 5ms: A Look at the Real-Time VFX of Uncharted 4: A Thief's End
http://s2015.siggraph.org/attendees/talks/events/chasing-film-5ms-look-real-time-vfx-uncharted-4-thiefs-end

その他のテクニック「アルファクランチ」について

• アルファクランチ（アルファしきい値）
アルファ値に対して完全な透明・不透明の堺をテクスチャのしきい値でコントロール
イメージ

• 名前の通り、しきい値で透明部分をコントロールするテクニック
• グラデーションテクスチャを用意しておいて、透明にする境界を変えてメタボールの
ように結合させたり、逆に千切れていくような表現ができる
• 古くから様々なタイトルで活用されている様子
• 透明か不透明かの二値にしてしまうのであれば、不透明領域の描画負荷を抑えられて
良いかも（UE4であればブレンドモードをMaskedにする）
• 例えばUE4のマテリアルならFloorやCeilを利用するなどで簡単に行える
• After Effectsなら「グラデーションワイプ」で簡単に再現できる

• グラデーションを加えたいならリニア補間
MinとMaxを指定して0～1の間を直線補間（UE4ならLinear Interpolateノードで可能）
イメージ

• グラデーションを加えたいならスムースステップ
もんしょの巣穴blog | [UE4] マテリアルノードの解説補足の1
http://monsho.blog63.fc2.com/blog-entry-135.html
イメージ

• これら以外にも、単純にテクスチャに対して減算することでアルファ値を全体的に下
げていくだけとか、乗算して値を増やしながら減算することで白の領域をキープしな
がら黒の領域を増やすとか、千切れさせる方法は色々とあると思う

• Surface Tension: Liquid Effects in The Last of Us
http://www.gdcvault.com/play/1020145/Surface-Tension-Liquid-Effects-in
GDC2014の Naughty Dog の講演
「The Last of Us」でのアルファクランチの応用事例

Q
「次のテクスチャフォーマットは？」Ｑ.

次のテクスチャフォーマットは？
• DXTC / BC は？
PCやコンソールに限って言えば‥
圧縮効率・展開速度・そこそこの画質・対応環境の多さ‥のバランスが圧倒的すぎて
「崩れる日は来ないのでは？」という声
スマフォ向けではほとんど使われていない
⇒ GDCのラウンドテーブルでも「カラーテクスチャならBC7（対応してないならDXT5）‥
モノクロテクスチャならBC4」がセオリーであることが伺える
プラットフォームや開発環境でBC7が対応されていれば、もうそれで良さそうな印象はある
DirectX 11の圧縮フォーマットBC1～BC7について（前編）
http://www.webtech.co.jp/blog/optpix_labs/format/6993/
DirectX 11の圧縮フォーマットBC1～BC7について（後編）

• PVRTC / ETC2 は？
画像によってはDXTCよりも画質が良いが、PC・コンソール向けに
ほとんど普及していないことと、圧縮処理に非常に時間がかかるのがネック
PVRTC圧縮のアルゴリズムとは？
ETC圧縮のアルゴリズムとは？

• ASTC は？
1 DirectX12でオプション扱いとは言え対応した（ddsに格納可能）
2 主要GPUベンダーが対応を表明している
‥という点で、PC/スマフォ共通で使えて、
OpenGL/DirectXどちらでも扱えることになるので広まる可能性はあるかも？
スマホアプリ開発に利用される最新の画像ファイルフォーマット「ETC2・ATC(ATITC)・ASTC・WebP」に追加対応
「OPTPiX imésta 7 for Mobile & Social」を無償アップデート
http://www.webtech.co.jp/information/release/20140731/imesta.html

• この先は？
「非圧縮のままでもいいや」っていう流れになる可能性もあるかも知れない
※この場合の非圧縮はRGB565, RGBA5551, RGBA4444 といった、ハイカラー(16bitカラー)のこと
DXTC / PVRTC / ETC2 などとは圧縮効率は半分以下になってしまうものの、
圧縮ノイズが無いのと、プラットフォームに依存しないという大きなメリットがある
実際に現状でも、PC・コンソールおよびスマフォで、画質を重視したい箇所や
(VRAM・GPUに余裕があり)共通で使いたい場合には、すでに使われている

• この先は？
それぞれのハードが、VRAM、CPUともに充分にリッチになれば
これらのハイカラー、あるいは更に倍サイズのフルカラー(32bitカラー)の
テクスチャが主流になる日も来るかもしれない
⇒ モノクロ1チャンネルならDXT5と同じサイズなので非圧縮は今でもアリなのでは
‥果たしてHDRテクスチャがメインになる日は来るのか！？

Q
「フローマップどうやって作る？」Ｑ.

フローマップどうやって作る？
• FlowMap Painter
• Flowmap Generator
• Photoshop
• After Effects
• Substance Painter
• Mari
• Houdini
• その他のDCCツール
⇒ フリーハンド
⇒ シミュレーション
2つに大別される感じ

• FlowMap Painter
無料で公開されているスタンドアローンのツール
ブラシでなぞった方向にベクトルを向かせる
非常にシンプルですぐ馴染める
上下左右がラップアラウンドされた状態で作業ができる
teckArtist
http://teckartist.com/?p=96
Youtubeの解説動画
https://www.youtube.com/watch?v=sJBn8ykpMwQ

• Flowmap Generator
有料のフローマップ作成ツール
スランドアローン版とUnityプラグイン版がある
シミュレーションによってフローマップを作成できる
Superposition Games |Flowmap Generator
http://www.superpositiongames.com/products/flowmap-generator/
- Unityプラグイン版＄40
- スタンドアローン版＄25（30日間のトライアルあり）
Youtubeの解説動画
https://www.youtube.com/watch?v=gEV7TxZQIsY

• Photoshop
Photoshopのフィルタ「ゆがみ...」で作成する方法
UE4公式ブログでフローマップ作成用のアクションが配布されている
Photoshopでの作成手順も解説されている
とてもお手軽
Photoshopでフローマップの生成 - What is Unreal Engine 4
https://www.unrealengine.com/ja/blog/photoshop-generated-flow-maps
Epic Games, Inc. All rights reserved.

• Substance Painter
Substance Painterでフローマップを作る方法が解説されている（！）
もんしょの巣穴blog | [SP] フローマップの作り方
http://monsho.blog63.fc2.com/blog-entry-198.html

• Moving the Heavens:
An Artistic and Technical Look at the Skies of The Last of Us
http://www.gdcvault.com/play/1020146/Moving-the-Heavens-An-Artistic
GDC2014の Naughty Dog の講演
フローマップの活用について取り上げられている

Q
「パフォーマンスの改善案は？」Ｑ.

パフォーマンスの改善案は？
• 半透明のライティングが重い
ライティングすると重い
• 半透明のシャドウが重い
影生成も重い
• そもそも半透明が重い
半透明のオーバードローの問題 / 主にGPU
• CPUが重い
エフェクトが同時に沢山出ると重い / コリジョン判定が重い / 軌跡を描かせると重い / etc..
• ロード時間が厳しい
テクスチャが重い / マテリアルのサイズが馬鹿にならない

これらの改善案について

• 案① 半透明エフェクトはライティングしない
ライティングしないのも1つの手
半透明エフェクトでライティングしたいものは煙くらい
ライティングしたい理由は「背景と馴染ませたいから」
24時間経過のあるゲームじゃないなら場所に応じて決め打ちの色味を加えるのも手では
すると力技になってしまうが自動化したとしても調整とデバックのコストはどのみちシーンの数だけかかる

• 案② マテリアル内でライティングを完結させる
半透明エフェクトでライティングしたいものは煙くらい
煙は形がはっきりせず薄いのでそこまで正確なライティングは求められない＆背景に馴染めばそれで良い
それならライティングはマテリアルで完結させるので良いのでは？
IBLでも何でも良いので色と方向の情報を何かに格納しておいてそれを取得できれば良い
シャドウの影響やSSAOの影響などを考慮しない前提

• 案③ 頂点ライティングで行う
ピクセル単位でライティングするから重い
煙は形がはっきりせず薄いので頂点シェーダーでのライティングで十分なのでは？
実際、軽くなり手応えを感じているとの声（ただし4頂点だと見た目が厳しいとのこと）
ノーマルマップ使用時のようにディティールを求めない前提

• エンジニアの方のコメント
頂点ライティングは良い選択だと思う
不定形であればそこまで正確でなくても問題ないだろうし、ある程度ポリゴンが割られていれば十分だと思う
頂点数が動的に変化しない（距離に応じたLODなどをやらない）のであれば
テッセレーションを使わずに予めポリゴンを割っておいた方が速いかも知れない
テッセレータを起動するとパイプラインの切り替えが発生したり、パイプラインが長くなることで負荷が増える
ただ、頂点数がかなり増えるようだとメモリバスネックになってしまう可能性もある
相当数増やさなければ大丈夫だとは思うが、PCの場合はハードウェアによって差がでるかも

• 半透明のシャドウが重い
影生成も重い
• 案シャドウの描画は最低限に留める
どうしても欲しい場面のみ使用して、それ以外では諦めるのも1つの手
キャストシャドウやレシーブシャドウを場面に応じて使い分ける
あとは距離に応じて使い分けるとか？

• 案① 描画面積＆重なる数を減らす
パーティクルの数や1つのエフェクトを構成するエミッターの数を減らす
パーティクルの拡大縮小アニメはピークを超えたら縮小させる
頂点カラーのアルファ値が0になったらスケールを0にする（MGSVの事例）
パーティクルLODの機能でカメラに近いと逆にパーティクルを減らす（MGSVの事例）
描画サイズが大きいパーティクルは寿命を短くして同時に表示される枚数を減らす
テクスチャに合わせてモデルをカット（各ゲームエンジンに自動トリミング機能が搭載され始めている？）
LODは視界の確保という面でも有効かなと

テクスチャに合わせたモデルの自動トリミングについて
Epic Gamesさんの新作「Paragon」ではフリップブックパーティクルをオフラインで自動トリミングして
半透明の描画負荷をかなり減らしているとのこと（全コマ分の頂点座標を保持する形）

テクスチャに合わせたモデルのトリミングについて
エフェクトデザイナー採用 | 株式会社カプコン
http://www.capcom.co.jp/recruit/mid-career/cs-career/vfx/side_other.html#contents
「立体アニメーションパターンを使ったエフェクト表現」の紹介が大きなインパクトがあった！
3DS向けにトリミング＆立体化？
（CEDEC2015でのVFX講演で流れた動画のダイジェスト版も）

• 案② 重たいシェーダーの使用に気を付ける
重たいシェーダーを使ってはいけない訳では無く、場面に応じて使い分ける
（画面に1個しか出ないエフェクトなら重くても良い‥など）
そのためには何が重いのかをある程度知っておいた方が良いかも
処理負荷を検証するのはとても時間がかかるので、検証するなら大まかに（こういう情報は特に共有し合いたい）
基本的にはゲーム中に重くてネックになった場合に調べて削減しながら積み上げていくので良いと思う

• 案③ 不透明で済むものは不透明にする
光の破片など、形状全体が光るようなパーティクルは不透明にしてブルームで光らせる
特に単色やグラデーションで塗り潰せるセルアニメタッチのゲームだと、効果を発揮しやすいのではないか

• 案④ 縮小バッファ
多くのタイトルで導入されている印象（身近な意見の他、最近のCGWORLDを見ても家庭用では使用事例が多い）
逆に言えば縮小バッファを使用しないと厳しいというのが今尚続く現状‥
使用して効果が高いかどうかは元々の描画負荷が高いかどうかが大きそう
アップサンプリングしてシーンに合成するコストもあるので注意が必要
問題は縮小バッファ使用するエフェクトと使用しないエフェクトを画面内に混在させたい場合‥

• エンジニアの方のコメント①
縮小バッファは「縮小されたバッファに描いて後で合成する」手法の総称なので、いろんな運用方法がありそう
知っている範囲では１回だけで他のエフェクトとの奥行きが破綻することを無視する運用が多いが
「Halo Reach」では、動的に奥行き別に縮小バッファに書きたい煙などを３分割して、
縮小バッファ描画を３回行うことで他のエフェクトとの破綻を軽減するような手法が取られていた

• エンジニアの方のコメント②
当然、拡大してコンポジットするのでエッジ部分の精度に問題が出る
よく使われるのは「Birateral Upsampling」だと思う（SSAOのアップサンプリングでもよく使われる）
http://d.hatena.ne.jp/hanecci/20131030/p1
しかし最近はパーティクルについてNVIDIAの再接近深度手法の方がいいという話を見た
http://developer.download.nvidia.com/assets/gamedev/files/sdk/11/OpacityMappingSDKWhitePaper.pdf
SSAOなどでも同様なのか、パーティクルのようなエフェクトについてのみなのかはわからない

• CPUが重い
• 案① 一度に沢山表示しない
エフェクトを生む瞬間が一番重いので、発生タイミングを少しずつズラす
一度に、または連続で沢山表示されるエフェクトは間引く
処理負荷に応じて間引くような仕組みを入れる
パーティクルLODを利用して距離に応じて間引く
沢山表示されるものにCPU負荷の高い機能を使用しない（コリジョン判定はスクリーンスペースに任せるなど）
エミッターの数を減らす

• CPUが重い
• 案② 並列化する
CPUの負荷を分散させる ⇒ お近くのエンジニアにお聞きください

• ロード時間が厳しい
テクスチャが重い / マテリアルのサイズが馬鹿にならない
• アセットレベルでの工夫
テクスチャを小さくする（幅1ピクセルで済むなら1ピクセルにするとか）
マテリアルはなるべくインスタンスを活用する
アセットは種類が何にしても流用できると良い
何をオンメモリにするか計画的に考えてオンメモリのアセットをなるべく活用する
「PC向けでメモリに余裕がある」ケースでも「ストリームが遅かったりでなるべく節約している」という声

Q
「半透明のソートと深度について」Ｑ.

半透明のソートと深度について
• エフェクトは‥
エフェクト単位でソート
エミッター単位でソート
パーティクル単位でソート
① エミッターがパーティクルを放出する
② 1つのエフェクトは複数のエミッターで構成される
③ シーンに複数のエフェクトが表示される

• 1つのエミッター内のパーティクル同士の描画順は？
アーティストが設定できるのが一般的（生まれた順、生まれた逆順、深度順など）
• 1つのエフェクト内のエミッター同士の描画順は？
アーティストが設定できるのが一般的（並び順または設定した数値順）
• シーン内のエフェクト同士の描画順は？
全ての半透明オブジェクトを各オブジェクトの中心点でカメラからの距離でソートして奥から順に描画するのが一般的？
それに加えて描画優先（プライオリティ）を数値で指定して描画順をコントロールできたりも（万能ではない）
• 不透明なパーティクルのソートは？
シーンの深度と比較チェックして描画する（Zテスト）
ディファードレンダリングならディファードの時点で描かれるなのでエミッターやエフェクトの順番関係なし
• ポリゴン単位でのソートは？
重いが一部に絞るならアリではという声

もっと厳密なソートはできないのか？

• OIT（Order Indipendent Transparency）
エンジニアの方のコメント
OITは正確に処理を行うリンクリストを用いたものが重すぎて使いものにならないのが難点
これが使えるレベルになると深度情報も取得できるのでDOFなどにも応用効きそうだが
トゥームレイダーで使用されたAMDの髪用レンダリング技術のTressFXでは
低解像度＆不完全ソートのOITを実装しているが、それでも重い
制限付きでもいいのでハードウェアサポートされないと使用は厳しいという印象

「Weighted Blended OIT」は最近まで知らなかったが実装は比較的容易
http://jcgt.org/published/0002/02/09/
どこまで使えるものなのかわからないが、
既存のゲームエンジンにも組み込みやすいかと思うので試してみる価値はありそう
「A Phenomenological Scattering Model for Order-Independent Transparency」
http://graphics.cs.williams.edu/papers/TransparencyI3D16/
Weighted Blendedの発展形？

Depth Peeling手法は結構古くから存在しているが実際に使っている例を見ない
使われてるのかもしれないが、
複数回レンダリングしないといけないし費用対効果が低いという印象が強い
同様の意味でもDeepGBufferなど流行らなそうだなぁと

大まかでいいので深度を取れないのか？

• Moving to the Next Generation - The Rendering Technology of Ryse
http://www.crytek.com/download/2014_03_25_CRYENGINE_GDC_Schultz.pdf
クライテックの「ライズ」で、半透明のおよその深度値をアルファチャンネルに描いて
不透明の深度情報に合成する方法がとられている

Q
「ポストエフェクトについて」Ｑ.

ポストエフェクトについて
⇒ 次回のテーマとさせてください
ポストエフェクトでのテクニックを始め、どういう意図でエフェクトのデザインを決めているのか、
またどういう演出意図でポストエフェクトを行っているのか‥
そして、どういう意図でカラーリングしているのかといったあたりについて、発表できれば良いなあと

Q
「モバイルのエフェクト事情は？」Ｑ.

モバイルのエフェクト事情は？
家庭用ゲーム開発との違いは？

• リリースしてからも開発は続く
リリースするとスタッフは少し減るが、運営やバージョンアップ対応のために割と残る
売り上げに応じて人数は増減する（流動的）
まずはリリース、そこからが本番で細やかな調整や修正はお客さまの反応を見ながら対応
ライブ感がある
• 運営主導の傾向がある
そのためクオリティよりも量産速度が求められる
お客さまの反応を見ながらになるので「3日で作って」のような突発的な発注も多い

• モバイルならではの話
・ゲーム画面下部を操作スペースにすると画面が狭くなるので
カメラを引くと攻撃している様子が分かりにくい
そのためエフェクトを派手にすることで攻撃を分かり易くしている
・カードイラストだけでは動きを出し辛いのでエフェクトやロゴアニメで演出を派手にする
そのためカードものはエフェクトやロゴアニメが演出面で主役と言って良い
・カードイラストや2Dキャラの場合、エフェクトとの描画優先であったり平面的な絵に対して
どこまで立体的に見せるかが肝
（床に敷くエフェクト以外は全てキャラ絵の手前くらいに割り切っているが）

機種別の対応は？

• アーティストが機種別の対応をしていた例
最初にiPhoneで作って後からAndroidに移植する際に動かなかったり処理落ちしたりがあった
Androidのスペックに幅があるので幅広く対応すると大変
• アーティストが機種別の対応をしていない例
エフェクトを作成する作業では機種を意識することはなかった
機種に応じてアセットの圧縮フォーマットを変えて自動ビルド
ただ、画面比率が違う端末に合わせて、エフェクトの発生位置や長さを変えたケースがあった
特にUIと絡めたエフェクトで、特定の位置から別の位置に移動したように見せたいといった場合

スマフォのスペックについて
（時期や機種によってかなり差があるようなので参考意見として）

• スペック的にはPS3 / 開発的には携帯ゲーム機の感覚に近い
・iPhone4～5あたりでは、PSPと同等か少し上という印象だった
・iPhone4の頃はドローコールはすごく意識して、まとめられる素材を全部まとめるなど色々工夫していたが
iPhone5の頃からそこまで神経質にならずに作成できるようになった
骨数50本くらい/3000ポリくらいのキャラが画面に10体出て、そこにエフェクトがいくつか出ても平気
少なくとも年々端末が高スペック化しているので楽になってきている
PS2くらいの感覚で作っていたのが今はPS3くらいの感覚で作っていればいい気がする
・ライディング、シェーダー負荷によってかなり変わると思うが、感覚としてPS3ぐらいの感覚で作っている
モバイルの場合は背景データが比較的軽いので、処理を割とキャラに回せる

• GPUに特化したAPIにより高速化されるのでは
・主に描画面積よりもパーティクルの同時描画枚数を気にしていた
そのあたりは描画APIやエンジンによるところが大きいと思う
・専用機に比べてGPUの性能をフルに引き出せていないんじゃないかと思う
AppleのMetalとかAndroidのVulkanなどのGPUに特化したAPIが出揃ってきて、
そこにUnityやらUE4（対応済み？）の描画エンジンが対応してくれればもっと高速に描画できるのでは
同じGPUでも劇的に高速化されるようなので
・発熱やバッテリー消費量にも注意が必要（逆に全く気にしていないという声も）

• 容量面で厳しい
・スマフォの画面解像度は高いが、DL容量を考慮するとテクスチャを大きくできない
半透明エフェクトのテクスチャは512 x 512を数枚重ねると処理落ちしたので、256ｘ256以内に抑えている
炎などの連番テクスチャは4～8コマくらい
キャラ絵も含めてかなり圧縮をかけて容量を抑えていた
・インストール時の容量制限が最初の壁
（以前は3G/4GでのDLできる容量制限が50MBだった ⇒ 後に100MBになった）
・インストール時の容量はUIデザイナーは以外はあまり気にしない
初期インストールは、マイページやチュートリアルや最低限のデータしかないから
問題はアセットバンドル（Unityではそう呼ぶ）に類する追加コンテンツの容量（あとからDLさせるもの）
この容量をできるだけ小さくする必要がある

• 容量面で厳しい
・容量も無いが時間的な余裕も無いので汎用素材を使い回ししてエフェクトを作っている
容量はどんどん追加されるキャラクター周りの素材に割かざるを得ない
・ロード時間短縮のためにも画像はなるべく軽くしている

エフェクト専任の需要について

• 需要はある
・アニメーターとしてはキャラクターの動き、UI、エフェクト含め画面で動くもの全てを作る
そのため基本的には幅広い経験がある人材が適している
しかし元々エフェクト経験者だったため専任に近い役割りだった
グラフィックが洗練されてきているので需要はあると思う
・エフェクト専任の需要は高い
人数体制もどんどん増えているし、タイトルによっては家庭用ゲーム並みの人数になってきている
・需要は十分にある
専任になるか他のパートと兼業するかといったところか

• 需要はある
・エフェクトの需要は確実にある
というか絶対にいる、強く断言できる
外部の方と一緒に作ることが多いので環境の構築をどうするかなどが課題
・確実にコスト向上の傾向があるのを感じる
スペック向上により家庭用ゲームのクオリティを求められる案件が多くなっている
メッシュを用いたエフェクトの制作も多く、ビルボードだけでは収まらず、工数が必要なものが増えてきた
（キャラや背景はまだ2Dが主流だが）エフェクトは3Dになってきていて家庭用と変わらなくなってきている

エフェクトに力の入ったタイトルは？

• MOBIUS FINAL FANTASY
3Dキャラ・3D背景・3Dエフェクト（FX Maker）
• ファイナルファンタジーブレイブエクスヴィアス
2Dキャラ・2D背景・3Dエフェクト（BISHAMON）・ムービー演出
• 星のドラゴンクエスト
3Dキャラ・3D背景・3Dエフェクト（ツールは未公表）
• ファイナルファンタジーグランドマスターズ
• 乖離性ミリオンアーサー

• 魔法科高校の劣等生 LOST ZERO
3Dキャラ・3D背景・3Dエフェクト（BISHAMON）
• 白猫プロジェクト
3Dキャラ・3D背景・3Dエフェクト（Shuriken）
• グランブルーファンタジー
2Dキャラ・2D背景・3Dエフェクト
• モンスターハンターエクスプロア
• モンスターギア
3Dキャラ・2D背景・ 3Dエフェクト（shuriken）

• クロスサマナー
2Dキャラ・2D背景・3Dエフェクト（Shuriken）
• フォルティシア
• サマナーズウォー
• DESTINY CHILD
https://www.youtube.com/watch?v=mPG2T-jXIi0
https://www.youtube.com/watch?v=fFzG7AOmEgM&feature=youtu.be

• Vainglory（ベイングローリー）
• GUILD OF HONOR
• MARVEL オールスターバトル
• Hearthstone（ハースストーン）
2Dキャラ・2D背景・2Dエフェクト？
• セブンナイツ

• ［Unite 2015］モバイルでナンバリングに負けないHDクオリティの実現を目指す
「MOBIUS FINAL FANTASY」はUnity 5をどう使っているのか
• 【特別企画】妥協のないエフェクトが輝きを放つ「FFブレイブエクスヴィアス」
http://game.watch.impress.co.jp/docs/interview/20160209_740405.html
• 【セミナー】エフェクトアーティストは「映像の化粧師」…
『クロスサマナー』の奥義を彩るポケラボ池田氏が登壇した「エフェクトデザイン論」を取材
http://social-creator.info/articles/151350
• 【GGG#4】DeNA初のUnityプロジェクト『戦魂』におけるVFXの開発事例
http://gamebiz.jp/?p=151642

• Unityを使ったエフェクト作成方法を発表しました。
http://developer.aiming-inc.com/study/unity_effect/
「幻塔戦記グリフォン～新章～」での事例あり
• 【特別企画】「魔法科高校の劣等生 LOST ZERO」に見るVFXミドルウェア「BISHAMON」の威力
http://game.watch.impress.co.jp/docs/interview/20141212_680043.html
• 【西川善司のモバイルテックアラカルト】第9回:
今のスマホ・タブレットのグラフィックス表現能力って家庭用ゲーム機でいうとどれくらい？
http://gamedeets.com/archives/34433
• 【Unity】Unity Performance Casual Talk 「ドローコール伝説の終わり」レポート
http://qiita.com/baba_s/items/5260807ced7fc3c02ca6

Q
「VRのエフェクト事情は？」Ｑ.

VRのエフェクト事情は？
VRにおいての全体的なこと

• 高解像度と高フレームレートが要求される
・パフォーマンス面で厳しいため、半透明の描画やポストエフェクトの優先度が低い
・ポストエフェクトは処理面でとても厳しい
（屈折などのフレームバッファエフェクトも非常に重い）
・GPUをフルに使用している状態で、数を沢山表示するだけでも厳しい
・できれば90fps欲しい ⇒ 11msしかない
・できれば120fps欲しい ⇒ 8msしかない
・ディファードは重いからフォワードが良いのでは？
（多光源を諦めてG-Bufferを使用するポスプロも諦める）

• 立体視ならではの問題
・3DSとは桁違いにビルボードに対する違和感が強い
目立つエフェクトは「ちゃんと立体的に作る」のが重要になってくる
・平面的に処理するポストエフェクトも相性が悪い

• エフェクトはとても重要で今後の進化が求められている
・VRでは細かい部分のクオリティよりもエフェクトやモーションのように
動きのあるものが目立ち没入感を高める
・エフェクトの存在感に新鮮さを感じた
・ポストプロセスの大半を諦めなければならないため、エフェクトの重要性が増している
・3D音響と同じくらい今後進化していくのでは

• 視差競合にはかなり気を付ける必要がある
・例えばロックオンマークがオブジェクトの位置に表示されるが最も手前に描画される‥など
没入感の阻害だけでなく酔いの原因にもなりかねない
その点でもVRのエフェクトは注意しないといけない
視差の大きなゲームでは視差競合はかなり致命的になる
例えばエフェクトを表示する際にオフセットを与えるのは良いが、
深度テストを行わないなど描画優先を変えたいと思った時には注意を払う必要あり

VRのビルボードエフェクトについて

• とてつもない違和感
・板であるという違和感に加えて、常にこちらを向くというのもよく分かってしまう
たが、不透明度を下げて重ね合わせることで低減できる
・明らかに嘘だと分かる表現は没入感が低下する
3Dモデルを使うか、GPUパーティクルのような表現で板感を減らすのが良さそう
・ビルボードの中でも特に軸ビルボードの板ポリ感が目立つ

VRのポストエフェクトについて

• ポストエフェクト全般
・立体視だとペラ感が目立つ
・カメラレンズを再現するためのものはVRには不適切、特にDOFやレンズフレア
ただし色収差はダメージ表現などに使えるかなと思っている
・VRでは映画のようにカメラのレンズシミュレーションというよりも人間の目線に近い
なので人間の目で起きないことはあまりやらないのが一番な気がする

• DOF（被写界深度）
・3DSの時には入れてみると良かった
・DOFは錯乱円がみえるものは、そういう板がシーンに沢山ある感じで違和感がある
ブラーは遠くがボケているのは良いが、前ボケはレイヤー感というか、
違和感が強かったので使えるとは思えない
・人間の目線をある程度の精度で取得できるなら、視野外周辺をぼかすというのは効果的かも

• 連なるレンズフレア
・スクリーン面に貼り付けると書き割り感が強く出る
光源がカメラ片方分だけ画面から見切れた時に見た目がマズくないように対応する必要がある
3DSの時に光源に一番近いゴーストをスクリーン面にして、徐々に手前に飛び出すようにして
調整することで自然になった
・レンズフレアはカメラのレンズ内乱反射で起きるが
人間の目はレンズ一枚なのでロマンティックなビジュアルにはならないのでは
（映画的なかっこいいレンズフレアは、複数枚のレンズだからこそだと言える気がする）

3D対応について映像業界ではどうしているのか？

• 映像系の方に聞いてみました
・流体は実際に立体感のあるちゃんとした流体でなければ平面的に見える
フェイクで流体っぽく見せてる場合、立体視ではむしろ違和感が強調される
あとから重ねたほうが効率的なのか、一緒にレンダリングしたほうが現実的なのかは都度判断
流体については「どうやって平面にしても大丈夫にするか」という出発点ではなく
「平面にして大丈夫そうなところ以外は普通にボリューム計算する」というのがプリレンダ側の発想
カメラが動くことを考えるとほぼ平面を選択することはありえない（あくまでプリレンダの意見）
・コンポ部門がLR両方コンポするというフローなら、基本的にはCG素材もLR両方レンダーすると思う
ただ遠景のレイヤーなんかは1つの素材で行けないこともないので、1素材で…ということもあるかも
その場合はコンポソフトの3D機能で空間上に配置…ということになると思う
ただ色々面倒なんでCG側でLR用意した方が無難とは思う

・DOFとレンズフレアはどちらも通常通り入れる
レンズフレアは光源の位置がLRで違うので、LRそれぞれ適切に設定する
立体的に見えにくいというのはある
レンズフレアは立体的に見えにくい…画面端に見切れるオブジェクトは立体的に見えにくい…など
いくつかルールが知られているが、それを言っていると映画にならない・演出できないということで、
映画制作なんかでは絵作りを優先して無視するケースも多いように思う
・エフェクトに関わりなく3D素材は基本的にステレオカメラでレンダリングするとのこと
フレアなど2DエフェクトはLRで同じものを乗せて、
視差が出るように手動で調整という方法しかないのではと思う

・誤解がないよう補足すると
最近の映画では2D/3D変換が主流で1枚絵として完成したものから3D映画にする
タイタニック3Dなど古い映画を3Dにしているものや、最近公開される映画のほとんどは2D/3D変換
LRをレンダリングするというのはガチで3Dで制作するパターンなので、少し時流と逸れるかも
・プリレンダーという意味ではs3D以上のアプローチは取りようがなく
（画作りの精度を担保するのと、首振りなどのインタラクティブ性を許容するのとの決定的な断絶）、
映像屋であっても、VRに取り組むならUEやUnityなどに取り組むのがむしろ当然とどこも思っている
と思われる

Q
「エフェクト制作に便利なツールは？」Ｑ.

「BISHAMONゲームエフェクトデザイン入門」の付属スクリプト（o_s_t さん作）
Twitter ID: @mmb_jp（o_s_t）さん
https://twitter.com/mmb_jp
あかめも | BISHAMON本についてた連番画像並べるスクリプトの修正メモ
http://redglasses67.jimdo.com/2015/09/04/bishamon本についてた連番画像並べるスクリプトの修正メモ/
Twitter ID: @redglasses67（赤めがね）さん
https://twitter.com/redglasses67
• Phtoshopで連番画像を結合する(PNGなどの透過画像対応)
エフェクト制作に便利なツールは？

• Phtoshopでシームレステクスチャを作るスクリプト
“画像を3x3に分割してラップアラウンド的に配置することでシームレステクスチャを作る
Photoshopスクリプトを作ってみました。”
https://twitter.com/nal_ew/status/654297045092577281
https://twitter.com/nal_ew/status/705939619162927104
Twitter ID: @nal_ew（なる）さん
https://twitter.com/nal_ew

• モデル上でテクスチャをプレビューするツール
なるさんが制作されたツール「texmiru」（公開はされておらず配布予定もなし）
平面 / リング / 立方体‥のモデル上でテクスチャを貼り付けてプレビューできる
モデルの分割数や半径、高さなどを変えることができる
UVのタイリング数やUVスクロール速度を設定できる
Photoshopで描いてプレビュー‥のサイクルを早められる
こういったツールを作ってもらうのも良いかも？
Twitter ID: @nal_ew（なる）さん
https://twitter.com/nal_ew

まとめ
139

まとめ
• エフェクト制作で抱える課題について大きな進展はなし
• エフェクトの情報は年々増えている
• モバイル向けの国内タイトルで3Dが増えた
• UnityとUE4の無料化、VRなど盛り上がっている
• 情報交流していきましょう！

まとめ
Facebookやってます。ぜひ友達リクエストをお願いします！

ご清聴ありがとうございました
142

GCC2016 ゲームエフェクト制作の現状報告

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie GCC2016 ゲームエフェクト制作の現状報告

Ähnlich wie GCC2016 ゲームエフェクト制作の現状報告 (20)

GCC2016 ゲームエフェクト制作の現状報告