アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~

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

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

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

はじめに
皆様ご安心ください

はじめに
今日は難しい事一切話しません

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

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

はじめに
むしろとっても楽しいです！

はじめに
そもそも「プロファイル」って何？

はじめに
プロファイル (標準化)
プロファイル（英語: 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)

はじめに
？？

はじめに

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

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

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

はじめに
● 神絵師の作業配信とかついつい見ちゃいません？

はじめに
● 神絵師の作業配信とかついつい見ちゃいません？
● 絵ができていく過程って面白いですよね？

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

今回の講演ターゲット

アーティストの方

特に
●
●
●
●
●

特に
● これまで一度もプロファイルしたことない方
●
●
●
●

特に
● これからちょっとやってみたいなと思っている方
●
●
●

特に
● やってみたいって程ではないけど嫌ってこともない方
●
●

特に
● 頼まれたらやってやらんことはない方
●

特に
● 頼まれたらやってやらんことはない方
● やりたくないけど業務命令ならやる方

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

毎日プロファイラとにらめっこしている
プログラマさん TAさん

毎日プロファイラとにらめっこしている
プログラマさん TAさん
● すみませんドローコールの数でも数えておいて下さい

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

RenderDoc

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

RenderDoc
「ぷろふぁいら」？

RenderDoc
この絵を

RenderDoc
この絵を入れると

RenderDoc
レイヤー見れる

RenderDoc
レイヤー見れる
そんなイメージ！

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

RenderDoc
インストール！
GIF

RenderDoc
準備完了！！

RenderDoc
あともう一つ

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

RenderDoc
このプラグインを入れると

RenderDoc
調べてー

RenderDoc
UE4の絵を直接
RenderDocへ送れます
調べてー

RenderDoc
入れ方

RenderDoc
プラグインメニューから…

RenderDoc
有効化！

RenderDoc
リスタート！

RenderDoc
RenderDocのボタンが現れます！

RenderDoc
プロファイルしたい画面にして

RenderDoc
ボタンポチッ！

RenderDoc
ボタンポチッ！
GIF

RenderDoc
プロファイル取れました！

RenderDoc
めっちゃ

RenderDoc
かんたん

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

RenderDoc
ダブルクリックしてロードして…
GIF

RenderDoc
はいここ！

RenderDoc
「Event Browser」

RenderDoc
フォトショで言う「Layers」です

RenderDoc
超重要なタブ

RenderDoc
次にこれ！
GIF

RenderDoc
「Texture Viewer」

RenderDoc
フォトショで言う「画像ウィンドウ」です

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

RenderDoc
「Event Browser」で各イベント（レイヤー）を選んで

RenderDoc
「Texture Viewer」で見る

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

RenderDoc
早速やってみましょう

RenderDoc
GIF

RenderDoc
楽しくないですかこれ

RenderDoc
楽しい

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

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

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

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

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

RenderDoc
はいここが最初の難関です

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

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

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

RenderDoc
ぷれ……ぱす……？
べーすぱす……？？

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

RenderDoc
わたし今日言いました

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

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

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

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

GPUが絵を作る流れというのは
フォトショで絵を作る流れとよく似ています

想像してみて下さい

もしあなたがフォトショで
絵を書くとしたら……

まず「下書き」をして…

それぞれ要素ごとに「下塗り」……

陰影を書き込みつつ「清書」して…

空気感やディテールを「書き込み」

最後にフィルタとかで「仕上げ」

こんな感じで書きませんか？
「仕上げ」「書き込み」
「下書き」「下塗り」「清書」
※イメージ図です

GPUも同じです

先程の「Event Browser」の
各レンダリングパス

これらは上から順に
先程と同じように
絵を作っております
「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」

「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
「PrePass」は「下書き」

「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
「BasePass」は「下塗り」

「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
「Lighting」は「清書」

「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
「Translucency」は「書き込み」

「PostProcess」は「仕上げ」
「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」

「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
という風に対応しています！

「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
飛ばされた
こいつらは…？？

今回は無視しましょう

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

難しいことはあとで
プログラマさんorTAさんに
聞きましょう！

ちなみにこの神スライドにも詳しい解説あります
おすすめです

「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
というわけで！
この5つに絞って
上から見ていきましょう！

「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
PrePass
まずは「PrePass」
「下書き」から

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

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

PrePass
白黒で下書きしてから色塗りません？

PrePass
GPUも同じです

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

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

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

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

PrePass
ところで皆さん
話は変わるのですが

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

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

