高品質なエフェクトのためのエディター機能とワークフロー紹介

高品質なエフェクトのための エディター機能とワークフロー紹介 それでは、高品質なエフェクトのためのエディター機能とワークフロー紹介の講演をさせていただきます。 ©CAPCOM 1

エフェクト機能紹介 ・エディター機能の解説 ・表現機能と効果の解説 ・タイトル連携ワークフロー ・最適化対応 講演に関するアジェンダは以下の通りです。 エディター機能の解説 表現機能と効果の解説 タイトル連携ワークフロー 最適化対応 2 この４つの内容をご紹介します。 ©CAPCOM 2

エディター機能の解説 まずエフェクトアセットがどのように作られるか、エディターの機能を交えて解説します。 3 ©CAPCOM 3

エディター機能の解説 これがRE ENGINE上で動作するエフェクトエディターです。 表現を形作るエフェクトアセットを、このエディターで作成します。 画面真ん中に見える領域は、ノードを管理するエディターです。 4 画面上側に見える領域は、エディターの各種コマンドや設定を備えています。 画面左側に見える領域は、表現を作るために必要な機能のカタログです。 画面下側に見える領域は、一部パラメーターをTimelineで管理するエディターです。 ©CAPCOM 4

エディター機能の解説 カタログからEmitterノードにアイテムをD&Dすることで機能の追加をすることが可能です。 アイテムというのは表現を作るのに必要な機能の名称です。 ©CAPCOM 5 5

エディター機能の解説 ここからは表現を構成する基本的な機能について説明します。 Transformは、Emitterの姿勢を制御するアイテムです。 Game ObjectやJointなどグローバルなTransformに対してローカルなTransformを定義します。 6 Transformの座標、回転、拡縮はマニュピレーターで制御が可能です。 Parent Optionsは前述したGame ObjectやJointの姿勢に追従するための設定になります。 ©CAPCOM 6

エディター機能の解説 Spawn アイテムはパーティクルの発生に関する設定を行います。 パーティクルのバッファや発生数、発生間隔やループ回数を設定することが可能です。 7 Life アイテムはパーティクルの生存時間に関する設定を行います。 Appear, Keep, Vanish という生存時間の区間が設けられており、それぞれα値に影響します。 ©CAPCOM 7

エディター機能の解説 EmitterShape3D アイテムはパーティクルの発生範囲に関する設定を行います。 形状は３つ用意されており、Cylinder、Box, Sphereを選ぶことが可能です。 8 ベーシックな発生方法だと、これで事足りますが、幾何学的な形状や範囲で発生させるアイテムは別で用意されています。 ©CAPCOM 8

エディター機能の解説 Velocity3D アイテムはパーティクルの移動に関する設定を行います。 単純な方向を指定する移動から、前述したEmitterShape3Dの形状と連動した発生方法が設定できます。 9 発生形状と移動パターンは密接に関係しており、要望によって連動するような仕組みが取り入れられています。 ©CAPCOM 9

エディター機能の解説 TypeBillboard アイテムは描画に関する設定を行います。 BlendTypeは複数存在し、作る表現によって切り替えます。 左の映像がAddContrastによる加算ブレンドです。 右の映像が輪郭を特定の色でブレンドするEdgeBlendです。 10 EdgeBlendはアーティストが実現したい表現のために実装されました。 ©CAPCOM 10

エディター機能の解説 ただ、用意するBlendTypeの表現だけではアーティストは満足できない場合があります。 そこでアーティストが作成するシェーダー及びマテリアルで描画する TypeBillboard3DMaterial アイテムも実装されています。 11 ビルボード以外にも、マテリアルで描画できるアイテムは数多く用意されています。 ©CAPCOM 11

エディター機能の解説 UVSeuqnece アイテムは、Texture及びパターンアニメーションに関する設定を行います。 UVSequenceAssetというTextureとUVパターンを管理している別アセットが存在しており、 このアセットを設定して表現を切り替えます。 ©CAPCOM 12 12

