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.

UE4で学ぶ水中表現(UE4 Environment Art Dive)

7,139 views

Published on

講演動画はこちら
https://www.youtube.com/watch?v=Wr974MCYHSU

発表者:小林浩之(Epic Games Japan)
本スライドは2019年12月15日に行われた勉強会「 UE4 Environment Art Dive」の講演資料となります。

Published in: Engineering
  • Be the first to comment

UE4で学ぶ水中表現(UE4 Environment Art Dive)

  1. 1. UE4で学ぶ水中表現 Epic Games Japan / Technical Artist 小林 浩之
  2. 2. #UE4 | @UNREALENGINE 自己紹介 小林 浩之 普段はUDNでの解答など、 UE4のサポート業務を中心にやってます 前職はAAAタイトルのTA Twitter / はのば@hannover_bloss
  3. 3. #UE4 | @UNREALENGINE 勉強会用に 作ってきました
  4. 4. #UE4 | @UNREALENGINE セノーテ 鍾乳洞の天井が崩落して できた穴に溜まった泉 ユカタン半島に点在
  5. 5. #UE4 | @UNREALENGINE 目指した絵作り ● 水上、水中両方からみても破綻しない ● リアルな水中表現
  6. 6. #UE4 | @UNREALENGINE 目指した絵作り ● 水上、水中両方からみても破綻しない ● リアルな水中表現
  7. 7. #UE4 | @UNREALENGINE 水上、水中両方からみても破綻しない カメラが半分水没した状態を再現
  8. 8. #UE4 | @UNREALENGINE 水面のメッシュ構成 カメラと向かい合う面を作って疑似的に水没状態を再現
  9. 9. #UE4 | @UNREALENGINE 水面のメッシュ構成 メッシュA 断面用
  10. 10. #UE4 | @UNREALENGINE 水面のメッシュ構成 メッシュB 水面(表)用
  11. 11. #UE4 | @UNREALENGINE 水面のメッシュ構成 メッシュC 水面(裏)用
  12. 12. #UE4 | @UNREALENGINE 水面のメッシュ構成 メッシュD 境界用
  13. 13. #UE4 | @UNREALENGINE 水面のメッシュ構成 半透明ソート順(描画する順番)をきっちり決めたかったため 4つのメッシュ構成に
  14. 14. #UE4 | @UNREALENGINE 水マテリアル解説
  15. 15. #UE4 | @UNREALENGINE 水面マテリアル(表)
  16. 16. #UE4 | @UNREALENGINE 水面マテリアル(表)
  17. 17. #UE4 | @UNREALENGINE 水面マテリアル(表) Screen UV歪ませる Scene Colorと深度、フレネル
  18. 18. #UE4 | @UNREALENGINE 水面マテリアル(表)
  19. 19. #UE4 | @UNREALENGINE 水面マテリアル(表) OpacityやRefractionは使わず、 Scene ColorをEmissiveに刺すことで半透明を表現 水面の動き(波)はHoudiniで連番テクスチャ作成 ノーマルやWorld Displacementに
  20. 20. #UE4 | @UNREALENGINE 水面の動き HoudiniのOceanからオフセットとノーマルを連番書き出し
  21. 21. #UE4 | @UNREALENGINE 水面の動き HoudiniのOceanからオフセットとノーマルを連番書き出し UVはワールド座標
  22. 22. #UE4 | @UNREALENGINE 水面マテリアル(表) Screen UV歪ませる Scene Colorと深度、フレネル
  23. 23. #UE4 | @UNREALENGINE 水面マテリアル(表) Screen UV歪ませる
  24. 24. #UE4 | @UNREALENGINE 水面マテリアル(表) Screen UVにPixel Normalを足しているだけ 物理的に正しいものではないので注意
  25. 25. #UE4 | @UNREALENGINE 水面マテリアル(表) Scene Colorと深度、フレネル
  26. 26. #UE4 | @UNREALENGINE 水面マテリアル(表) 歪めたScreen UVをScene Colorへ 深度によって色を付ける
  27. 27. #UE4 | @UNREALENGINE 水面マテリアル(裏)
  28. 28. #UE4 | @UNREALENGINE 水面マテリアル(裏)
  29. 29. #UE4 | @UNREALENGINE 水面マテリアル(裏) Screen UV歪ませる Scene Color 全反射表現(後ほど解説)
  30. 30. #UE4 | @UNREALENGINE 水面マテリアル(裏) Screen UV歪ませる Scene Color
  31. 31. #UE4 | @UNREALENGINE 水面マテリアル(裏) 全反射表現(後ほど解説)
  32. 32. #UE4 | @UNREALENGINE 断面マテリアル
  33. 33. #UE4 | @UNREALENGINE 断面マテリアル マテリアルはシンプルに透過させているだけ Custom Depthに描画して水面以下判定に使う
  34. 34. #UE4 | @UNREALENGINE 境界マテリアル
  35. 35. #UE4 | @UNREALENGINE 境界マテリアル
  36. 36. #UE4 | @UNREALENGINE 境界マテリアル 境界のグラデーション Scene Color
  37. 37. #UE4 | @UNREALENGINE 境界マテリアル 境界のグラデーション
  38. 38. #UE4 | @UNREALENGINE 境界マテリアル 矩形に開いたUVからグラデーションを作る テクスチャでもよさそう
  39. 39. #UE4 | @UNREALENGINE 境界マテリアル 矩形に開いたUVから計算 テクスチャでもよさそう
  40. 40. #UE4 | @UNREALENGINE 境界マテリアル Scene Color
  41. 41. #UE4 | @UNREALENGINE 境界マテリアル 境界部分のグラデーションを使って、 Scene Colorを適当に歪める
  42. 42. #UE4 | @UNREALENGINE 目指した絵作り ● 水上、水中両方からみても破綻しない ● リアルな水中表現
  43. 43. #UE4 | @UNREALENGINE 目指した絵作り ● 水上、水中両方からみても破綻しない ● リアルな水中表現
  44. 44. #UE4 | @UNREALENGINE どんな水中表現を使ったか
  45. 45. #UE4 | @UNREALENGINE 何もない状態から要素を足していきます
  46. 46. #UE4 | @UNREALENGINE 水面の反射と屈折
  47. 47. #UE4 | @UNREALENGINE コースティクス
  48. 48. #UE4 | @UNREALENGINE 色の減衰
  49. 49. #UE4 | @UNREALENGINE ゴッドレイ
  50. 50. #UE4 | @UNREALENGINE Before After
  51. 51. #UE4 | @UNREALENGINE 水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ
  52. 52. #UE4 | @UNREALENGINE ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
  53. 53. #UE4 | @UNREALENGINE 水面の反射と屈折
  54. 54. #UE4 | @UNREALENGINE 水面の反射と屈折 水中だと水面が鏡のようになるのはなぜ?
  55. 55. #UE4 | @UNREALENGINE 中学物理の授業思い出してみましょう
  56. 56. #UE4 | @UNREALENGINE 入射角、反射角、屈折角について
  57. 57. #UE4 | @UNREALENGINE 簡単に図で説明します
  58. 58. #UE4 | @UNREALENGINE 空気 水
  59. 59. #UE4 | @UNREALENGINE 光 光が差し込んできたとき…
  60. 60. #UE4 | @UNREALENGINE 光が当たった地点から 面に対して垂直な線を引く 光
  61. 61. #UE4 | @UNREALENGINE 入射角 垂直線との間の角
  62. 62. #UE4 | @UNREALENGINE 反射角 一部の光が反射して 入射角の反対側に飛ぶ 角度は入射角と等しい
  63. 63. #UE4 | @UNREALENGINE 屈折角 反射しなかった光は 屈折して水の中へ 空気から水の場合 屈折角は入射角よりも 小さくなる
  64. 64. #UE4 | @UNREALENGINE 空気から水に向かって 光が向かった場合の図 空気 水
  65. 65. #UE4 | @UNREALENGINE 水中から空気へ向かった場合
  66. 66. #UE4 | @UNREALENGINE
  67. 67. #UE4 | @UNREALENGINE 入射角 垂直線との間の角
  68. 68. #UE4 | @UNREALENGINE 反射角 一部の光が反射して 入射角の反対側に飛ぶ 角度は入射角と等しい
  69. 69. #UE4 | @UNREALENGINE 屈折角 水から空気の場合 屈折角は入射角より大きくなる
  70. 70. #UE4 | @UNREALENGINE 臨界角 90° ある入射角で屈折角が90度になる さらに入射角を大きくすると…
  71. 71. #UE4 | @UNREALENGINE 全反射 入射角が臨界角を超えると すべての光を反射する
  72. 72. #UE4 | @UNREALENGINE UE4で全反射を再現
  73. 73. #UE4 | @UNREALENGINE Planar Reflection なるべく綺麗な反射が欲しかったのでPlanarを使用 反射が下向きなのでPlanarも180度ひっくり返す
  74. 74. #UE4 | @UNREALENGINE Planar Reflection 反射は綺麗だけど、臨界角の境目を作っていないので向こう側が見えない
  75. 75. #UE4 | @UNREALENGINE マテリアルで臨界角を求める
  76. 76. #UE4 | @UNREALENGINE 約48.6度 水→空気の臨界角 48.6°
  77. 77. #UE4 | @UNREALENGINE 入射角を調べる 48.6°
  78. 78. #UE4 | @UNREALENGINE 水面からの垂直線 Pixel Normalに置き換え Pixel Normal
  79. 79. #UE4 | @UNREALENGINE 光のベクトル Camera Vectorに置き換え Camera Vector
  80. 80. #UE4 | @UNREALENGINE 2ベクトルのなす角が48.6度 以上かどうかを求める
  81. 81. #UE4 | @UNREALENGINE 水面マテリアル(裏)
  82. 82. #UE4 | @UNREALENGINE 臨界角マスク 水面マテリアル(裏)
  83. 83. #UE4 | @UNREALENGINE 水面マテリアル(裏) 内積(Dot Product)で 2ベクトルのなす角を求める
  84. 84. #UE4 | @UNREALENGINE 臨界角マスク 水面マテリアル(裏) 臨界角48.6度のマスクができる
  85. 85. #UE4 | @UNREALENGINE 水面マテリアル(裏) Scene Colorに乗算 透けないように 臨界角マスク
  86. 86. #UE4 | @UNREALENGINE 水面マテリアル(裏) 鏡面に切り替え 臨界角マスク
  87. 87. #UE4 | @UNREALENGINE
  88. 88. #UE4 | @UNREALENGINE ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
  89. 89. #UE4 | @UNREALENGINE 水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ
  90. 90. #UE4 | @UNREALENGINE コースティクス 反射や屈折の影響で光が収束してできる模様 川や海などの底でよく観察できる
  91. 91. #UE4 | @UNREALENGINE どうやってこの模様ができているんでしょうか?
  92. 92. #UE4 | @UNREALENGINE 先ほどの図に戻ります
  93. 93. #UE4 | @UNREALENGINE
  94. 94. #UE4 | @UNREALENGINE 水面が波打っているとどうなるか
  95. 95. #UE4 | @UNREALENGINE 空気 水 底
  96. 96. #UE4 | @UNREALENGINE 光が水面を通って・・・
  97. 97. #UE4 | @UNREALENGINE 屈折して・・・
  98. 98. #UE4 | @UNREALENGINE 底に当たる
  99. 99. #UE4 | @UNREALENGINE 光が集中した場所は 当然明るくなる
  100. 100. #UE4 | @UNREALENGINE 明るい
  101. 101. #UE4 | @UNREALENGINE 明るい 暗い
  102. 102. #UE4 | @UNREALENGINE 明るい
  103. 103. #UE4 | @UNREALENGINE 明るい 暗い
  104. 104. #UE4 | @UNREALENGINE どうやって表現するか
  105. 105. #UE4 | @UNREALENGINE Houdiniで屈折の計算&連番テクスチャ作成
  106. 106. #UE4 | @UNREALENGINE Houdiniで屈折の計算&連番テクスチャ作成 先ほどの図を3次元で
  107. 107. #UE4 | @UNREALENGINE Houdiniで屈折の計算&連番テクスチャ作成 Ocean Simurationで適当に波を作る
  108. 108. #UE4 | @UNREALENGINE Houdiniで屈折の計算&連番テクスチャ作成 平面グリッドを用意
  109. 109. #UE4 | @UNREALENGINE Houdiniで屈折の計算&連番テクスチャ作成 平面にノーマル転送
  110. 110. #UE4 | @UNREALENGINE Houdiniで屈折の計算&連番テクスチャ作成 屈折ベクトルを計算
  111. 111. #UE4 | @UNREALENGINE Houdiniで屈折の計算&連番テクスチャ作成 屈折ベクトルへ頂点を移動
  112. 112. #UE4 | @UNREALENGINE Houdiniで屈折の計算&連番テクスチャ作成 重なり具合を頂点カラーに転送
  113. 113. #UE4 | @UNREALENGINE Houdiniで屈折の計算&連番テクスチャ作成 連番テクスチャとしてレンダリング
  114. 114. #UE4 | @UNREALENGINE UE4でセットアップ
  115. 115. #UE4 | @UNREALENGINE Light Function マテリアルで連番テクスチャ再生 Directional Lightに適用
  116. 116. #UE4 | @UNREALENGINE Light Function Houdiniで作った連番テクスチャをFlip Bookノードでアニメーション
  117. 117. #UE4 | @UNREALENGINE Light Function Houdiniで作った連番テクスチャをFlip Bookノードでアニメーション
  118. 118. #UE4 | @UNREALENGINE Light Function Off
  119. 119. #UE4 | @UNREALENGINE Light Function On
  120. 120. #UE4 | @UNREALENGINE 水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ
  121. 121. #UE4 | @UNREALENGINE ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
  122. 122. #UE4 | @UNREALENGINE 水は赤い光を吸収する 光が水の中を進むほど赤い光が吸収され、結果的に青が残る コップの水や浅瀬では吸収量が少ないため無色透明に見える
  123. 123. #UE4 | @UNREALENGINE ポストプロセスマテリアルで再現
  124. 124. #UE4 | @UNREALENGINE ポストプロセスマテリアル
  125. 125. #UE4 | @UNREALENGINE ポストプロセスマテリアル 深度 Custom Depthで 水面以下かどうか判定 深度を元に Scene Colorへ色を乗算
  126. 126. #UE4 | @UNREALENGINE ポストプロセスマテリアル 深度
  127. 127. #UE4 | @UNREALENGINE カメラからの距離
  128. 128. #UE4 | @UNREALENGINE 水面からの距離
  129. 129. #UE4 | @UNREALENGINE ポストプロセスマテリアル 深度を元に Scene Colorへ色を乗算
  130. 130. #UE4 | @UNREALENGINE Scene Colorへ色を乗算
  131. 131. #UE4 | @UNREALENGINE ポストプロセスマテリアル Custom Depthで 水面以下かどうか判定
  132. 132. #UE4 | @UNREALENGINE Custom Depthで水面以下判定 断面メッシュをCustom Depthに描画して・・・
  133. 133. #UE4 | @UNREALENGINE Custom Depthで水面以下判定 水面以下のマスクを作る
  134. 134. #UE4 | @UNREALENGINE Custom Depthで水面以下判定 水面以下にだけ色を付ける
  135. 135. #UE4 | @UNREALENGINE ポストプロセスマテリアル Off
  136. 136. #UE4 | @UNREALENGINE ポストプロセスマテリアル On
  137. 137. #UE4 | @UNREALENGINE ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
  138. 138. #UE4 | @UNREALENGINE ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
  139. 139. #UE4 | @UNREALENGINE 水中でのゴッドレイ 水中の浮遊物や泡、微生物などに光が当たって筋に見える
  140. 140. #UE4 | @UNREALENGINE Volumetric Fog
  141. 141. #UE4 | @UNREALENGINE Volumetric Fog 普通に置いただけだと全体的にフォグがかかる
  142. 142. #UE4 | @UNREALENGINE Volumetric Fog 水上と水中でフォグの濃度を変えたい 濃い 薄い
  143. 143. #UE4 | @UNREALENGINE Volume Material Particleに対して適用可能 Volumetric Fogの濃度や色をMaterialから制御できる
  144. 144. #UE4 | @UNREALENGINE Volume Material
  145. 145. #UE4 | @UNREALENGINE Volume Material Volume範囲と濃度
  146. 146. #UE4 | @UNREALENGINE Volume Material 水面以下かどうか
  147. 147. #UE4 | @UNREALENGINE Volume Material 色
  148. 148. #UE4 | @UNREALENGINE Niagara Particle
  149. 149. #UE4 | @UNREALENGINE Niagara Particle Particle SpawnにParticles.SpriteSizeを追加 フォグを調整したい範囲の大きさを数値入力
  150. 150. #UE4 | @UNREALENGINE Niagara Particle RenderからVolume Materialアサイン
  151. 151. #UE4 | @UNREALENGINE Volumetric Fog Off
  152. 152. #UE4 | @UNREALENGINE Volumetric Fog On
  153. 153. #UE4 | @UNREALENGINE まとめ ● 水中表現に必要な要素
  154. 154. #UE4 | @UNREALENGINE まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折
  155. 155. #UE4 | @UNREALENGINE まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス
  156. 156. #UE4 | @UNREALENGINE まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰
  157. 157. #UE4 | @UNREALENGINE まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ
  158. 158. #UE4 | @UNREALENGINE まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ これらを理解して表現できれば、リアルな水中が作れる!!
  159. 159. #UE4 | @UNREALENGINE その他 ● 背景アセット ● ライティング
  160. 160. #UE4 | @UNREALENGINE 背景アセット Megascansライブラリ
  161. 161. #UE4 | @UNREALENGINE 背景アセット Megascansライブラリ
  162. 162. #UE4 | @UNREALENGINE 濡れマテリアル
  163. 163. #UE4 | @UNREALENGINE 濡れマテリアル Roughness 水面以下はそのまま 水面以上は0~徐々に元のRoughnessへ
  164. 164. #UE4 | @UNREALENGINE 濡れマテリアル
  165. 165. #UE4 | @UNREALENGINE 濡れマテリアル 水面位置を取得
  166. 166. #UE4 | @UNREALENGINE 濡れマテリアル 水面位置からのグラデーション
  167. 167. #UE4 | @UNREALENGINE 濡れマテリアル Roughnessテクスチャに乗算
  168. 168. #UE4 | @UNREALENGINE 濡れマテリアル Off
  169. 169. #UE4 | @UNREALENGINE 濡れマテリアル On
  170. 170. #UE4 | @UNREALENGINE Megascansを使ってよかったこと モチーフにしたセノーテがそもそもパーツが少ない(岩や枝ばかり)ので Megascansライブラリが非常に役立った 背景アセットの製作コストを抑えて、メインの水中表現に注力ことができた
  171. 171. #UE4 | @UNREALENGINE ライティング ライトは Directional と Sky のみ
  172. 172. #UE4 | @UNREALENGINE ライティング Directional Lightの影 Cascade Shadow Area Shadow
  173. 173. #UE4 | @UNREALENGINE ライティング Directional Lightの影 Cascade Shadow Area Shadow
  174. 174. #UE4 | @UNREALENGINE ライティング Sun Position Calculator
  175. 175. #UE4 | @UNREALENGINE ライティング 緯度経度、タイムゾーン 日にちと時間を入れると その場所と時間の太陽の位置を計算する Sun Position Calculator
  176. 176. #UE4 | @UNREALENGINE ライティング Sun Position Calculator レベルに置く
  177. 177. #UE4 | @UNREALENGINE ライティング Google Mapから緯度経度を取得 緯度 経度 Sun Position Calculator
  178. 178. #UE4 | @UNREALENGINE ライティング Sun Position Calculator
  179. 179. #UE4 | @UNREALENGINE ライティング 有名なセノーテの緯度経度を取得 緯度 経度 Sun Position Calculator
  180. 180. #UE4 | @UNREALENGINE ライティング Sun Position Calculator
  181. 181. #UE4 | @UNREALENGINE ライティング Light Map解像度の調整 Light Map密度調整で トライ&エラーが続き大変だった
  182. 182. #UE4 | @UNREALENGINE ライティング Light Map解像度の調整 アクタ選択して・・・
  183. 183. #UE4 | @UNREALENGINE ライティング Light Map解像度の調整 アクタ選択して・・・ アセット開いて・・・
  184. 184. #UE4 | @UNREALENGINE ライティング Light Map解像度の調整 アクタ選択して・・・ アセット開いて・・・ 解像度変えて・・・
  185. 185. #UE4 | @UNREALENGINE ライティング Light Map解像度の調整 アクタ選択して・・・ アセット開いて・・・ 解像度変えて・・・ これをアセット数分繰り返す
  186. 186. #UE4 | @UNREALENGINE ライティング Light Map解像度の調整 アクタ選択して・・・ アセット開いて・・・ 解像度変えて・・・ これをアセット数分繰り返す めんどくさい・・・
  187. 187. #UE4 | @UNREALENGINE ライティング Light Map解像度の調整 Pythonで半自動化
  188. 188. #UE4 | @UNREALENGINE ライティング Light Map解像度の調整
  189. 189. #UE4 | @UNREALENGINE ご清聴ありがとうございました

×