アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~【出張ヒストリア！ ゲーム開発勉強会 2019】

アーティストの為のプロファイル入門！ ~楽しいRenderDocの使い方~ Epic Games Japan Dev Rel Tech Artist 斎藤 修

こちらのスライドは以下URLからダウンロード可能です （ダウンロードされるとGIF動画が見れます！約200MBです） https://epicgames.box.com/s/lew6zf1ryn9n31i9mgyf1f1m8z3grpz5 #UE4 | @UNREALENGINE

自己紹介 斎藤 修 Epic Games Japan/Dev Rel Tech Artist https://qiita.com/EGJOsamu_Saito ● 2019年6月からEpicに入りました ● それまでは規模大きめのコンソール開発してました ● その前は漫画とか描いてました ● UE4とHoudiniが好物です #UE4 | @UNREALENGINE

はじめに 皆様ご安心ください #UE4 | @UNREALENGINE

はじめに 今日は 難しい事 一切話しません #UE4 | @UNREALENGINE

はじめに え でも 「ぷろふぁいる」とかいうの 話すんでしょう？ #UE4 | @UNREALENGINE

はじめに いえいえ「プロファイル」 怖くないですよ！ #UE4 | @UNREALENGINE

はじめに むしろ とっても楽しいです！ #UE4 | @UNREALENGINE

はじめに そもそも「プロファイル」って何？ #UE4 | @UNREALENGINE

はじめに プロファイル (標準化) プロファイル（英語: profile）は、標準化で、合意した仕様の部分集合(サブセッ ト)であるか、選択した組み合わせの横顔(profile)の一つである。 出典: フリー百科事典『ウィキペディア（Wikipedia）』 最終更新 2015年11月1日 (日) 07:27 https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB_(%E6%A8%99%E6%BA%96%E5%8C%96) #UE4 | @UNREALENGINE

はじめに ？？ #UE4 | @UNREALENGINE

はじめに #UE4 | @UNREALENGINE

はじめに 要はこの絵が 「どんな風にできていってるか」を 見る事です #UE4 | @UNREALENGINE

はじめに #UE4 | @UNREALENGINE

はじめに フォトショで言えば ここを見るイメージ！→ #UE4 | @UNREALENGINE

はじめに ● 凄い絵がどう書かれているかって 気になりませんか？ #UE4 | @UNREALENGINE

はじめに ● 凄い絵がどう書かれているかって 気になりませんか？ ● 神絵師の作業配信とか #UE4 | @UNREALENGINE ついつい見ちゃいません？

はじめに ● 凄い絵がどう書かれているかって 気になりませんか？ ● 神絵師の作業配信とか ● 絵ができていく過程って #UE4 | @UNREALENGINE ついつい見ちゃいません？ 面白いですよね？

はじめに それを見るのが「プロファイル」です！ #UE4 | @UNREALENGINE

今回の講演ターゲット #UE4 | @UNREALENGINE

今回の講演ターゲット アーティストの方 #UE4 | @UNREALENGINE

今回の講演ターゲット アーティストの方 特に ● ● ● ● ● #UE4 | @UNREALENGINE

今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● ● ● ● #UE4 | @UNREALENGINE

今回の講演ターゲット アーティストの方 特に ● ● これまで一度もプロファイルしたことない方 これからちょっとやってみたいなと思っている方 ● ● ● #UE4 | @UNREALENGINE

今回の講演ターゲット アーティストの方 特に ● ● ● これまで一度もプロファイルしたことない方 これからちょっとやってみたいなと思っている方 やってみたいって程ではないけど嫌ってこともない方 ● ● #UE4 | @UNREALENGINE

今回の講演ターゲット アーティストの方 特に ● ● ● ● これまで一度もプロファイルしたことない方 これからちょっとやってみたいなと思っている方 やってみたいって程ではないけど嫌ってこともない方 頼まれたらやってやらんことはない方 ● #UE4 | @UNREALENGINE

今回の講演ターゲット アーティストの方 特に ● ● ● ● ● これまで一度もプロファイルしたことない方 これからちょっとやってみたいなと思っている方 やってみたいって程ではないけど嫌ってこともない方 頼まれたらやってやらんことはない方 やりたくないけど業務命令ならやる方 #UE4 | @UNREALENGINE