エディター機能の解説 火の玉が地面に落ちたら、火花を散らせる。 そんな表現を実現するためにActionという機能が存在します。 ActionはParticleからEmitterを生成する機能です。 特定のアイテムからActionノードへ接続及び通知されることによって実現されます。 13 パーティクルのライフ遷移時及び消滅時にActionに通達するPtLife。 これは花火などの時限的に発生する表現に使用されます。 地形コリジョンに衝突した際にActionを通達するPtColliderAction。 これは攻撃などのインタラクションな表現に使用されます。 ©CAPCOM 13

表現機能と効果の解説 ここまでが基本的な機能の説明でした。 次からは実際にゲームタイトルで使用されているエフェクトの表現とそれを実現しているアイテムの機能について解説します。 ©CAPCOM 14

まずはこちらをご覧ください。 ストリートファイター６のリュウによる波動拳のエフェクトです。 波動拳の溜め、発射、浮遊、衝撃、全て異なるエフェクトアセットが用意されています。 ©CAPCOM 15 15

表現機能と効果の解説 このように波動拳のエフェクトは複数のエフェクトアセットで構成されています。 お見せしたエフェクト表現の一部ではありますが、エフェクトアセットの内部構成を解説していきます。 ©CAPCOM 16 16

表現機能と効果の解説 こちらが波動拳の発射及び本体のエフェクトアセット全体構成です。 一部の表現を作るだけでも、数多くのEmitterが必要になります。 17 Emitterの一部構成を掻い摘んで解説します。 ©CAPCOM 17

表現機能と効果の解説 手の表現部分です。 ランダムではない決められた細かい動きを制御したいため PtTransform3Dというアイテムを使用しています。 18 これはTimelineで設定されたTransformの値をパーティクル単位で制御できるアイテムです。 また、メッシュの描画にはTypeMeshというアイテムを使用しています。 ©CAPCOM 18

表現機能と効果の解説 TypeMeshに設定されているマテリアルから一部パラメーターがリフレクションされるように実装しています。 エフェクト側で描画するときだけ表現を変えたい。 そういったケースは非常に数多くあると思います。 19 この機能により、エフェクト側で描画するときだけ特定のパラメーターを調整して描画することが可能です。 ©CAPCOM 19

表現機能と効果の解説 こちらはコア部分となる正面用の表現です。 角度によってフェードを行うFadeByAngleというアイテムを用いています。 見る角度で都合が悪くなる表現は多々あります。 それを解決するために角度によってフェードアウトすることが可能です。 20 正面以外の角度はフェードによってαが薄くなることから、 映像で見えるエフェクトは正面用に作られた表現ということが分かります。 ©CAPCOM 20

表現機能と効果の解説 コア部分の別表現です。こちらも角度で一部のパーティクルがフェードアウトするように設定されています。 角度によるフェード以外に調整するべき項目は他にもあります。 例えばトーンマッピングを無視したい、ポリゴンのエッジをフェードしたい等です。 21 もちろん対応する機能は存在しています。 Soft ParticleやDetonemapを適用するためにShaderSettingsというアイテムを使用します。 ShaderSettingsはマテリアル以外の描画パイプラインで描画用パラメーターを調整するアイテムです。 Particle LightingやVariable Rate Shading等の設定も用意されており、 アーティストは簡単に豪華な表現を作り上げることができます。 このように様々なEmitterとアイテムによる機能によって表現が作られていることが分かります。 ©CAPCOM 21

表現機能と効果の解説 続いてストリートファイター6で実装されたStretchBlurという機能を紹介します。 まずはこちらの動画をご覧ください。 攻撃部位のディティールを保ったブラー表現になっています。 22 通常のモーションブラーでは実現できなかった表現をこのStretchBlurで表現することができました。 ©CAPCOM 22

表現機能と効果の解説 ブラーサンプリング範囲 StretchBlurは、画像のように特定箇所にブラーサンプリングを指定しつつ、 ビルボードやトレイルにブラー結果をマッピングすることが可能なアイテムです。 23 足先のブラーサンプリング範囲がデバッグ表示です。 この機能により、コスチュームの部分色を反映したブラー結果をディストーションと合成することができます。 ©CAPCOM 23

表現機能と効果の解説 こちらはデバッグ表示が分かりやすい画像です。 キャラクターを囲うように表示されている矩形範囲がブラーサンプリングの範囲です。 ブラーサンプリングした結果を複数のビルボードにマッピングして残像を表現しています。 ©CAPCOM 24 24

