Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

16,412 views

Published on

2019年8月4日に行われた「出張ヒストリア! ゲーム開発勉強会2019」における「アーティストの為のプロファイル入門!~楽しいRenderDocの使い方~」の講演資料です。
https://atnd.org/events/106967

こちらからスライドデータをダウンロード可能です。
https://epicgames.ent.box.com/s/vu742chebcjfsllj35b25lz6mnzcfy22

Published in: Engineering
  • Login to see the comments

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

  1. 1. アーティストの為のプロファイル入門! ~楽しいRenderDocの使い方~ Epic Games Japan Dev Rel Tech Artist 斎藤 修
  2. 2. #UE4 | @UNREALENGINE こちらのスライドは以下URLからダウンロード可能です (ダウンロードされるとGIF動画が見れます!約200MBです) https://epicgames.box.com/s/lew6zf1ryn9n31i9mgyf1f1m8z3grpz5
  3. 3. #UE4 | @UNREALENGINE 自己紹介 斎藤 修 Epic Games Japan/Dev Rel Tech Artist ● 2019年6月からEpicに入りました ● それまでは規模大きめのコンソール開発してました ● その前は漫画とか描いてました ● UE4とHoudiniが好物です https://qiita.com/EGJ- Osamu_Saito
  4. 4. #UE4 | @UNREALENGINE はじめに 皆様ご安心ください
  5. 5. #UE4 | @UNREALENGINE はじめに 今日は 難しい事 一切話しません
  6. 6. #UE4 | @UNREALENGINE はじめに え でも 「ぷろふぁいる」とかいうの 話すんでしょう?
  7. 7. #UE4 | @UNREALENGINE はじめに いえいえ「プロファイル」 怖くないですよ!
  8. 8. #UE4 | @UNREALENGINE はじめに むしろ とっても楽しいです!
  9. 9. #UE4 | @UNREALENGINE はじめに そもそも「プロファイル」って何?
  10. 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)
  11. 11. #UE4 | @UNREALENGINE はじめに ??
  12. 12. #UE4 | @UNREALENGINE はじめに
  13. 13. #UE4 | @UNREALENGINE はじめに 要はこの絵が 「どんな風にできていってるか」を 見る事です
  14. 14. #UE4 | @UNREALENGINE はじめに
  15. 15. #UE4 | @UNREALENGINE はじめに フォトショで言えば ここを見るイメージ!→
  16. 16. #UE4 | @UNREALENGINE はじめに ● 凄い絵がどう書かれているかって 気になりませんか?
  17. 17. #UE4 | @UNREALENGINE はじめに ● 凄い絵がどう書かれているかって 気になりませんか? ● 神絵師の作業配信とか ついつい見ちゃいません?
  18. 18. #UE4 | @UNREALENGINE はじめに ● 凄い絵がどう書かれているかって 気になりませんか? ● 神絵師の作業配信とか ついつい見ちゃいません? ● 絵ができていく過程って 面白いですよね?
  19. 19. #UE4 | @UNREALENGINE はじめに それを見るのが「プロファイル」です!
  20. 20. #UE4 | @UNREALENGINE 今回の講演ターゲット
  21. 21. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方
  22. 22. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● ● ● ● ●
  23. 23. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● ● ● ●
  24. 24. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● これからちょっとやってみたいなと思っている方 ● ● ●
  25. 25. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● これからちょっとやってみたいなと思っている方 ● やってみたいって程ではないけど嫌ってこともない方 ● ●
  26. 26. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● これからちょっとやってみたいなと思っている方 ● やってみたいって程ではないけど嫌ってこともない方 ● 頼まれたらやってやらんことはない方 ●
  27. 27. #UE4 | @UNREALENGINE 今回の講演ターゲット アーティストの方 特に ● これまで一度もプロファイルしたことない方 ● これからちょっとやってみたいなと思っている方 ● やってみたいって程ではないけど嫌ってこともない方 ● 頼まれたらやってやらんことはない方 ● やりたくないけど業務命令ならやる方
  28. 28. #UE4 | @UNREALENGINE 今回の講演ターゲット…からちょっと外れる方
  29. 29. #UE4 | @UNREALENGINE 今回の講演ターゲット…からちょっと外れる方 毎日プロファイラとにらめっこしている プログラマさん TAさん
  30. 30. #UE4 | @UNREALENGINE 今回の講演ターゲット…からちょっと外れる方 毎日プロファイラとにらめっこしている プログラマさん TAさん ● すみません ドローコールの数でも数えておいて下さい
  31. 31. #UE4 | @UNREALENGINE では早速「プロファイル」を 取ってみましょう!
  32. 32. #UE4 | @UNREALENGINE RenderDoc
  33. 33. #UE4 | @UNREALENGINE RenderDoc 神「プロファイラ」です オープンソースで無料で高機能! Windows Linux Android Stadia Switchに対応!
  34. 34. #UE4 | @UNREALENGINE RenderDoc 「ぷろふぁいら」?
  35. 35. #UE4 | @UNREALENGINE RenderDoc この絵を
  36. 36. #UE4 | @UNREALENGINE RenderDoc この絵を入れると
  37. 37. #UE4 | @UNREALENGINE RenderDoc この絵を入れると レイヤー見れる
  38. 38. #UE4 | @UNREALENGINE RenderDoc この絵を入れると レイヤー見れる そんなイメージ!
  39. 39. #UE4 | @UNREALENGINE RenderDoc https://renderdoc.org/ 公式HPからダウンロードして…
  40. 40. #UE4 | @UNREALENGINE RenderDoc インストール! GIF
  41. 41. #UE4 | @UNREALENGINE RenderDoc 準備完了!!
  42. 42. #UE4 | @UNREALENGINE RenderDoc あともう一つ
  43. 43. #UE4 | @UNREALENGINE RenderDoc UE4にはデフォルトで RenderDocのプラグインが用意されています
  44. 44. #UE4 | @UNREALENGINE RenderDoc このプラグインを入れると
  45. 45. #UE4 | @UNREALENGINE RenderDoc このプラグインを入れると 調べてー
  46. 46. #UE4 | @UNREALENGINE RenderDoc このプラグインを入れると UE4の絵を直接 RenderDocへ送れます 調べてー
  47. 47. #UE4 | @UNREALENGINE RenderDoc 入れ方
  48. 48. #UE4 | @UNREALENGINE RenderDoc プラグインメニューから…
  49. 49. #UE4 | @UNREALENGINE RenderDoc プラグインメニューから…
  50. 50. #UE4 | @UNREALENGINE RenderDoc プラグインメニューから…
  51. 51. #UE4 | @UNREALENGINE RenderDoc 有効化!
  52. 52. #UE4 | @UNREALENGINE RenderDoc リスタート!
  53. 53. #UE4 | @UNREALENGINE RenderDoc リスタート!
  54. 54. #UE4 | @UNREALENGINE RenderDoc
  55. 55. #UE4 | @UNREALENGINE RenderDoc RenderDocのボタンが現れます!
  56. 56. #UE4 | @UNREALENGINE RenderDoc プロファイルしたい画面にして
  57. 57. #UE4 | @UNREALENGINE RenderDoc ボタンポチッ!
  58. 58. #UE4 | @UNREALENGINE RenderDoc ボタンポチッ! GIF
  59. 59. #UE4 | @UNREALENGINE RenderDoc プロファイル取れました!
  60. 60. #UE4 | @UNREALENGINE RenderDoc めっちゃ
  61. 61. #UE4 | @UNREALENGINE RenderDoc かんたん
  62. 62. #UE4 | @UNREALENGINE 終
  63. 63. #UE4 | @UNREALENGINE RenderDoc せっかくなので今取ったこいつで 簡単にプロファイルを見ていく流れをご説明します
  64. 64. #UE4 | @UNREALENGINE RenderDoc ダブルクリックしてロードして… GIF
  65. 65. #UE4 | @UNREALENGINE RenderDoc はいここ!
  66. 66. #UE4 | @UNREALENGINE RenderDoc 「Event Browser」
  67. 67. #UE4 | @UNREALENGINE RenderDoc フォトショで言う「Layers」です
  68. 68. #UE4 | @UNREALENGINE RenderDoc 超重要なタブ
  69. 69. #UE4 | @UNREALENGINE RenderDoc 次に これ! GIF
  70. 70. #UE4 | @UNREALENGINE RenderDoc 「Texture Viewer」
  71. 71. #UE4 | @UNREALENGINE RenderDoc フォトショで言う「画像ウィンドウ」です
  72. 72. #UE4 | @UNREALENGINE RenderDoc 書くのに使った素材「Inputs」と 書いた結果「Outputs」が見れます
  73. 73. #UE4 | @UNREALENGINE RenderDoc 「Event Browser」で各イベント(レイヤー)を選んで
  74. 74. #UE4 | @UNREALENGINE RenderDoc 「Texture Viewer」で見る
  75. 75. #UE4 | @UNREALENGINE RenderDoc 「プロファイル」の流れは基本そんな感じです!
  76. 76. #UE4 | @UNREALENGINE RenderDoc 早速やってみましょう
  77. 77. #UE4 | @UNREALENGINE RenderDoc GIF
  78. 78. #UE4 | @UNREALENGINE RenderDoc 楽しくないですか これ
  79. 79. #UE4 | @UNREALENGINE RenderDoc
  80. 80. #UE4 | @UNREALENGINE RenderDoc
  81. 81. #UE4 | @UNREALENGINE RenderDoc
  82. 82. #UE4 | @UNREALENGINE RenderDoc
  83. 83. #UE4 | @UNREALENGINE RenderDoc
  84. 84. #UE4 | @UNREALENGINE RenderDoc
  85. 85. #UE4 | @UNREALENGINE RenderDoc 楽しい
  86. 86. #UE4 | @UNREALENGINE RenderDoc すでに皆様にはプロファイルの魅力が 十二分に伝わったかと思うのですが 一応もろもろ説明させて頂きます
  87. 87. #UE4 | @UNREALENGINE RenderDoc フォトショでは下から上に レイヤーが積まれて 絵が出来ていきます
  88. 88. #UE4 | @UNREALENGINE RenderDoc 「Event Browser」では逆に 上から下に処理が進んで 絵が出来ていきます
  89. 89. #UE4 | @UNREALENGINE RenderDoc 「Event Browser」では 処理の種類ごとに 細かくフォルダ分けされており これを「レンダリングパス」とか 呼んだりします。
  90. 90. #UE4 | @UNREALENGINE RenderDoc ただ…この 「レンダリングパス」…… ……項目多くないですか?? Small text can be placed in at 10pt
  91. 91. #UE4 | @UNREALENGINE RenderDoc はい ここが最初の難関です
  92. 92. #UE4 | @UNREALENGINE RenderDoc プロファイルの意味を 汲み取るにはどうしても 各レンダリングパスで何をしているのかを ざっくり知る必要があります
  93. 93. #UE4 | @UNREALENGINE RenderDoc そこで これ 弊社篠山の神スライド https://www.slideshare.net/EpicGamesJapan/cedec2016-unreal-engine-4
  94. 94. #UE4 | @UNREALENGINE RenderDoc UE4のレンダリングの流れが 丁寧に! かつ超わかりやすく! 解説されております
  95. 95. #UE4 | @UNREALENGINE RenderDoc ぷれ……ぱす……? べーすぱす……??
  96. 96. #UE4 | @UNREALENGINE RenderDoc わかります 専門用語 最初ちょと取っ付きづらいですよね
  97. 97. #UE4 | @UNREALENGINE RenderDoc わたし 今日言いました
  98. 98. #UE4 | @UNREALENGINE RenderDoc 「レンダリングパス」 サラサラに噛み砕いてご説明しましょう!
  99. 99. #UE4 | @UNREALENGINE RenderDoc 注: このあと例え話がどんどん多くなって 厳密な意味での情報の正確さが危ういです
  100. 100. #UE4 | @UNREALENGINE RenderDoc 注: このあと例え話がどんどん多くなって 厳密な意味での情報の正確さが危ういです イメージ先行という事で何卒!
  101. 101. #UE4 | @UNREALENGINE レンダリングパス さて では 先程のお話の続きなのですが…
  102. 102. #UE4 | @UNREALENGINE レンダリングパス GPUが絵を作る流れというのは フォトショで絵を作る流れと よく似ています
  103. 103. #UE4 | @UNREALENGINE レンダリングパス 想像してみて下さい
  104. 104. #UE4 | @UNREALENGINE レンダリングパス もしあなたがフォトショで 絵を書くとしたら……
  105. 105. #UE4 | @UNREALENGINE レンダリングパス まず「下書き」をして…
  106. 106. #UE4 | @UNREALENGINE レンダリングパス それぞれ要素ごとに「下塗り」……
  107. 107. #UE4 | @UNREALENGINE レンダリングパス 陰影を書き込みつつ「清書」して…
  108. 108. #UE4 | @UNREALENGINE レンダリングパス 空気感やディテールを「書き込み」
  109. 109. #UE4 | @UNREALENGINE レンダリングパス 最後にフィルタとかで「仕上げ」
  110. 110. #UE4 | @UNREALENGINE レンダリングパス こんな感じで書きませんか? 「仕上げ」「書き込み」 「下書き」 「下塗り」 「清書」 ※イメージ図です
  111. 111. #UE4 | @UNREALENGINE レンダリングパス GPUも同じです
  112. 112. #UE4 | @UNREALENGINE レンダリングパス 先程の「Event Browser」の 各レンダリングパス
  113. 113. #UE4 | @UNREALENGINE レンダリングパス これらは 上から順に 先程と同じように 絵を作っております 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」
  114. 114. #UE4 | @UNREALENGINE 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 レンダリングパス 「PrePass」は「下書き」
  115. 115. #UE4 | @UNREALENGINE レンダリングパス 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 「PrePass」は「下書き」 「BasePass」は「下塗り」
  116. 116. #UE4 | @UNREALENGINE レンダリングパス 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 「PrePass」は「下書き」 「BasePass」は「下塗り」 「Lighting」は「清書」
  117. 117. #UE4 | @UNREALENGINE レンダリングパス 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 「PrePass」は「下書き」 「BasePass」は「下塗り」 「Lighting」は「清書」 「Translucency」は「書き込み」
  118. 118. #UE4 | @UNREALENGINE レンダリングパス 「PrePass」は「下書き」 「BasePass」は「下塗り」 「Lighting」は「清書」 「Translucency」は「書き込み」 「PostProcess」は「仕上げ」 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」
  119. 119. #UE4 | @UNREALENGINE 「PrePass」は「下書き」 「BasePass」は「下塗り」 「Lighting」は「清書」 「Translucency」は「書き込み」 「PostProcess」は「仕上げ」 レンダリングパス 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 という風に対応しています!
  120. 120. #UE4 | @UNREALENGINE レンダリングパス 「PrePass」は「下書き」 「BasePass」は「下塗り」 「Lighting」は「清書」 「Translucency」は「書き込み」 「PostProcess」は「仕上げ」 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 飛ばされた こいつらは…??
  121. 121. #UE4 | @UNREALENGINE レンダリングパス 今回は無視しましょう
  122. 122. #UE4 | @UNREALENGINE レンダリングパス 稀によくありますよね 超スーパーなフォトショ使いの人とかが 何だこの機能?みたいなの駆使して絵を書いてるの レンダリングパスの中にもそういうチョトややこしい子がいます それらは 今日は見ないフリしましょう また今度にしましょう
  123. 123. #UE4 | @UNREALENGINE レンダリングパス 難しいことは あとで プログラマさんorTAさんに 聞きましょう!
  124. 124. #UE4 | @UNREALENGINE レンダリングパス ちなみに この神スライドにも詳しい解説あります おすすめです https://www.slideshare.net/EpicGamesJapan/cedec2016-unreal-engine-4
  125. 125. #UE4 | @UNREALENGINE 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 レンダリングパス というわけで! この5つに絞って 上から見ていきましょう!
  126. 126. #UE4 | @UNREALENGINE 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 PrePass まずは「PrePass」 「下書き」から
  127. 127. #UE4 | @UNREALENGINE PrePass 「PrePass」と呼ばれる工程では 「下書き」が行われているイメージです
  128. 128. #UE4 | @UNREALENGINE PrePass みなさん「さぁ絵を書くぞーっ」てなったとき いきなり色塗ったりしますか?
  129. 129. #UE4 | @UNREALENGINE PrePass 白黒で下書きしてから 色塗りません?
  130. 130. #UE4 | @UNREALENGINE PrePass GPUも同じです
  131. 131. #UE4 | @UNREALENGINE 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 PrePass この最初の 「PrePass DDM_AllOpaque」 を選択して見てみると…
  132. 132. #UE4 | @UNREALENGINE PrePass ほら! GPUも最初に 白黒でざーーっと! 下書きしています! GIF
  133. 133. #UE4 | @UNREALENGINE PrePass 正しくはデプス(深度)とよばれる 奥行き情報を書いているのですが
  134. 134. #UE4 | @UNREALENGINE PrePass GPUも最初に下書きしておくことで あとの工程で楽をしているわけですね
  135. 135. #UE4 | @UNREALENGINE PrePass ところで 皆さん 話は変わるのですが
  136. 136. #UE4 | @UNREALENGINE PrePass GPUのレイヤー量 めっちゃ多くないですか (下書きだけでこれ)
  137. 137. #UE4 | @UNREALENGINE PrePass これ どれくらいの時間でやってるの…? って……気になりません?
  138. 138. #UE4 | @UNREALENGINE PrePass RenderDocさん ここ押したら測れます
  139. 139. #UE4 | @UNREALENGINE PrePass ポチッ
  140. 140. #UE4 | @UNREALENGINE PrePass 現実で考えたら結構イヤラシイ機能…!!
  141. 141. #UE4 | @UNREALENGINE PrePass 注: 測るタイミングによって かなり数値が変動するので 厳密に正確な時間とは思わないで下さい (あくまで目安で!) GIF
  142. 142. #UE4 | @UNREALENGINE PrePass ちなみに単位はμs 1μs = 100万分の1秒
  143. 143. #UE4 | @UNREALENGINE PrePass GPUさん 仕事めっちゃ早いですね…
  144. 144. #UE4 | @UNREALENGINE PrePass あれ? でも なんかここ……
  145. 145. #UE4 | @UNREALENGINE PrePass ここだけ遅くない?
  146. 146. #UE4 | @UNREALENGINE PrePass 気になりません?
  147. 147. #UE4 | @UNREALENGINE PrePass ここで 先にご説明
  148. 148. #UE4 | @UNREALENGINE PrePass GPUは PrePass(下書き)の際
  149. 149. #UE4 | @UNREALENGINE PrePass 元モデルを 画面に合うように変形して
  150. 150. #UE4 | @UNREALENGINE PrePass 書く ということを繰り返します
  151. 151. #UE4 | @UNREALENGINE PrePass 僕らも絵を書く時 同じように考えますよね
  152. 152. #UE4 | @UNREALENGINE PrePass 複雑なモデルだったら もちろん時間がかかります
  153. 153. #UE4 | @UNREALENGINE PrePass RenderDocではこの工程を 「Mesh Viewer」で見れます!
  154. 154. #UE4 | @UNREALENGINE PrePass 上の方から順番に見てみると… GIF
  155. 155. #UE4 | @UNREALENGINE PrePass 何 この ポリゴン密度
  156. 156. #UE4 | @UNREALENGINE PrePass こいつのポリ数 約270万(赤枠のIndex数の1/3がポリ数です)
  157. 157. #UE4 | @UNREALENGINE PrePass こいつのポリ数 約270万(赤枠のIndex数の1/3がポリ数です) 完全に修正対象のやつですね
  158. 158. #UE4 | @UNREALENGINE PrePass これでどうだ!
  159. 159. #UE4 | @UNREALENGINE PrePass めっちゃ早くなった!!
  160. 160. #UE4 | @UNREALENGINE PrePass はい 皆様
  161. 161. #UE4 | @UNREALENGINE PrePass はい 皆様 やりましたね
  162. 162. #UE4 | @UNREALENGINE PrePass プロファイル(調査) & オプティマイズ(最適化) しちゃいましたね
  163. 163. #UE4 | @UNREALENGINE PrePass これが…… …ぷろふぁいる……?
  164. 164. #UE4 | @UNREALENGINE PrePass そう! これがプロファイルです! とても簡単&楽しいですよね!
  165. 165. #UE4 | @UNREALENGINE PrePass やったことは「Event Browser」を見て
  166. 166. #UE4 | @UNREALENGINE PrePass 「Duration(時間)」を測って
  167. 167. #UE4 | @UNREALENGINE PrePass 「Texture Viewer」で絵を確認して
  168. 168. #UE4 | @UNREALENGINE PrePass 「Mesh Viewer」で使われてるメッシュを見る
  169. 169. #UE4 | @UNREALENGINE PrePass 「Mesh Viewer」で使われてるメッシュを見る たったこれだけ!
  170. 170. #UE4 | @UNREALENGINE PrePass でもこれをアーティストさんが やる事にとっても意味があるんです
  171. 171. #UE4 | @UNREALENGINE PrePass もちろんプログラマさんも同じ それ以上のプロファイルを取れます
  172. 172. #UE4 | @UNREALENGINE PrePass でも…
  173. 173. #UE4 | @UNREALENGINE PrePass でも…
  174. 174. #UE4 | @UNREALENGINE PrePass 作った本人でないと わからない事って多いですよね
  175. 175. #UE4 | @UNREALENGINE PrePass さらに こういった制作者レベルのミスは チリツモの負荷になりやすいです
  176. 176. #UE4 | @UNREALENGINE PrePass 制作者自身による日頃からのメンテナンス それがとっても大事!なのです
  177. 177. #UE4 | @UNREALENGINE PrePass さて プロファイルの重要性もお伝えしたところで
  178. 178. #UE4 | @UNREALENGINE PrePass さて プロファイルの重要性もお伝えしたところで この調子でどんどん行きましょう!
  179. 179. #UE4 | @UNREALENGINE BasePass 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 次は「BasePass」 「下塗り」です
  180. 180. #UE4 | @UNREALENGINE BasePass 「BasePass」は「下塗り」のイメージです
  181. 181. #UE4 | @UNREALENGINE BasePass 皆様も本気で塗りにかかる前に 各種パーツや素材ごとにレイヤー分けして 事前処理しとく という事やりませんか?
  182. 182. #UE4 | @UNREALENGINE BasePass GPUも同じです
  183. 183. #UE4 | @UNREALENGINE BasePass 後の「清書」に備えて 下準備しておく工程 それが「BasePass」「下塗り」です 「清書」「下塗り」
  184. 184. #UE4 | @UNREALENGINE BasePass ただ なんとGPUさん さすがμsの住人 最大8枚同時に「下塗り」することが可能です (GPUによります)
  185. 185. #UE4 | @UNREALENGINE BasePass でも8本の腕を同時に動かすと大変なので UE4では気を使って6枚にしてます (6枚でも多いよ!という声も聞きます)
  186. 186. #UE4 | @UNREALENGINE BasePass そしてこれはRenderDocの 「Texture Viewer」で確認できます!
  187. 187. #UE4 | @UNREALENGINE BasePass ほら!「PrePass」(下書き)の時は 白黒1枚だけだったOutputsに!こんなにいっぱい! 「下塗り」「下書き」 GIF
  188. 188. #UE4 | @UNREALENGINE BasePass これらの「下塗り素材」は ちょと難しい言葉で「Gバッファ」といいます 「Gバッファ」
  189. 189. #UE4 | @UNREALENGINE BasePass そして「Gバッファ」は マテリアルで計算されたものが描かれております
  190. 190. #UE4 | @UNREALENGINE BasePass ということはつまり! マテリアルで難しい事をすると 「BasePass」(下塗り)で問題が起きるということです
  191. 191. #UE4 | @UNREALENGINE BasePass さて では先程と同じく 「Duration」を 測ってみましょう
  192. 192. #UE4 | @UNREALENGINE BasePass いましたね
  193. 193. #UE4 | @UNREALENGINE BasePass ヤバそうなやつ
  194. 194. #UE4 | @UNREALENGINE BasePass ここで またご説明
  195. 195. #UE4 | @UNREALENGINE BasePass BasePass(下塗り)はPrePass(下書き)と同じく 一度モデルを 画面に合うように変形します
  196. 196. #UE4 | @UNREALENGINE BasePass その後 書いといた「下書き」と照らし合わせて
  197. 197. #UE4 | @UNREALENGINE BasePass その後 書いといた「下書き」と照らし合わせて
  198. 198. #UE4 | @UNREALENGINE BasePass その後 書いといた「下書き」と照らし合わせて 必要なとこにだけ色を塗る というのを繰り返します
  199. 199. #UE4 | @UNREALENGINE BasePass 下書きを利用することで 無駄に色を塗る事を避けてるんですね!
  200. 200. #UE4 | @UNREALENGINE BasePass それくらい色を塗るのは大変なことなのです ややこしい事したらすぐパンクします 下書きしてても 塗るのは辛い……
  201. 201. #UE4 | @UNREALENGINE BasePass さて ではさっきのこいつ
  202. 202. #UE4 | @UNREALENGINE BasePass 何が問題だったか 「Texture Viewer」のInputsを見てみましょう
  203. 203. #UE4 | @UNREALENGINE BasePass GIF
  204. 204. #UE4 | @UNREALENGINE BasePass めっちゃ大量のテクスチャ使っとる
  205. 205. #UE4 | @UNREALENGINE BasePass しかもほとんどのテクスチャが結果に関係ない!
  206. 206. #UE4 | @UNREALENGINE BasePass 大量のテクスチャを使うことは 参考資料を大量に見ながら書くことと同じです GPUさん混乱して書くの遅くなります え?これはどこに使うの? なにがどれ??
  207. 207. #UE4 | @UNREALENGINE BasePass どうやら色んなパターンに対応できる スーパー汎用マテリアルを作ったことで とっても重くなってたみたいですね
  208. 208. #UE4 | @UNREALENGINE BasePass プロファイル(調査) & オプティマイズ(最適化) !!
  209. 209. #UE4 | @UNREALENGINE BasePass マテリアルの整理をして 絵を変えずに処理を軽く!
  210. 210. #UE4 | @UNREALENGINE BasePass
  211. 211. #UE4 | @UNREALENGINE BasePass
  212. 212. #UE4 | @UNREALENGINE BasePass どーん!
  213. 213. #UE4 | @UNREALENGINE BasePass プロファイル
  214. 214. #UE4 | @UNREALENGINE BasePass プロファイル 楽しい
  215. 215. #UE4 | @UNREALENGINE BasePass こちらも先程と同じくですが もちろんプログラマさんも同じ それ以上のプロファイルを取れます
  216. 216. #UE4 | @UNREALENGINE BasePass でも…
  217. 217. #UE4 | @UNREALENGINE BasePass アーティストさんの プロファイルがあるとみんな幸せ
  218. 218. #UE4 | @UNREALENGINE BasePass さぁ どんどん行きましょう!!
  219. 219. #UE4 | @UNREALENGINE Lighting 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 次は「Lighting」 「清書」
  220. 220. #UE4 | @UNREALENGINE Lighting 「Lighting」は「清書」! とうとう絵作りの本番です!
  221. 221. #UE4 | @UNREALENGINE Lighting Inputsにこれまで一生懸命作った 「Gバッファ」(下塗り素材)がいるのがわかりますね
  222. 222. #UE4 | @UNREALENGINE Lighting 「下書き」「下塗り」が終わったので これらを使って「清書」していくわけです
  223. 223. #UE4 | @UNREALENGINE Lighting 光は絵の全てです ライトをどんどん当てて 魅力的な絵を作り上げていきましょう!
  224. 224. #UE4 | @UNREALENGINE Lighting GIF
  225. 225. #UE4 | @UNREALENGINE Lighting んん??
  226. 226. #UE4 | @UNREALENGINE Lighting ここは問題ない ライトが当たってる
  227. 227. #UE4 | @UNREALENGINE Lighting ここ ライト当たってる??
  228. 228. #UE4 | @UNREALENGINE Lighting ここ ライト当たってる?? GIF
  229. 229. #UE4 | @UNREALENGINE Lighting 当たってない
  230. 230. #UE4 | @UNREALENGINE Lighting どうやら減衰して光が当たってないにも関わらず Radiusを大きくしているライトが多数いるみたいです
  231. 231. #UE4 | @UNREALENGINE Lighting プロファイル(調査) & オプティマイズ(最適化) !!
  232. 232. #UE4 | @UNREALENGINE Lighting 無駄に大きいライト範囲を適正値に!!
  233. 233. #UE4 | @UNREALENGINE Lighting
  234. 234. #UE4 | @UNREALENGINE Lighting どーん!
  235. 235. #UE4 | @UNREALENGINE Lighting こうやってそれぞれのレイヤーの 効果を確かめながら最適化できるのも RenderDocの素晴らしいとこですね!
  236. 236. #UE4 | @UNREALENGINE Lighting さて ライティングが終われば 大体の工程は完了です! ここからはクォリティアップです!
  237. 237. #UE4 | @UNREALENGINE Translucency 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」 次は いつもいじめられがちな 「Translucency」 「書き込み」
  238. 238. #UE4 | @UNREALENGINE Translucency 「Translucency」は大体絵が出来たので 最後の仕上げにどんどんレイヤー重ねて 「書き込み」してるイメージです
  239. 239. #UE4 | @UNREALENGINE Translucency なので追加で書く範囲大きいと大変です 重ねて書けば書くほど大変なんです
  240. 240. #UE4 | @UNREALENGINE Translucency これに関しては 皆さんご存知かとは思うのですが エディタ上で「Quad Overdraw」を見るのが便利ですね
  241. 241. #UE4 | @UNREALENGINE Translucency 素晴らしいデバッグ表示で 重ね書きしたとこが一発でわかります
  242. 242. #UE4 | @UNREALENGINE Translucency 「シェーダー複雑度」の方でも良し
  243. 243. #UE4 | @UNREALENGINE Translucency しかし!! RenderDocはさらにとっても 便利な機能があります!
  244. 244. #UE4 | @UNREALENGINE Translucency それが「Pixel History」
  245. 245. #UE4 | @UNREALENGINE Translucency 使い方
  246. 246. #UE4 | @UNREALENGINE Translucency 「Texture Viewer」の 「Outputs」を選んで……
  247. 247. #UE4 | @UNREALENGINE Translucency 画像の上で右クリックして 調べたいピクセルを指定……
  248. 248. #UE4 | @UNREALENGINE Translucency 右下の「History」を押すと……
  249. 249. #UE4 | @UNREALENGINE Translucency 指定した場所がこれまでどんな風に処理されて 色が変わってきたかが見れるのです!!
  250. 250. #UE4 | @UNREALENGINE Translucency GIFでどうぞ GIF
  251. 251. #UE4 | @UNREALENGINE Translucency すると……
  252. 252. #UE4 | @UNREALENGINE Translucency あれあれ……?
  253. 253. #UE4 | @UNREALENGINE Translucency この後ろの方のHistory……書き込まれてるのに ほとんど色が変わってないぞ??
  254. 254. #UE4 | @UNREALENGINE Translucency どうやらここにある煙が薄すぎて
  255. 255. #UE4 | @UNREALENGINE Translucency 意味をなしていないどうやらここにある煙が薄すぎて
  256. 256. #UE4 | @UNREALENGINE Translucency これ全部絵に貢献していない
  257. 257. #UE4 | @UNREALENGINE Translucency プロファイル(調査) & オプティマイズ(最適化) !!
  258. 258. #UE4 | @UNREALENGINE Translucency
  259. 259. #UE4 | @UNREALENGINE Translucency どーん!
  260. 260. #UE4 | @UNREALENGINE Translucency たのしいですね
  261. 261. #UE4 | @UNREALENGINE Translucency そしてとうとう ラストです
  262. 262. #UE4 | @UNREALENGINE PostProcess 「PostProcess」 「仕上げ」 「仕上げ」 「書き込み」 「下書き」 「下塗り」 「清書」
  263. 263. #UE4 | @UNREALENGINE PostProcess 「PostProcess」はその名前のまんま「仕上げ」です
  264. 264. #UE4 | @UNREALENGINE PostProcess Photoshopで絵を書く時も 最後に調整レイヤーとかで色味いじったりしますよね
  265. 265. #UE4 | @UNREALENGINE PostProcess この工程はそれです
  266. 266. #UE4 | @UNREALENGINE PostProcess ただ…… ラストなのにごめんなさい……
  267. 267. #UE4 | @UNREALENGINE PostProcess 実は「PostProcess」をRenderDocで見るのは…… ちょっとややこしい……!
  268. 268. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
  269. 269. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
  270. 270. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
  271. 271. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
  272. 272. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
  273. 273. #UE4 | @UNREALENGINE PostProcess Photoshopで色味調整する際は 調整レイヤーを重ねるごとに 色が変わっていくイメージだと思いますが……
  274. 274. #UE4 | @UNREALENGINE PostProcess でも UE4の実際のポストプロセスのイメージは 色んな機能を持った調整レイヤーを まとめて作って一気に適用する感じ
  275. 275. #UE4 | @UNREALENGINE PostProcess でも UE4の実際のポストプロセスのイメージは 色んな機能を持った調整レイヤーを まとめて作って一気に適用する感じ
  276. 276. #UE4 | @UNREALENGINE PostProcess なので 間でやってることがわかりづらい……
  277. 277. #UE4 | @UNREALENGINE PostProcess すみません ここも 無視して下さい
  278. 278. #UE4 | @UNREALENGINE PostProcess わたし 今日言いました
  279. 279. #UE4 | @UNREALENGINE PostProcess ちなみに こちらの神スライドに ポスプロ解説あります! https://www.slideshare.net/EpicGamesJapan/cedec2016-unreal-engine-4
  280. 280. #UE4 | @UNREALENGINE PostProcess こちらの神スライドにも ポスプロ解説あります!! https://www.slideshare.net/EpicGamesJapan/ue4-108770894
  281. 281. #UE4 | @UNREALENGINE まとめ さて ここまで皆様 長らくお付き合い頂きありがとうございました
  282. 282. #UE4 | @UNREALENGINE まとめ RenderDocは とても強力なプロファイラです
  283. 283. #UE4 | @UNREALENGINE まとめ 実際のところ 今回紹介した機能はごくごく一部で より詳しくプロファイルしたければ…
  284. 284. #UE4 | @UNREALENGINE まとめ シェーダーデバッグができたり
  285. 285. #UE4 | @UNREALENGINE まとめ Pythonによる解析だってできたりします
  286. 286. #UE4 | @UNREALENGINE まとめ でも! 今日覚えてもらいたいのはこれだけ!
  287. 287. #UE4 | @UNREALENGINE まとめ 「Event Browser」
  288. 288. #UE4 | @UNREALENGINE まとめ 「Duration」
  289. 289. #UE4 | @UNREALENGINE まとめ 「Texture Viewer」
  290. 290. #UE4 | @UNREALENGINE まとめ 「Mesh Viewer」
  291. 291. #UE4 | @UNREALENGINE まとめ これだけの機能でも とても多くの事を調べることができます
  292. 292. #UE4 | @UNREALENGINE まとめ そして 何よりも!!
  293. 293. #UE4 | @UNREALENGINE まとめ プロファイル 楽しい
  294. 294. #UE4 | @UNREALENGINE まとめ この講演によって アーティストの方にとってのプロファイルの敷居が下がり 日々「ちょっと気になったから見てみよ」みたいな流れになって より良いゲーム作りに貢献できたらいいなと思っております
  295. 295. #UE4 | @UNREALENGINE RenderDoc ちなみに今回はエディタからのプロファイルのお話でしたが パッケージをプロファイルしたい方はこちらをご参考頂けましたら! http://unwitherer.blogspot.com/2018/07/ue4renderdocpackaging.html?m=1https://docs.unrealengine.com/ja/Engine/Performance/RenderDoc/index.html
  296. 296. #UE4 | @UNREALENGINE まとめ CEDEC2019 出ます! 2019年9月4日(水)~6日(金) パシフィコ横浜 会議センター
  297. 297. #UE4 | @UNREALENGINE まとめ アンリアルフェスやります!
  298. 298. #UE4 | @UNREALENGINE まとめ ご清聴ありがとうございました
  299. 299. #UE4 | @UNREALENGINE 終

×