今回の講演ターゲット…からちょっと外れる方 #UE4 | @UNREALENGINE

今回の講演ターゲット…からちょっと外れる方 毎日プロファイラとにらめっこしている プログラマさん TAさん #UE4 | @UNREALENGINE

今回の講演ターゲット…からちょっと外れる方 毎日プロファイラとにらめっこしている プログラマさん TAさん ● すみません ドローコールの数でも数えておいて下さい #UE4 | @UNREALENGINE

では早速「プロファイル」を 取ってみましょう！ #UE4 | @UNREALENGINE

RenderDoc #UE4 | @UNREALENGINE

RenderDoc 神「プロファイラ」です オープンソースで無料で高機能！ Windows Linux Android Stadia Switchに対応！ #UE4 | @UNREALENGINE

RenderDoc 「ぷろふぁいら」？ #UE4 | @UNREALENGINE

RenderDoc この絵を #UE4 | @UNREALENGINE

RenderDoc この絵を入れると #UE4 | @UNREALENGINE

RenderDoc この絵を入れると レイヤー見れる #UE4 | @UNREALENGINE

RenderDoc この絵を入れると レイヤー見れる そんなイメージ！ #UE4 | @UNREALENGINE

RenderDoc https://renderdoc.org/ 公式HPからダウンロードして… #UE4 | @UNREALENGINE

RenderDoc GIF インストール！ #UE4 | @UNREALENGINE

RenderDoc 準備完了！！ #UE4 | @UNREALENGINE

RenderDoc あともう一つ #UE4 | @UNREALENGINE

RenderDoc UE4にはデフォルトで RenderDocのプラグインが用意されています #UE4 | @UNREALENGINE

RenderDoc このプラグインを入れると #UE4 | @UNREALENGINE

RenderDoc このプラグインを入れると 調べてー #UE4 | @UNREALENGINE

RenderDoc このプラグインを入れると UE4の絵を直接 RenderDocへ送れます 調べてー #UE4 | @UNREALENGINE

RenderDoc 入れ方 #UE4 | @UNREALENGINE

RenderDoc プラグインメニューから… #UE4 | @UNREALENGINE

RenderDoc プラグインメニューから… #UE4 | @UNREALENGINE

RenderDoc プラグインメニューから… #UE4 | @UNREALENGINE

RenderDoc 有効化！ #UE4 | @UNREALENGINE

RenderDoc リスタート！ #UE4 | @UNREALENGINE

RenderDoc リスタート！ #UE4 | @UNREALENGINE

RenderDoc #UE4 | @UNREALENGINE

RenderDoc RenderDocのボタンが現れます！ #UE4 | @UNREALENGINE

RenderDoc プロファイルしたい画面にして #UE4 | @UNREALENGINE

RenderDoc ボタンポチッ！ #UE4 | @UNREALENGINE

RenderDoc GIF ボタンポチッ！ #UE4 | @UNREALENGINE

RenderDoc プロファイル取れました！ #UE4 | @UNREALENGINE

RenderDoc めっちゃ #UE4 | @UNREALENGINE

RenderDoc かんたん #UE4 | @UNREALENGINE

終 #UE4 | @UNREALENGINE

RenderDoc せっかくなので今取ったこいつで 簡単にプロファイルを見ていく流れをご説明します #UE4 | @UNREALENGINE

RenderDoc GIF ダブルクリックしてロードして… #UE4 | @UNREALENGINE

RenderDoc はいここ！ #UE4 | @UNREALENGINE

RenderDoc 「Event Browser」 #UE4 | @UNREALENGINE

RenderDoc フォトショで言う「Layers」です #UE4 | @UNREALENGINE

RenderDoc 超重要なタブ #UE4 | @UNREALENGINE

RenderDoc GIF 次に これ！ #UE4 | @UNREALENGINE

RenderDoc 「Texture Viewer」 #UE4 | @UNREALENGINE

RenderDoc フォトショで言う「画像ウィンドウ」です #UE4 | @UNREALENGINE

RenderDoc 書くのに使った素材「Inputs」と 書いた結果「Outputs」が見れます #UE4 | @UNREALENGINE

RenderDoc 「Event Browser」で各イベント（レイヤー）を選んで #UE4 | @UNREALENGINE