表現機能と効果の解説 しかし、これだけ広い範囲だと背景色もサンプリングしてしまいます。 そこで、特定の描画対象だけマスクしてサンプリングするためにステンシルを利用しています。 25 画像右側に見える緑色のデバッグ表示対象はステンシル９番で描画され、 StretchBlurは画像範囲にある９番のステンシルピクセルをサンプリングします。 ©CAPCOM 25

表現機能と効果の解説 こちらもステンシルによって脚の描画ピクセルのみをサンプリングしています。 春麗の百裂脚の残像は複数のStretchBlurを脚元でサンプリングしてポリゴンにマッピングして表現しています。 ©CAPCOM 26 26

続いてコチラをご覧ください。 BIOHAZARD RE:4の火球による爆発表現です。 大規模な爆発と破砕表現によって迫力のある演出が実現できています。 27 しかし、このようなインパクトのある表現はどうしても作成されるアセットも規模が大きくなってしまいます。 ©CAPCOM 27

表現機能と効果の解説 爆発表現の全体構成です。 爆発時のインパクトや破砕表現、火花、火炎、煙による余韻の表現等々 28 大規模かつ細かく表現を制御するには、このように処理するEmitterの数も多くなります。 ©CAPCOM 28

表現機能と効果の解説 EffectAsset EffectAsset Thread0 Thread1 Thread2 Thread3 Emitter0 Emitter1 Emitter0 Emitter1 Emitter2 Emitter3 Emitter2 Emitter3 Emitter4 Emitter5 Emitter6 Emitter7 Emitter0 Emitter5 Emitter1 Emitter2 Emitter3 Emitter4 Emitter6 Emitter1 Emitter3 Emitter0 Emitter2 Emitter7 このような多量のEmitterを処理するためにRE ENGINEのエフェクトではEmitter単位で並列処理を行っています。 エフェクトアセットに関係なく全てのEmitterは並列処理のジョブに登録され、順次処理されます。 29 これにより、Emitter数が多いエフェクトアセットで処理がストールするといった問題は発生しません。 ©CAPCOM 29

表現機能と効果の解説 Emitter Priorityなし Emitter Priorityあり また、これだけの多量なEmitterを描画すると、表現によってはカメラの位置で描画に不備が生じます。 それを防ぐために、EmitterPriorityというアイテムが存在します。 30 このアイテムをRootノードに設定すると、Emitterのインデックス順で描画優先を制御することが可能になります。 カメラ距離による自動的にソートされる不都合を回避したい場合に使用します。 ©CAPCOM 30

次にこちらをご覧ください。 BIOHAZARD VILLAGEで姉妹が移動する際に表現しているエフェクトです。 31 姉妹の身体から大量の虫が発生しています。 虫は常に一定の距離で姉妹の身体に纏まりついており、移動と共に大量の虫も追従しています。 これらの虫に関する挙動のために複数のアイテムが利用されています。 ©CAPCOM 31

こちらが分かりやすくエディター上で発生している映像です。 大量の虫の挙動を更新及び描画したいため、GPU Particleとインスタンシングによるメッシュ描画で処理しています。 32 ©CAPCOM 32

表現機能と効果の解説 TypeGpuMeshというアイテムがGPU Particleで制御かつメッシュをインスタンシング描画する機能です。 分かりやすいように白いスフィアメッシュで描画しています。 33 虫の挙動に関してはVelocity3DやAttractor, VectorFieldといった動きを提供する機能のアイテムで構成されています。 Attractor アイテムは、特定箇所にパーティクルを収束させる機能です。 この機能より、大量の虫を有機的に動かすことができています。 もしAttractorを使用しない場合、右の映像のように収束せずGPU Particleは四方に離散してしまいます。 ©CAPCOM 33

次にScreenSpaceEmitterというアイテムを紹介します。 まずはこちらをご覧ください。 BIOHAZARD VILLAGEの一部カットシーンのエフェクトです。 34 門に表示されている文字から細かいパーティクルが発生しているのが分かります。 ©CAPCOM 34

