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

84.1K Views

August 05, 19

スライド概要

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

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

profile-image

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

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
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