RenderDoc 「Texture Viewer」で見る #UE4 | @UNREALENGINE

RenderDoc 「プロファイル」の流れは基本そんな感じです！ #UE4 | @UNREALENGINE

RenderDoc 早速やってみましょう #UE4 | @UNREALENGINE

RenderDoc GIF #UE4 | @UNREALENGINE

RenderDoc 楽しくないですか これ #UE4 | @UNREALENGINE

RenderDoc #UE4 | @UNREALENGINE

RenderDoc #UE4 | @UNREALENGINE

RenderDoc #UE4 | @UNREALENGINE

RenderDoc #UE4 | @UNREALENGINE

RenderDoc #UE4 | @UNREALENGINE

RenderDoc #UE4 | @UNREALENGINE

RenderDoc 楽しい #UE4 | @UNREALENGINE

RenderDoc すでに皆様にはプロファイルの魅力が 十二分に伝わったかと思うのですが 一応もろもろ説明させて頂きます #UE4 | @UNREALENGINE

RenderDoc フォトショでは下から上に レイヤーが積まれて 絵が出来ていきます #UE4 | @UNREALENGINE

RenderDoc 「Event Browser」では逆に 上から下に処理が進んで 絵が出来ていきます #UE4 | @UNREALENGINE

RenderDoc 「Event Browser」では 処理の種類ごとに 細かくフォルダ分けされており これを「レンダリングパス」とか 呼んだりします。 #UE4 | @UNREALENGINE

RenderDoc ただ…この 「レンダリングパス」…… ……項目多くないですか？？ Small text can be placed in at 10pt #UE4 | @UNREALENGINE

RenderDoc はい ここが最初の難関です #UE4 | @UNREALENGINE

RenderDoc プロファイルの意味を 汲み取るにはどうしても 各レンダリングパスで何をしているのかを ざっくり知る必要があります #UE4 | @UNREALENGINE

RenderDoc https://www.slideshare.net/EpicGamesJapan/cedec2016-unreal-engine-4 そこで #UE4 | @UNREALENGINE これ 弊社篠山の神スライド

RenderDoc UE4のレンダリングの流れが 丁寧に！ かつ超わかりやすく！ 解説されております #UE4 | @UNREALENGINE

RenderDoc ぷれ……ぱす……？ べーすぱす……？？ #UE4 | @UNREALENGINE

RenderDoc わかります 専門用語 最初ちょと取っ付きづらいですよね #UE4 | @UNREALENGINE

RenderDoc わたし 今日言いました #UE4 | @UNREALENGINE

RenderDoc 「レンダリングパス」 サラサラに噛み砕いてご説明しましょう！ #UE4 | @UNREALENGINE

RenderDoc 注： このあと例え話がどんどん多くなって 厳密な意味での情報の正確さが危ういです #UE4 | @UNREALENGINE

RenderDoc 注： このあと例え話がどんどん多くなって 厳密な意味での情報の正確さが危ういです イメージ先行という事で何卒！ #UE4 | @UNREALENGINE

レンダリングパス さて では 先程のお話の続きなのですが… #UE4 | @UNREALENGINE

レンダリングパス GPUが絵を作る流れというのは フォトショで絵を作る流れと よく似ています #UE4 | @UNREALENGINE

レンダリングパス 想像してみて下さい #UE4 | @UNREALENGINE

レンダリングパス もしあなたがフォトショで 絵を書くとしたら…… #UE4 | @UNREALENGINE

レンダリングパス まず「下書き」をして… #UE4 | @UNREALENGINE

レンダリングパス それぞれ要素ごとに「下塗り」…… #UE4 | @UNREALENGINE

レンダリングパス 陰影を書き込みつつ「清書」して… #UE4 | @UNREALENGINE

レンダリングパス 空気感やディテールを「書き込み」 #UE4 | @UNREALENGINE

レンダリングパス 最後にフィルタとかで「仕上げ」 #UE4 | @UNREALENGINE

レンダリングパス 「下書き」 「下塗り」 「書き込み」 「仕上げ」 こんな感じで書きませんか？ #UE4 | @UNREALENGINE 「清書」 ※イメージ図です

レンダリングパス GPUも同じです #UE4 | @UNREALENGINE

レンダリングパス 先程の「Event Browser」の 各レンダリングパス #UE4 | @UNREALENGINE