PrePass
RenderDocさん
ここ押したら測れます

PrePass
ポチッ

PrePass
現実で考えたら結構イヤラシイ機能…！！

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

PrePass
ちなみに単位はμs
1μs ＝ 100万分の1秒

PrePass
GPUさん
仕事めっちゃ早いですね…

PrePass
あれ？
でもなんかここ……

PrePass
ここだけ遅くない？

PrePass
気になりません？

PrePass
ここで先にご説明

PrePass
GPUは
PrePass（下書き）の際

PrePass
元モデルを
画面に合うように変形して

PrePass
書く
ということを繰り返します

PrePass
僕らも絵を書く時同じように考えますよね

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

PrePass
RenderDocではこの工程を
「Mesh Viewer」で見れます！

PrePass
上の方から順番に見てみると…
GIF

PrePass
何このポリゴン密度

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

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

PrePass
これでどうだ！

PrePass
めっちゃ早くなった！！

PrePass
はい皆様

PrePass
はい皆様
やりましたね

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

PrePass
これが……
…ぷろふぁいる……？

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

PrePass
やったことは「Event Browser」を見て

PrePass
「Duration（時間）」を測って

PrePass
「Texture Viewer」で絵を確認して

PrePass
「Mesh Viewer」で使われてるメッシュを見る

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

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

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

PrePass
でも…

PrePass
作った本人でないと
わからない事って多いですよね

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

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

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

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

BasePass
「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
次は「BasePass」
「下塗り」です

BasePass
「BasePass」は「下塗り」のイメージです

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

BasePass
GPUも同じです

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

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

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

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

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

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

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

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

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

BasePass
いましたね

BasePass
ヤバそうなやつ

BasePass
ここでまたご説明

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

BasePass
その後書いといた「下書き」と照らし合わせて

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

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

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

BasePass
さてではさっきのこいつ

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

BasePass
GIF

BasePass
めっちゃ大量のテクスチャ使っとる

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

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

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

BasePass
＆
！！

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

BasePass
どーん！

BasePass
プロファイル

BasePass
プロファイル
楽しい

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

BasePass
でも…

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

BasePass
さぁどんどん行きましょう！！

Lighting
「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」
次は「Lighting」
「清書」

Lighting
「Lighting」は「清書」！
とうとう絵作りの本番です！

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

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

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

Lighting
GIF

Lighting
んん？？

Lighting
ここは問題ないライトが当たってる

Lighting
ここライト当たってる？？

Lighting
ここライト当たってる？？
GIF

Lighting
当たってない

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

Lighting
＆
！！

Lighting
無駄に大きいライト範囲を適正値に！！

Lighting
どーん！

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

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

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

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

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

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

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

Translucency
「シェーダー複雑度」の方でも良し

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

Translucency
それが「Pixel History」

Translucency
使い方

Translucency
「Texture Viewer」の
「Outputs」を選んで……

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

Translucency
右下の「History」を押すと……

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

Translucency
GIFでどうぞ
GIF

Translucency
すると……

Translucency
あれあれ……？

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

Translucency
どうやらここにある煙が薄すぎて

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

Translucency
これ全部絵に貢献していない

Translucency
＆
！！

Translucency

Translucency
どーん！

Translucency
たのしいですね

Translucency
そしてとうとう
ラストです

PostProcess
「PostProcess」
「仕上げ」
「仕上げ」
「書き込み」
「下書き」
「下塗り」
「清書」

PostProcess
「PostProcess」はその名前のまんま「仕上げ」です

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

PostProcess
この工程はそれです

PostProcess
ただ……
ラストなのにごめんなさい……

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

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

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

PostProcess
なので間でやってることがわかりづらい……

PostProcess
すみません
ここも無視して下さい

PostProcess
わたし今日言いました

PostProcess
ちなみにこちらの神スライドに
ポスプロ解説あります！

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

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

まとめ
RenderDocは
とても強力なプロファイラです

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

まとめ
シェーダーデバッグができたり

まとめ
Pythonによる解析だってできたりします

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

まとめ
「Event Browser」

まとめ
「Duration」

まとめ
「Texture Viewer」

まとめ
「Mesh Viewer」

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

まとめ
そして
何よりも！！

まとめ
プロファイル楽しい

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

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

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

まとめ
アンリアルフェスやります！

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

アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~

Similar a アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~ (14)

Más de エピック・ゲームズ・ジャパン Epic Games Japan

Más de エピック・ゲームズ・ジャパン Epic Games Japan (20)

アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~