表現機能と効果の解説 発生範囲を描画結果から制御したい、という要望からScreenSpaceEmitterは実装されました。 このアイテムは画面に描画されたピクセル情報からパーティクル発生を制御し、色の反映を行う機能です。 35 Emitterにアイテムとして追加するだけで利用が可能です。 ただし、GPU Drivenな機能なためGPU Particleでのみ使用可能です。 ここではTypeGpuBillboardというアイテムがGPU Particleとしての機能を担っています。 ©CAPCOM 35

表現機能と効果の解説 Pixel Buffer ピクセル位置情報書き出し Color Fetch Pixel Buffer GPU Particle生成 GPU Particle Buffer もう少し細かく解説します。まずG-Bufferに描画するメッシュのPixel Shaderから ピクセル位置の情報を専用のPixel Bufferに書き出します。 マテリアルを構成するシェーダーグラフエディター側にPixel Bufferに書き出す専用のノードが用意されています。 36 ScreenSpaceEmitterで発生できるパーティクル最大数を制限しているため、 ある程度ピクセルを間引いてPixel Bufferに書き出します。 書き出すピクセル間隔は解像度によって調整されます。 GPU Particleを発生させる際、Pixel Bufferから情報をフェッチして発生位置を制御します。 また、ピクセル位置情報から既に描画されている画面イメージの色をサンプリングして GPU Particleの色に反映させることも可能です。 ©CAPCOM 36

表現機能と効果の解説 このように様々なアイテムやエディターの機能を活用してエフェクトアセットが作られています。 RE ENGINEのエフェクトは、日々機能拡張や技術研究を行っております。 37 次はエフェクトアセットがタイトルへどのように実装されているのか、そのワークフローを紹介します。 ©CAPCOM 37

タイトル連携ワークフロー それでは、タイトル連携ワークフローを紹介します。 エフェクトがどうやって作られているか説明していただきましたので、 次は作ったエフェクトが実際のゲームシーンにどうやって配置されるか見ていきましょう。 ©CAPCOM 38

エフェクトの主な呼び出し方 エフェクトは常にシーン上に配置する「Game Object」の「1 Component」である「Effect Player」として利用されます。 そのうえでここへ登録/構築する方法は複数あり、主にタイトルで使用されている方法をご紹介します。 ©CAPCOM 39 39

エフェクトの主な呼び出し方 Scene 直接配置 一つ目は先ほど見せた通りシーンに直接配置する方法です。 ここで配置するのは背景エフェクトと呼ばれる煙やフォグ、印象的なシーンでは火災の火や発光物が設定されます。40 ©CAPCOM 40

エフェクトの主な呼び出し方 Scene 直接配置 C# スクリプト ※Resource≒コンバート済みのAsset 次にC# スクリプトから直接配置する方法です。 非常に単純なコードで、先ほどツール上で行ったように、「Game Objectを作って、Effect Playerをさして、 アセットをセットする」という一連の手順をコードで記述しているだけです。 41 C# スクリプト制御は、もちろん好きなようにプログラムすることができるので一番柔軟に対応することができます。 ©CAPCOM 41

エフェクトの主な呼び出し方 Scene 直接配置 C# スクリプト Timeline 紐づけ もう一つはTimeline紐づけで、特定タイミングでエフェクトを出すように設定する方法もよくあります。 例えばキャラクターモーションの特定タイミングでエフェクトを出すとか カットシーンの特定の時間でエフェクトを出すといった方法です。 ©CAPCOM 42 42

エフェクトの主な呼び出し方 Scene Scene 直接配置 Game Object Set! Transform Effect Player C# スクリプト other script… Timeline 紐づけ Game Object Game Object いずれも内部的にはGame Objectを作ってEffect Playerをセットしていることに変わりはなく、 アーティストやプログラマーが呼び出しやすい方法やツールで配置できます。 43 ©CAPCOM 43

C# スクリプトの呼び出しの欠点 ※場合によって担当者が前後する エフェクトを依頼 エフェクトを作成 エフェクトを呼び出し 尺の調整を依頼 発生フレーム修正 見た目調整 見た目調整依頼 この中でC# スクリプトに関して、確かに柔軟ではありますが、 設定がプログラマー依存になってしまうのでゲームデザイナーやアーティストの視点から見るとイテレーション性に欠けます。 44 例えば、ゲームデザイナーからエフェクトの発注を受け、作ったエフェクトをプログラマーに呼び出してもらうとします。 ただ実際に触ってみると尺を伸ばしたり発生タイミングをずらしたいということは往々にしてあります。 そうすると毎回プログラマーが間に入ることになりますし、タスクも直列でしか進行できなく効率が悪いです。 ©CAPCOM 44