レンダリングパス これらは 上から順に 先程と同じように 「下塗り」 絵を作っております 「下書き」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE

レンダリングパス 「下書き」 「下塗り」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE 「PrePass」は「下書き」

レンダリングパス 「下書き」 「下塗り」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE 「PrePass」は「下書き」 「BasePass」は「下塗り」

レンダリングパス 「PrePass」は「下書き」 「BasePass」は「下塗り」 「下塗り」 「Lighting」は「清書」 「下書き」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE

レンダリングパス 「PrePass」は「下書き」 「BasePass」は「下塗り」 「下塗り」 「Lighting」は「清書」 「Translucency」は「書き込み」 「下書き」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE

レンダリングパス 「PrePass」は「下書き」 「BasePass」は「下塗り」 「下塗り」 「Lighting」は「清書」 「Translucency」は「書き込み」 「清書」 「PostProcess」は「仕上げ」 「下書き」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE

レンダリングパス 「PrePass」は「下書き」 「BasePass」は「下塗り」 という風に対応しています！ 「下塗り」 「Lighting」は「清書」 「Translucency」は「書き込み」 「清書」 「PostProcess」は「仕上げ」 「下書き」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE

レンダリングパス 「PrePass」は「下書き」 「BasePass」は「下塗り」 飛ばされた 「下塗り」 「Lighting」は「清書」 こいつらは…？？ 「Translucency」は「書き込み」 「清書」 「PostProcess」は「仕上げ」 「下書き」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE

レンダリングパス 今回は無視しましょう #UE4 | @UNREALENGINE

レンダリングパス 稀によくありますよね 超スーパーなフォトショ使いの人とかが 何だこの機能？みたいなの駆使して絵を書いてるの レンダリングパスの中にもそういうチョトややこしい子がいます それらは 今日は見ないフリしましょう また今度にしましょう #UE4 | @UNREALENGINE

レンダリングパス 難しいことは あとで プログラマさんorTAさんに 聞きましょう！ #UE4 | @UNREALENGINE

レンダリングパス ちなみに #UE4 | @UNREALENGINE https://www.slideshare.net/EpicGamesJapan/cedec2016-unreal-engine-4 この神スライドにも詳しい解説あります おすすめです

レンダリングパス 「下書き」 「下塗り」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE というわけで！ この5つに絞って 上から見ていきましょう！

PrePass 「下書き」 「下塗り」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE まずは「PrePass」 「下書き」から

PrePass 「PrePass」と呼ばれる工程では 「下書き」が行われているイメージです #UE4 | @UNREALENGINE

PrePass みなさん「さぁ絵を書くぞーっ」てなったとき いきなり色塗ったりしますか？ #UE4 | @UNREALENGINE

PrePass 白黒で下書きしてから #UE4 | @UNREALENGINE 色塗りません？

PrePass GPUも同じです #UE4 | @UNREALENGINE

PrePass この最初の 「PrePass DDM_AllOpaque」 「下塗り」 を選択して見てみると… 「下書き」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE

PrePass ほら！ GPUも最初に 白黒でざーーっと！ 下書きしています！ GIF #UE4 | @UNREALENGINE

PrePass 正しくはデプス（深度）とよばれる 奥行き情報を書いているのですが #UE4 | @UNREALENGINE

PrePass GPUも最初に下書きしておくことで あとの工程で楽をしているわけですね #UE4 | @UNREALENGINE

PrePass ところで 皆さん 話は変わるのですが #UE4 | @UNREALENGINE

PrePass GPUのレイヤー量 めっちゃ多くないですか （下書きだけでこれ） #UE4 | @UNREALENGINE

PrePass これ どれくらいの時間でやってるの…？ って……気になりません？ #UE4 | @UNREALENGINE

PrePass RenderDocさん ここ押したら測れます #UE4 | @UNREALENGINE

PrePass ポチッ #UE4 | @UNREALENGINE

PrePass 現実で考えたら結構イヤラシイ機能…！！ #UE4 | @UNREALENGINE

PrePass 注： 測るタイミングによって かなり数値が変動するので 厳密に正確な時間とは思わないで下さい （あくまで目安で！） GIF #UE4 | @UNREALENGINE

