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

スライド概要

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

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

profile-image

エピック ゲームズ ジャパン

@EpicGamesJapan

作者について:

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2019-08-05 06:07:00

各ページのテキスト

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

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

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

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

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

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

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

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

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

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

11. はじめに ?? #UE4 | @UNREALENGINE

12. はじめに #UE4 | @UNREALENGINE

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

14. はじめに #UE4 | @UNREALENGINE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32. RenderDoc #UE4 | @UNREALENGINE

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

34. RenderDoc 「ぷろふぁいら」? #UE4 | @UNREALENGINE

35. RenderDoc この絵を #UE4 | @UNREALENGINE

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

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

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

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

40. RenderDoc GIF インストール! #UE4 | @UNREALENGINE

41. RenderDoc 準備完了!! #UE4 | @UNREALENGINE

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

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

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

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

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

47. RenderDoc 入れ方 #UE4 | @UNREALENGINE

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

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

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

51. RenderDoc 有効化! #UE4 | @UNREALENGINE

52. RenderDoc リスタート! #UE4 | @UNREALENGINE

53. RenderDoc リスタート! #UE4 | @UNREALENGINE

54. RenderDoc #UE4 | @UNREALENGINE

55. RenderDoc RenderDocのボタンが現れます! #UE4 | @UNREALENGINE

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

57. RenderDoc ボタンポチッ! #UE4 | @UNREALENGINE

58. RenderDoc GIF ボタンポチッ! #UE4 | @UNREALENGINE

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

60. RenderDoc めっちゃ #UE4 | @UNREALENGINE

61. RenderDoc かんたん #UE4 | @UNREALENGINE

62. 終 #UE4 | @UNREALENGINE

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

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

65. RenderDoc はいここ! #UE4 | @UNREALENGINE

66. RenderDoc 「Event Browser」 #UE4 | @UNREALENGINE

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

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

69. RenderDoc GIF 次に これ! #UE4 | @UNREALENGINE

70. RenderDoc 「Texture Viewer」 #UE4 | @UNREALENGINE

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

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

73. RenderDoc 「Event Browser」で各イベント(レイヤー)を選んで #UE4 | @UNREALENGINE

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

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

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

77. RenderDoc GIF #UE4 | @UNREALENGINE

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

79. RenderDoc #UE4 | @UNREALENGINE

80. RenderDoc #UE4 | @UNREALENGINE

81. RenderDoc #UE4 | @UNREALENGINE

82. RenderDoc #UE4 | @UNREALENGINE

83. RenderDoc #UE4 | @UNREALENGINE

84. RenderDoc #UE4 | @UNREALENGINE

85. RenderDoc 楽しい #UE4 | @UNREALENGINE

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

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

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

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

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

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

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

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

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

95. RenderDoc ぷれ……ぱす……? べーすぱす……?? #UE4 | @UNREALENGINE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

139. PrePass ポチッ #UE4 | @UNREALENGINE

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

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

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

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

144. PrePass あれ? でも なんかここ…… #UE4 | @UNREALENGINE

145. PrePass ここだけ遅くない? #UE4 | @UNREALENGINE

146. PrePass 気になりません? #UE4 | @UNREALENGINE

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

148. PrePass GPUは PrePass(下書き)の際 #UE4 | @UNREALENGINE

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

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

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

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

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

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

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

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

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

158. PrePass これでどうだ! #UE4 | @UNREALENGINE

159. PrePass めっちゃ早くなった!! #UE4 | @UNREALENGINE

160. PrePass はい 皆様 #UE4 | @UNREALENGINE

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

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

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

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

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

166. PrePass 「Duration(時間)」を測って #UE4 | @UNREALENGINE

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

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

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

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

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

172. PrePass でも… #UE4 | @UNREALENGINE

173. PrePass でも… #UE4 | @UNREALENGINE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

192. BasePass いましたね #UE4 | @UNREALENGINE

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

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

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

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

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

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

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

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

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

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

203. BasePass GIF #UE4 | @UNREALENGINE

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

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

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

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

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

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

210. BasePass #UE4 | @UNREALENGINE

211. BasePass #UE4 | @UNREALENGINE

212. BasePass どーん! #UE4 | @UNREALENGINE

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

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

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

216. BasePass でも… #UE4 | @UNREALENGINE

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

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

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

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

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

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

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

224. Lighting GIF #UE4 | @UNREALENGINE

225. Lighting んん?? #UE4 | @UNREALENGINE

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

227. Lighting ここ ライト当たってる?? #UE4 | @UNREALENGINE

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

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

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

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

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

233. Lighting #UE4 | @UNREALENGINE

234. Lighting どーん! #UE4 | @UNREALENGINE

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

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

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

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

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

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

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

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

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

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

245. Translucency 使い方 #UE4 | @UNREALENGINE

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

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

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

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

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

251. Translucency すると…… #UE4 | @UNREALENGINE

252. Translucency あれあれ……? #UE4 | @UNREALENGINE

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

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

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

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

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

258. Translucency #UE4 | @UNREALENGINE

259. Translucency どーん! #UE4 | @UNREALENGINE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

288. まとめ 「Duration」 #UE4 | @UNREALENGINE

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

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

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

292. まとめ そして 何よりも!! #UE4 | @UNREALENGINE

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

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

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

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

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

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

299. 終 #UE4 | @UNREALENGINE