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の使い方~

8,427 views

Published on

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

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

Published in: Engineering
  • DOWNLOAD FULL MOVIE, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. MOVIE 4K,FHD,HD,480P here { https://tinyurl.com/yybdfxwh }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

アーティストの為のプロファイル入門!~楽しい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 終

×