PrePass ちなみに単位はμs 1μs ＝ 100万分の1秒 #UE4 | @UNREALENGINE

PrePass GPUさん 仕事めっちゃ早いですね… #UE4 | @UNREALENGINE

PrePass あれ？ でも なんかここ…… #UE4 | @UNREALENGINE

PrePass ここだけ遅くない？ #UE4 | @UNREALENGINE

PrePass 気になりません？ #UE4 | @UNREALENGINE

PrePass ここで 先にご説明 #UE4 | @UNREALENGINE

PrePass GPUは PrePass（下書き）の際 #UE4 | @UNREALENGINE

PrePass 元モデルを 画面に合うように変形して #UE4 | @UNREALENGINE

PrePass 書く ということを繰り返します #UE4 | @UNREALENGINE

PrePass 僕らも絵を書く時 #UE4 | @UNREALENGINE 同じように考えますよね

PrePass 複雑なモデルだったら もちろん時間がかかります #UE4 | @UNREALENGINE

PrePass RenderDocではこの工程を 「Mesh Viewer」で見れます！ #UE4 | @UNREALENGINE

PrePass GIF 上の方から順番に見てみると… #UE4 | @UNREALENGINE

PrePass 何 この #UE4 | @UNREALENGINE ポリゴン密度

PrePass こいつのポリ数 約270万（赤枠のIndex数の1/3がポリ数です） #UE4 | @UNREALENGINE

PrePass 完全に修正対象のやつですね こいつのポリ数 約270万（赤枠のIndex数の1/3がポリ数です） #UE4 | @UNREALENGINE

PrePass これでどうだ！ #UE4 | @UNREALENGINE

PrePass めっちゃ早くなった！！ #UE4 | @UNREALENGINE

PrePass はい 皆様 #UE4 | @UNREALENGINE

PrePass はい 皆様 やりましたね #UE4 | @UNREALENGINE

PrePass プロファイル(調査) ＆ オプティマイズ(最適化) しちゃいましたね #UE4 | @UNREALENGINE

PrePass これが…… …ぷろふぁいる……？ #UE4 | @UNREALENGINE

PrePass そう！ これがプロファイルです！ とても簡単＆楽しいですよね！ #UE4 | @UNREALENGINE

PrePass やったことは「Event Browser」を見て #UE4 | @UNREALENGINE

PrePass 「Duration（時間）」を測って #UE4 | @UNREALENGINE

PrePass 「Texture Viewer」で絵を確認して #UE4 | @UNREALENGINE

PrePass 「Mesh Viewer」で使われてるメッシュを見る #UE4 | @UNREALENGINE

PrePass たったこれだけ！ 「Mesh Viewer」で使われてるメッシュを見る #UE4 | @UNREALENGINE

PrePass でもこれをアーティストさんが やる事にとっても意味があるんです #UE4 | @UNREALENGINE

PrePass もちろんプログラマさんも同じ それ以上のプロファイルを取れます #UE4 | @UNREALENGINE

PrePass でも… #UE4 | @UNREALENGINE

PrePass でも… #UE4 | @UNREALENGINE

PrePass 作った本人でないと わからない事って多いですよね #UE4 | @UNREALENGINE

PrePass さらに こういった制作者レベルのミスは チリツモの負荷になりやすいです #UE4 | @UNREALENGINE

PrePass 制作者自身による日頃からのメンテナンス それがとっても大事！なのです #UE4 | @UNREALENGINE

PrePass さて プロファイルの重要性もお伝えしたところで #UE4 | @UNREALENGINE

PrePass さて プロファイルの重要性もお伝えしたところで この調子でどんどん行きましょう！ #UE4 | @UNREALENGINE

BasePass 「下書き」 「下塗り」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE 次は「BasePass」 「下塗り」です

BasePass 「BasePass」は「下塗り」のイメージです #UE4 | @UNREALENGINE

BasePass 皆様も本気で塗りにかかる前に 各種パーツや素材ごとにレイヤー分けして 事前処理しとく という事やりませんか？ #UE4 | @UNREALENGINE

BasePass GPUも同じです #UE4 | @UNREALENGINE

BasePass 「下塗り」 「清書」 後の「清書」に備えて 下準備しておく工程 それが「BasePass」「下塗り」です #UE4 | @UNREALENGINE