解決方法 Scene 直接配置 Game Object Transform C# スクリプト Effect Player C# スクリプト EPV other script… ※EPV=Effect Provider の略称 Timeline 紐づけ それを解決するために EPVというツール機能があります。 C＃スクリプト側ではIDを引数に実行を行い、アーティストはIDに対してエフェクトアセットの設定や発生タイミング、 45 方向、ボーンの参照設定などを柔軟に設定できる仕組みです。 ©CAPCOM 45

EPV ( Effect Provider ) EPVツールの見た目はこのようになっています。 今回はストリートファイター6よりリュウの真昇竜拳のEPVを軽く見て見ましょう。 技を一つとっても複数の要素と段階で細かくエフェクトの設定項目が分かれていますね。 46 今開かれてる「カメラ前 顎ヒット」はカメラに追従して調整されているエフェクトですね。 少し角度を変えるとこんな感じ。 項目を見て見ると先ほど触れたIDがありますね。 これがプログラマーが発行、あるいはアーティストが指定したIDで、特定タイミングで出るようにすれば、 あとはカメラに追従したり、キャラクターのボーンに追従したり、好きなように設定できるのでイテレーション性が高く、 結果としていくつもの要素に対して細かくエフェクトを設定することができます。 ©CAPCOM 46

EPV ( Effect Provider ) IDを発行しといたので 指定タイミングに呼んどきます 少しディレイを入れたいな 方向をこうしたいな パラメータ設定 エフェクト指定 地面と足が接触した瞬間にも 何か出しときたいな こうしてゲームデザイナー、プログラマー、アーティストがそれぞれ並行で作業することができ、 負担も分散でき、非常に高いイテレーション性を実現しています。 47 ©CAPCOM 47

さらなる拡張 Scene 直接配置 Game Object Transform C# スクリプト Effect Player EPV other script… Timeline 紐づけ Timeline EPV Helper 紐づけ ちなみにEPVが非常に有用だったのでTimeline紐づけの際にも、専用にEPV Helperというものが提供されています。 これにより非常に柔軟かつ細かいエフェクトの挙動をさらにここではプログラマーを一切介さなくても、 制御できるようになっています。 ©CAPCOM 48 48

より細かい制御をしたい！ ここまででエフェクトの「出し方」をご紹介してきましたが、 エフェクトを出した後にもう少し細かい制御をしたいことは往々にしてあります。 例えばコンボ数や攻撃の段階、ゲームの進行度に応じてエフェクトの色味や勢いを変えたい場合などですね。 49 それを実現するためにエフェクトにはExtern ParameterとExpressionというものが用意されています。 ©CAPCOM 49

Extern Parameter & Expression Extern Parameterはエフェクトエディターのノードの一つとして増設します。 こう置くだけでC# スクリプトから文字列指定でアクセスできるようになります。 さらに、エフェクトには実数値以外にもExpression、 つまり「式」を入力できるのでそこで利用すればエフェクトに反映させることができます。 50 Extern ParameterはC# スクリプト以外の各種ツールにも一覧が乗るようになるので、 先ほどご紹介したEPVやTimeline制御などにも対応します。 ©CAPCOM 50

エフェクトから C# スクリプトを制御したい！ ブラーをかけたいけど C#スクリプトから設定しないと さて、先ほどはC# スクリプトからエフェクトを制御していましたが、 今度は一周回ってエフェクトからC# スクリプトを制御したいという要望も出てくるものです。 51 RE ENGINEではその要望にもお答えします。 エフェクトにはPtBehaviorというアイテムが用意されており、 C# スクリプト側で専用のクラスから派生すると自動的に使用可能になります。 この例ではラジアルブラーを制御するC# スクリプトと連動しており、 ただ呼び出すだけでエフェクトを中心にブラーをかけられます。 必要であればパーティクルのライフといった値も手に入るので、寿命をエフェクト側で制御することもできます。 ©CAPCOM 51

