アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~
28 likes42,372 views
2019年8月4日に行われた「出張ヒストリア！ ゲーム開発勉強会2019」における「アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~」の講演資料です。 https://atnd.org/events/106967 こちらからスライドデータをダウンロード可能です。 https://epicgames.ent.box.com/s/vu742chebcjfsllj35b25lz6mnzcfy22
![[CEDEC2017] UE4プロファイリングツール総おさらい（グラフィクス編）](https://cdn.slidesharecdn.com/ss_thumbnails/ue4profilingbasiccedec2017-170831013144-thumbnail.jpg?width=560&fit=bounds)
![[CEDEC2018] UE4アニメーションシステム総おさらい](https://cdn.slidesharecdn.com/ss_thumbnails/animationsystem-180823080249-thumbnail.jpg?width=560&fit=bounds)
![[UE4]マテリアルの注意すべきこと！～テクスチャロードとSwitch～](https://cdn.slidesharecdn.com/ss_thumbnails/ue4materialcaution-190309153116-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~ (11)
More from エピック・ゲームズ・ジャパン Epic Games Japan (20)
Recently uploaded (8)
アーティストの為のプロファイル入門！~楽しいRenderDocの使い方~
- 1. アーティストの為のプロファイル入門！ ~楽しいRenderDocの使い方~ Epic Games Japan Dev Rel Tech Artist 斎藤 修
- 3. #UE4 | @UNREALENGINE 自己紹介 斎藤 修 Epic Games Japan/Dev Rel Tech Artist ● 2019年6月からEpicに入りました ● それまでは規模大きめのコンソール開発してました ● その前は漫画とか描いてました ● UE4とHoudiniが好物です https://qiita.com/EGJ- Osamu_Saito
- 5. #UE4 | @UNREALENGINE はじめに 今日は 難しい事 一切話しません
- 6. #UE4 | @UNREALENGINE はじめに え でも 「ぷろふぁいる」とかいうの 話すんでしょう？
- 8. #UE4 | @UNREALENGINE はじめに むしろ とっても楽しいです！
- 10. #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)
- 16. #UE4 | @UNREALENGINE はじめに ● 凄い絵がどう書かれているかって 気になりませんか？
- 17. #UE4 | @UNREALENGINE はじめに ● 凄い絵がどう書かれているかって 気になりませんか？ ● 神絵師の作業配信とか ついつい見ちゃいません？
- 18. #UE4 | @UNREALENGINE はじめに ● 凄い絵がどう書かれているかって 気になりませんか？ ● 神絵師の作業配信とか ついつい見ちゃいません？ ● 絵ができていく過程って 面白いですよね？
- 23. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● ● ● ●
- 24. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● これからちょっとやってみたいなと思っている方 ● ● ●
- 25. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● これからちょっとやってみたいなと思っている方 ● やってみたいって程ではないけど嫌ってこともない方 ● ●
- 26. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● これからちょっとやってみたいなと思っている方 ● やってみたいって程ではないけど嫌ってこともない方 ● 頼まれたらやってやらんことはない方 ●
- 27. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● これからちょっとやってみたいなと思っている方 ● やってみたいって程ではないけど嫌ってこともない方 ● 頼まれたらやってやらんことはない方 ● やりたくないけど業務命令ならやる方
- 30. #UE4 | @UNREALENGINE 今回の講演ターゲット…からちょっと外れる方 毎日プロファイラとにらめっこしている プログラマさん TAさん ● すみません ドローコールの数でも数えておいて下さい
- 33. #UE4 | @UNREALENGINE RenderDoc 神「プロファイラ」です オープンソースで無料で高機能！ Windows Linux Android Stadia Switchに対応！
- 66. #UE4 | @UNREALENGINE RenderDoc 「Event Browser」
- 69. #UE4 | @UNREALENGINE RenderDoc 次に これ！ GIF
- 70. #UE4 | @UNREALENGINE RenderDoc 「Texture Viewer」
- 73. #UE4 | @UNREALENGINE RenderDoc 「Event Browser」で各イベント（レイヤー）を選んで
- 74. #UE4 | @UNREALENGINE RenderDoc 「Texture Viewer」で見る
- 87. #UE4 | @UNREALENGINE RenderDoc フォトショでは下から上に レイヤーが積まれて 絵が出来ていきます
- 88. #UE4 | @UNREALENGINE RenderDoc 「Event Browser」では逆に 上から下に処理が進んで 絵が出来ていきます
- 89. #UE4 | @UNREALENGINE RenderDoc 「Event Browser」では 処理の種類ごとに 細かくフォルダ分けされており これを「レンダリングパス」とか 呼んだりします。
- 90. #UE4 | @UNREALENGINE RenderDoc ただ…この 「レンダリングパス」…… ……項目多くないですか？？ Small text can be placed in at 10pt
- 91. #UE4 | @UNREALENGINE RenderDoc はい ここが最初の難関です
- 93. #UE4 | @UNREALENGINE RenderDoc そこで これ 弊社篠山の神スライド https://www.slideshare.net/EpicGamesJapan/cedec2016-unreal-engine-4
- 94. #UE4 | @UNREALENGINE RenderDoc UE4のレンダリングの流れが 丁寧に！ かつ超わかりやすく！ 解説されております
- 97. #UE4 | @UNREALENGINE RenderDoc わたし 今日言いました
- 101. #UE4 | @UNREALENGINE レンダリングパス さて では 先程のお話の続きなのですが…
- 110. #UE4 | @UNREALENGINE レンダリングパス こんな感じで書きませんか？ 「仕上げ」「書き込み」 「下書き」 「下塗り」 「清書」 ※イメージ図です
- 112. #UE4 | @UNREALENGINE レンダリングパス 先程の「Event Browser」の 各レンダリングパス
- 113. #UE4 | @UNREALENGINE レンダリングパス これらは 上から順に 先程と同じように 絵を作っております 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」
- 122. #UE4 | @UNREALENGINE レンダリングパス 稀によくありますよね 超スーパーなフォトショ使いの人とかが 何だこの機能？みたいなの駆使して絵を書いてるの レンダリングパスの中にもそういうチョトややこしい子がいます それらは 今日は見ないフリしましょう また今度にしましょう
- 123. #UE4 | @UNREALENGINE レンダリングパス 難しいことは あとで プログラマさんorTAさんに 聞きましょう！
- 124. #UE4 | @UNREALENGINE レンダリングパス ちなみに この神スライドにも詳しい解説あります おすすめです https://www.slideshare.net/EpicGamesJapan/cedec2016-unreal-engine-4
- 129. #UE4 | @UNREALENGINE PrePass 白黒で下書きしてから 色塗りません？
- 131. #UE4 | @UNREALENGINE 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 PrePass この最初の 「PrePass DDM_AllOpaque」 を選択して見てみると…
- 135. #UE4 | @UNREALENGINE PrePass ところで 皆さん 話は変わるのですが
- 142. #UE4 | @UNREALENGINE PrePass ちなみに単位はμs 1μs ＝ 100万分の1秒
- 144. #UE4 | @UNREALENGINE PrePass あれ？ でも なんかここ……
- 147. #UE4 | @UNREALENGINE PrePass ここで 先にご説明
- 151. #UE4 | @UNREALENGINE PrePass 僕らも絵を書く時 同じように考えますよね
- 153. #UE4 | @UNREALENGINE PrePass RenderDocではこの工程を 「Mesh Viewer」で見れます！
- 155. #UE4 | @UNREALENGINE PrePass 何 この ポリゴン密度
- 156. #UE4 | @UNREALENGINE PrePass こいつのポリ数 約270万（赤枠のIndex数の1/3がポリ数です）
- 157. #UE4 | @UNREALENGINE PrePass こいつのポリ数 約270万（赤枠のIndex数の1/3がポリ数です） 完全に修正対象のやつですね
- 160. #UE4 | @UNREALENGINE PrePass はい 皆様
- 161. #UE4 | @UNREALENGINE PrePass はい 皆様 やりましたね
- 165. #UE4 | @UNREALENGINE PrePass やったことは「Event Browser」を見て
- 167. #UE4 | @UNREALENGINE PrePass 「Texture Viewer」で絵を確認して
- 168. #UE4 | @UNREALENGINE PrePass 「Mesh Viewer」で使われてるメッシュを見る
- 169. #UE4 | @UNREALENGINE PrePass 「Mesh Viewer」で使われてるメッシュを見る たったこれだけ！
- 183. #UE4 | @UNREALENGINE BasePass 後の「清書」に備えて 下準備しておく工程 それが「BasePass」「下塗り」です 「清書」「下塗り」
- 184. #UE4 | @UNREALENGINE BasePass ただ なんとGPUさん さすがμsの住人 最大8枚同時に「下塗り」することが可能です （GPUによります）
- 186. #UE4 | @UNREALENGINE BasePass そしてこれはRenderDocの 「Texture Viewer」で確認できます！
- 191. #UE4 | @UNREALENGINE BasePass さて では先程と同じく 「Duration」を 測ってみましょう
- 194. #UE4 | @UNREALENGINE BasePass ここで またご説明
- 195. #UE4 | @UNREALENGINE BasePass BasePass（下塗り）はPrePass（下書き）と同じく 一度モデルを 画面に合うように変形します
- 196. #UE4 | @UNREALENGINE BasePass その後 書いといた「下書き」と照らし合わせて
- 197. #UE4 | @UNREALENGINE BasePass その後 書いといた「下書き」と照らし合わせて
- 198. #UE4 | @UNREALENGINE BasePass その後 書いといた「下書き」と照らし合わせて 必要なとこにだけ色を塗る というのを繰り返します
- 201. #UE4 | @UNREALENGINE BasePass さて ではさっきのこいつ
- 202. #UE4 | @UNREALENGINE BasePass 何が問題だったか 「Texture Viewer」のInputsを見てみましょう
- 218. #UE4 | @UNREALENGINE BasePass さぁ どんどん行きましょう！！
- 226. #UE4 | @UNREALENGINE Lighting ここは問題ない ライトが当たってる
- 227. #UE4 | @UNREALENGINE Lighting ここ ライト当たってる？？
- 228. #UE4 | @UNREALENGINE Lighting ここ ライト当たってる？？ GIF
- 236. #UE4 | @UNREALENGINE Lighting さて ライティングが終われば 大体の工程は完了です！ ここからはクォリティアップです！
- 237. #UE4 | @UNREALENGINE Translucency 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 次は いつもいじめられがちな 「Translucency」 「書き込み」
- 240. #UE4 | @UNREALENGINE Translucency これに関しては 皆さんご存知かとは思うのですが エディタ上で「Quad Overdraw」を見るのが便利ですね
- 244. #UE4 | @UNREALENGINE Translucency それが「Pixel History」
- 246. #UE4 | @UNREALENGINE Translucency 「Texture Viewer」の 「Outputs」を選んで……
- 268. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
- 269. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
- 270. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
- 271. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
- 272. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
- 273. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
- 274. #UE4 | @UNREALENGINE PostProcess でも UE4の実際のポストプロセスのイメージは 色んな機能を持った調整レイヤーを まとめて作って一気に適用する感じ
- 275. #UE4 | @UNREALENGINE PostProcess でも UE4の実際のポストプロセスのイメージは 色んな機能を持った調整レイヤーを まとめて作って一気に適用する感じ
- 276. #UE4 | @UNREALENGINE PostProcess なので 間でやってることがわかりづらい……
- 277. #UE4 | @UNREALENGINE PostProcess すみません ここも 無視して下さい
- 278. #UE4 | @UNREALENGINE PostProcess わたし 今日言いました
- 279. #UE4 | @UNREALENGINE PostProcess ちなみに こちらの神スライドに ポスプロ解説あります！ https://www.slideshare.net/EpicGamesJapan/cedec2016-unreal-engine-4
- 281. #UE4 | @UNREALENGINE まとめ さて ここまで皆様 長らくお付き合い頂きありがとうございました
- 287. #UE4 | @UNREALENGINE まとめ 「Event Browser」
- 289. #UE4 | @UNREALENGINE まとめ 「Texture Viewer」
- 290. #UE4 | @UNREALENGINE まとめ 「Mesh Viewer」
- 293. #UE4 | @UNREALENGINE まとめ プロファイル 楽しい