BasePass ただ なんとGPUさん さすがμsの住人 最大8枚同時に「下塗り」することが可能です （GPUによります） #UE4 | @UNREALENGINE

BasePass でも8本の腕を同時に動かすと大変なので UE4では気を使って6枚にしてます （6枚でも多いよ！という声も聞きます） #UE4 | @UNREALENGINE

BasePass そしてこれはRenderDocの 「Texture Viewer」で確認できます！ #UE4 | @UNREALENGINE

BasePass 「下書き」 「下塗り」 GIF ほら！「PrePass」（下書き）の時は 白黒1枚だけだったOutputsに！こんなにいっぱい！ #UE4 | @UNREALENGINE

BasePass 「Gバッファ」 これらの「下塗り素材」は ちょと難しい言葉で「Gバッファ」といいます #UE4 | @UNREALENGINE

BasePass そして「Gバッファ」は マテリアルで計算されたものが描かれております #UE4 | @UNREALENGINE

BasePass ということはつまり！ マテリアルで難しい事をすると 「BasePass」（下塗り）で問題が起きるということです #UE4 | @UNREALENGINE

BasePass さて では先程と同じく 「Duration」を 測ってみましょう #UE4 | @UNREALENGINE

BasePass いましたね #UE4 | @UNREALENGINE

BasePass ヤバそうなやつ #UE4 | @UNREALENGINE

BasePass ここで またご説明 #UE4 | @UNREALENGINE

BasePass BasePass（下塗り）はPrePass（下書き）と同じく 一度モデルを 画面に合うように変形します #UE4 | @UNREALENGINE

BasePass その後 #UE4 | @UNREALENGINE 書いといた「下書き」と照らし合わせて

BasePass その後 #UE4 | @UNREALENGINE 書いといた「下書き」と照らし合わせて

BasePass その後 書いといた「下書き」と照らし合わせて 必要なとこにだけ色を塗る というのを繰り返します #UE4 | @UNREALENGINE

BasePass 下書きを利用することで 無駄に色を塗る事を避けてるんですね！ #UE4 | @UNREALENGINE

BasePass 下書きしてても 塗るのは辛い…… それくらい色を塗るのは大変なことなのです ややこしい事したらすぐパンクします #UE4 | @UNREALENGINE

BasePass さて #UE4 | @UNREALENGINE ではさっきのこいつ

BasePass 何が問題だったか 「Texture Viewer」のInputsを見てみましょう #UE4 | @UNREALENGINE

BasePass GIF #UE4 | @UNREALENGINE

BasePass めっちゃ大量のテクスチャ使っとる #UE4 | @UNREALENGINE

BasePass しかもほとんどのテクスチャが結果に関係ない！ #UE4 | @UNREALENGINE

BasePass え？これはどこに使うの？ なにがどれ？？ 大量のテクスチャを使うことは 参考資料を大量に見ながら書くことと同じです GPUさん混乱して書くの遅くなります #UE4 | @UNREALENGINE

BasePass どうやら色んなパターンに対応できる スーパー汎用マテリアルを作ったことで とっても重くなってたみたいですね #UE4 | @UNREALENGINE

BasePass プロファイル(調査) ＆ オプティマイズ(最適化) ！！ #UE4 | @UNREALENGINE

BasePass マテリアルの整理をして 絵を変えずに処理を軽く！ #UE4 | @UNREALENGINE

BasePass #UE4 | @UNREALENGINE

BasePass #UE4 | @UNREALENGINE

BasePass どーん！ #UE4 | @UNREALENGINE

BasePass プロファイル #UE4 | @UNREALENGINE

BasePass プロファイル 楽しい #UE4 | @UNREALENGINE

BasePass こちらも先程と同じくですが もちろんプログラマさんも同じ それ以上のプロファイルを取れます #UE4 | @UNREALENGINE

BasePass でも… #UE4 | @UNREALENGINE

BasePass アーティストさんの プロファイルがあるとみんな幸せ #UE4 | @UNREALENGINE

BasePass さぁ #UE4 | @UNREALENGINE どんどん行きましょう！！

Lighting 「下書き」 「下塗り」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE 次は「Lighting」 「清書」

Lighting 「Lighting」は「清書」！ とうとう絵作りの本番です！ #UE4 | @UNREALENGINE