PtBehavior with Vector Fiede 床に落ちている 桜に注目 他にもエフェクトにはVector Fieldを参照して対象エフェクトに風を吹かせる機能があります。 ストリートファイター６を参考に見て見ると、 床に落ちている花びらに対してインタラクションさせるためにVector Fieldを設定しています。 52 ただしこのVector FieldもC# スクリプトからシーンにセットする必要があります。 そして毎回C# スクリプトコードで設定するのは面倒なので、 それもエフェクトで完結できるように PtBehavior からセットできるようにしています。 ©CAPCOM 52

最適化対応 ここまででエフェクトがゲームの世界に出るまでの流れを紹介いたしました。 次はこのゲームの世界のエフェクトを、現実の世界の皆様にお届けし、 快適にプレイしていただくための仕上げのお話になります。 ©CAPCOM 53

描画負荷が高くなりやすいエフェクト 32ms 32ms 16ms 16ms エフェクトの作成は処理負荷と描画負荷との闘いでもあります。 どんなにかっこいいエフェクトができても、フレームレートが大幅に落ちるような描画負荷だったら削らざるを得ません。 54 そして往々にしてド派手でかっこいいエフェクトは重くなりがちです。 ©CAPCOM 54

肩身が狭いエフェクト 背景物 エフェクト作成 残り5msです カットシーン ・モーション ・カメラワーク キャラクター ・モデル ・モーション こちら3msに 抑えました 2msに 抑えときました エフェクト作成 エフェクト作成 エフェクトは絵作りや依存するアセット的な兼ね合いでスケジュール的にも下流の工程におり、 実装する頃には1フレーム内の空いてる処理時間がほぼないなんてこともあります。 特にライティングされている半透明エフェクトはシェーディングコストが非常に高いため、 既に重たい複雑なステージでフォグを追加すると処理時間が溢れやすいです。 55 そういう土壌もあって常に最適化との闘いが繰り広げられています。 ©CAPCOM 55

Effect Profiler 私たちRE ENGINE エフェクトユニットもそういう背景を理解しているので、 最適化タイミングだけではなく事前にも計測できるように各種処理計測ツールをご用意しています。 その一つがEffect Profilerツールです。 これは現在のシーン中で実行中のエフェクトの一覧を見ることのできるツールです。 56 特定のタイミング中にフレームレートが下がった場合このツールを見たら何が重いのか一目瞭然です。 ©CAPCOM 56

エフェクトエディターの基本的機能としての提供 ただし、毎回プロファイラーを開きながら作業するのは正直煩わしいです。 それも私たちは理解しており、かつ処理負荷を気にしながら作業できるように、 色々な場所に簡易的なプロファイル機能を併設しています。 57 とくにエフェクトエディタ上には再生するたびに、CPU負荷、GPU負荷、メモリ使用量がわかるようにしてあります。 これで処理負荷を気にしながらエフェクトを作ることができるわけです。 ©CAPCOM 57

高負荷なエフェクト機能の注釈 負荷がかなり高い機能 負荷が高い機能 値によっては負荷が高くなる機能 他にもアイテムリストや各アイテムのパラメータには負荷に関する注意マークが付けられており、 「なんか重いな」というときにパラメータを見直しやすくなっています。 またアーティスト的にも迂闊に使っていい機能なのかわからないという心理的不安を和らげる効果もあります。 ©CAPCOM 58 58

最適化のサポート それでもタイトル側だけでは最適化しきれるわけではありません。 その場合はRE ENGINEの各ユニットによる手厚いサポートがあります。 この時、より詳細なプロファイリングやエンジンレベルでの最適化なども行いますが、 同時にこれまで複数のタイトルで培ってきたノウハウがあるため、 アーティスト向けのプロファイルの方法、どういった場面で重くなり、どう対処すると良いか というものの傾向がわかってきたのでそれらの調査方法が文章化され共有されています。 59 これを元に、より早い段階で描画負荷の抑制もでき、より高品質なエフェクトが作成できます。 こうした努力によって皆様の手元に安定したフレームレートで快適にプレイできるゲーム がお届けされているわけです。 ©CAPCOM 59

ご清聴ありがとうございました 以上、「高品質なエフェクトのためのエディター機能とワークフロー」の紹介でした。 ご清聴ありがとうございました。 60 ©CAPCOM 60