Lighting Inputsにこれまで一生懸命作った 「Gバッファ」（下塗り素材）がいるのがわかりますね #UE4 | @UNREALENGINE

Lighting 「下書き」「下塗り」が終わったので これらを使って「清書」していくわけです #UE4 | @UNREALENGINE

Lighting 光は絵の全てです ライトをどんどん当てて 魅力的な絵を作り上げていきましょう！ #UE4 | @UNREALENGINE

Lighting GIF #UE4 | @UNREALENGINE

Lighting んん？？ #UE4 | @UNREALENGINE

Lighting ここは問題ない #UE4 | @UNREALENGINE ライトが当たってる

Lighting ここ ライト当たってる？？ #UE4 | @UNREALENGINE

Lighting GIF ここ ライト当たってる？？ #UE4 | @UNREALENGINE

Lighting 当たってない #UE4 | @UNREALENGINE

Lighting どうやら減衰して光が当たってないにも関わらず Radiusを大きくしているライトが多数いるみたいです #UE4 | @UNREALENGINE

Lighting プロファイル(調査) ＆ オプティマイズ(最適化) ！！ #UE4 | @UNREALENGINE

Lighting 無駄に大きいライト範囲を適正値に！！ #UE4 | @UNREALENGINE

Lighting #UE4 | @UNREALENGINE

Lighting どーん！ #UE4 | @UNREALENGINE

Lighting こうやってそれぞれのレイヤーの 効果を確かめながら最適化できるのも RenderDocの素晴らしいとこですね！ #UE4 | @UNREALENGINE

Lighting さて ライティングが終われば 大体の工程は完了です！ ここからはクォリティアップです！ #UE4 | @UNREALENGINE

Translucency 次は いつもいじめられがちな 「Translucency」 「下塗り」 「書き込み」 「下書き」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE

Translucency 「Translucency」は大体絵が出来たので 最後の仕上げにどんどんレイヤー重ねて 「書き込み」してるイメージです #UE4 | @UNREALENGINE

Translucency なので追加で書く範囲大きいと大変です 重ねて書けば書くほど大変なんです #UE4 | @UNREALENGINE

Translucency これに関しては 皆さんご存知かとは思うのですが エディタ上で「Quad Overdraw」を見るのが便利ですね #UE4 | @UNREALENGINE

Translucency 素晴らしいデバッグ表示で 重ね書きしたとこが一発でわかります #UE4 | @UNREALENGINE

Translucency 「シェーダー複雑度」の方でも良し #UE4 | @UNREALENGINE

Translucency しかし！！ RenderDocはさらにとっても 便利な機能があります！ #UE4 | @UNREALENGINE

Translucency それが「Pixel History」 #UE4 | @UNREALENGINE

Translucency 使い方 #UE4 | @UNREALENGINE

Translucency 「Texture Viewer」の 「Outputs」を選んで…… #UE4 | @UNREALENGINE

Translucency 画像の上で右クリックして 調べたいピクセルを指定…… #UE4 | @UNREALENGINE

Translucency 右下の「History」を押すと…… #UE4 | @UNREALENGINE

Translucency 指定した場所がこれまでどんな風に処理されて 色が変わってきたかが見れるのです！！ #UE4 | @UNREALENGINE

Translucency GIF GIFでどうぞ #UE4 | @UNREALENGINE

Translucency すると…… #UE4 | @UNREALENGINE

Translucency あれあれ……？ #UE4 | @UNREALENGINE

Translucency この後ろの方のHistory……書き込まれてるのに ほとんど色が変わってないぞ？？ #UE4 | @UNREALENGINE

Translucency どうやらここにある煙が薄すぎて #UE4 | @UNREALENGINE

Translucency どうやらここにある煙が薄すぎて 意味をなしていない #UE4 | @UNREALENGINE

Translucency これ全部絵に貢献していない #UE4 | @UNREALENGINE

Translucency プロファイル(調査) ＆ オプティマイズ(最適化) ！！ #UE4 | @UNREALENGINE

Translucency #UE4 | @UNREALENGINE

Translucency どーん！ #UE4 | @UNREALENGINE

Translucency たのしいですね #UE4 | @UNREALENGINE

Translucency そしてとうとう ラストです #UE4 | @UNREALENGINE

PostProcess 「下書き」 「下塗り」 「清書」 「書き込み」 「仕上げ」 #UE4 | @UNREALENGINE 「PostProcess」 「仕上げ」

PostProcess 「PostProcess」はその名前のまんま「仕上げ」です #UE4 | @UNREALENGINE

PostProcess Photoshopで絵を書く時も 最後に調整レイヤーとかで色味いじったりしますよね #UE4 | @UNREALENGINE

PostProcess この工程はそれです #UE4 | @UNREALENGINE

PostProcess ただ…… ラストなのにごめんなさい…… #UE4 | @UNREALENGINE

PostProcess 実は「PostProcess」をRenderDocで見るのは…… ちょっとややこしい……！ #UE4 | @UNREALENGINE

PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが…… #UE4 | @UNREALENGINE

PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが…… #UE4 | @UNREALENGINE

PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが…… #UE4 | @UNREALENGINE

PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが…… #UE4 | @UNREALENGINE

PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが…… #UE4 | @UNREALENGINE

PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが…… #UE4 | @UNREALENGINE

PostProcess でも UE4の実際のポストプロセスのイメージは 色んな機能を持った調整レイヤーを まとめて作って一気に適用する感じ #UE4 | @UNREALENGINE

PostProcess でも UE4の実際のポストプロセスのイメージは 色んな機能を持った調整レイヤーを まとめて作って一気に適用する感じ #UE4 | @UNREALENGINE

PostProcess なので #UE4 | @UNREALENGINE 間でやってることがわかりづらい……

PostProcess すみません ここも 無視して下さい #UE4 | @UNREALENGINE

PostProcess わたし 今日言いました #UE4 | @UNREALENGINE

PostProcess https://www.slideshare.net/EpicGamesJapan/cedec2016-unreal-engine-4 ちなみに こちらの神スライドに ポスプロ解説あります！ #UE4 | @UNREALENGINE

PostProcess https://www.slideshare.net/EpicGamesJapan/ue4-108770894 こちらの神スライドにも ポスプロ解説あります！！ #UE4 | @UNREALENGINE

まとめ さて ここまで皆様 長らくお付き合い頂きありがとうございました #UE4 | @UNREALENGINE

まとめ RenderDocは とても強力なプロファイラです #UE4 | @UNREALENGINE

まとめ 実際のところ 今回紹介した機能はごくごく一部で より詳しくプロファイルしたければ… #UE4 | @UNREALENGINE

まとめ シェーダーデバッグができたり #UE4 | @UNREALENGINE

まとめ Pythonによる解析だってできたりします #UE4 | @UNREALENGINE

まとめ でも！ 今日覚えてもらいたいのはこれだけ！ #UE4 | @UNREALENGINE

まとめ 「Event Browser」 #UE4 | @UNREALENGINE

まとめ 「Duration」 #UE4 | @UNREALENGINE

まとめ 「Texture Viewer」 #UE4 | @UNREALENGINE

まとめ 「Mesh Viewer」 #UE4 | @UNREALENGINE

まとめ これだけの機能でも とても多くの事を調べることができます #UE4 | @UNREALENGINE

まとめ そして 何よりも！！ #UE4 | @UNREALENGINE

まとめ プロファイル #UE4 | @UNREALENGINE 楽しい

まとめ この講演によって アーティストの方にとってのプロファイルの敷居が下がり 日々「ちょっと気になったから見てみよ」みたいな流れになって より良いゲーム作りに貢献できたらいいなと思っております #UE4 | @UNREALENGINE

RenderDoc https://docs.unrealengine.com/ja/Engine/Performance/RenderDoc/index.html http://unwitherer.blogspot.com/2018/07/ue4renderdocpackaging.html?m=1 ちなみに今回はエディタからのプロファイルのお話でしたが パッケージをプロファイルしたい方はこちらをご参考頂けましたら！ #UE4 | @UNREALENGINE

まとめ CEDEC2019 出ます！ 2019年9月4日(水)～6日(金) パシフィコ横浜 会議センター #UE4 | @UNREALENGINE

まとめ アンリアルフェスやります！ #UE4 | @UNREALENGINE

まとめ ご清聴ありがとうございました #UE4 | @UNREALENGINE

終 #UE4 | @UNREALENGINE