Download as PDF, PPTX
Uploaded byエピック・ゲームズ・ジャパン Epic Games Japan
UE4で学ぶ水中表現（UE4 Environment Art Dive）
講演動画はこちら https://www.youtube.com/watch?v=Wr974MCYHSU 発表者：小林浩之（Epic Games Japan） 本スライドは2019年12月15日に行われた勉強会「 UE4 Environment Art Dive」の講演資料となります。
More Related Content
![[UE4]マテリアルの注意すべきこと！～テクスチャロードとSwitch～](https://cdn.slidesharecdn.com/ss_thumbnails/ue4materialcaution-190309153116-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to UE4で学ぶ水中表現（UE4 Environment Art Dive）
UE4で学ぶ水中表現（UE4 Environment Art Dive）
- 1. UE4で学ぶ水中表現 Epic Games Japan/ Technical Artist 小林 浩之
- 2. #UE4 | @UNREALENGINE 自己紹介 小林浩之 普段はUDNでの解答など、 UE4のサポート業務を中心にやってます 前職はAAAタイトルのTA Twitter / はのば@hannover_bloss
- 3.
- 4.
- 5. #UE4 | @UNREALENGINE 目指した絵作り ●水上、水中両方からみても破綻しない ● リアルな水中表現
- 6. #UE4 | @UNREALENGINE 目指した絵作り ●水上、水中両方からみても破綻しない ● リアルな水中表現
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. #UE4 | @UNREALENGINE 水面マテリアル(表) ScreenUV歪ませる Scene Colorと深度、フレネル
- 18.
- 19. #UE4 | @UNREALENGINE 水面マテリアル(表) OpacityやRefractionは使わず、 SceneColorをEmissiveに刺すことで半透明を表現 水面の動き(波)はHoudiniで連番テクスチャ作成 ノーマルやWorld Displacementに
- 20.
- 21.
- 22. #UE4 | @UNREALENGINE 水面マテリアル(表) ScreenUV歪ませる Scene Colorと深度、フレネル
- 23.
- 24. #UE4 | @UNREALENGINE 水面マテリアル(表) ScreenUVにPixel Normalを足しているだけ 物理的に正しいものではないので注意
- 25. #UE4 | @UNREALENGINE 水面マテリアル(表) SceneColorと深度、フレネル
- 26. #UE4 | @UNREALENGINE 水面マテリアル(表) 歪めたScreenUVをScene Colorへ 深度によって色を付ける
- 27.
- 28.
- 29. #UE4 | @UNREALENGINE 水面マテリアル(裏) ScreenUV歪ませる Scene Color 全反射表現(後ほど解説)
- 30. #UE4 | @UNREALENGINE 水面マテリアル(裏) ScreenUV歪ませる Scene Color
- 31.
- 32.
- 33. #UE4 | @UNREALENGINE 断面マテリアル マテリアルはシンプルに透過させているだけ CustomDepthに描画して水面以下判定に使う
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. #UE4 | @UNREALENGINE 目指した絵作り ●水上、水中両方からみても破綻しない ● リアルな水中表現
- 43. #UE4 | @UNREALENGINE 目指した絵作り ●水上、水中両方からみても破綻しない ● リアルな水中表現
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. #UE4 | @UNREALENGINE 水中の構成要素 ●水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ
- 52. #UE4 | @UNREALENGINE ●水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73. #UE4 | @UNREALENGINE PlanarReflection なるべく綺麗な反射が欲しかったのでPlanarを使用 反射が下向きなのでPlanarも180度ひっくり返す
- 74. #UE4 | @UNREALENGINE PlanarReflection 反射は綺麗だけど、臨界角の境目を作っていないので向こう側が見えない
- 75.
- 76.
- 77.
- 78. #UE4 | @UNREALENGINE 水面からの垂直線 PixelNormalに置き換え Pixel Normal
- 79. #UE4 | @UNREALENGINE 光のベクトル CameraVectorに置き換え Camera Vector
- 80.
- 81.
- 82.
- 83. #UE4 | @UNREALENGINE 水面マテリアル(裏) 内積(DotProduct)で 2ベクトルのなす角を求める
- 84.
- 85. #UE4 | @UNREALENGINE 水面マテリアル(裏) SceneColorに乗算 透けないように 臨界角マスク
- 86.
- 87.
- 88. #UE4 | @UNREALENGINE ●水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
- 89. #UE4 | @UNREALENGINE 水中の構成要素 ●水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107. #UE4 | @UNREALENGINE Houdiniで屈折の計算＆連番テクスチャ作成 OceanSimurationで適当に波を作る
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115. #UE4 | @UNREALENGINE LightFunction マテリアルで連番テクスチャ再生 Directional Lightに適用
- 116. #UE4 | @UNREALENGINE LightFunction Houdiniで作った連番テクスチャをFlip Bookノードでアニメーション
- 117. #UE4 | @UNREALENGINE LightFunction Houdiniで作った連番テクスチャをFlip Bookノードでアニメーション
- 118. #UE4 | @UNREALENGINE LightFunction Off
- 119. #UE4 | @UNREALENGINE LightFunction On
- 120. #UE4 | @UNREALENGINE 水中の構成要素 ●水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ
- 121. #UE4 | @UNREALENGINE ●水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
- 122.
- 123.
- 124.
- 125. #UE4 | @UNREALENGINE ポストプロセスマテリアル 深度 CustomDepthで 水面以下かどうか判定 深度を元に Scene Colorへ色を乗算
- 126.
- 127.
- 128.
- 129.
- 130. #UE4 | @UNREALENGINE SceneColorへ色を乗算
- 131. #UE4 | @UNREALENGINE ポストプロセスマテリアル CustomDepthで 水面以下かどうか判定
- 132. #UE4 | @UNREALENGINE CustomDepthで水面以下判定 断面メッシュをCustom Depthに描画して・・・
- 133. #UE4 | @UNREALENGINE CustomDepthで水面以下判定 水面以下のマスクを作る
- 134. #UE4 | @UNREALENGINE CustomDepthで水面以下判定 水面以下にだけ色を付ける
- 135.
- 136.
- 137. #UE4 | @UNREALENGINE ●水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
- 138. #UE4 | @UNREALENGINE ●水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ 水中の構成要素
- 139.
- 140.
- 141. #UE4 | @UNREALENGINE VolumetricFog 普通に置いただけだと全体的にフォグがかかる
- 142. #UE4 | @UNREALENGINE VolumetricFog 水上と水中でフォグの濃度を変えたい 濃い 薄い
- 143. #UE4 | @UNREALENGINE VolumeMaterial Particleに対して適用可能 Volumetric Fogの濃度や色をMaterialから制御できる
- 144. #UE4 | @UNREALENGINE VolumeMaterial
- 145. #UE4 | @UNREALENGINE VolumeMaterial Volume範囲と濃度
- 146. #UE4 | @UNREALENGINE VolumeMaterial 水面以下かどうか
- 147. #UE4 | @UNREALENGINE VolumeMaterial 色
- 148. #UE4 | @UNREALENGINE NiagaraParticle
- 149. #UE4 | @UNREALENGINE NiagaraParticle Particle SpawnにParticles.SpriteSizeを追加 フォグを調整したい範囲の大きさを数値入力
- 150. #UE4 | @UNREALENGINE NiagaraParticle RenderからVolume Materialアサイン
- 151.
- 152.
- 153. #UE4 | @UNREALENGINE まとめ ●水中表現に必要な要素
- 154. #UE4 | @UNREALENGINE まとめ ●水中表現に必要な要素 ● 水面の反射と屈折
- 155. #UE4 | @UNREALENGINE まとめ ●水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス
- 156. #UE4 | @UNREALENGINE まとめ ●水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰
- 157. #UE4 | @UNREALENGINE まとめ ●水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ
- 158. #UE4 | @UNREALENGINE まとめ ●水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ これらを理解して表現できれば、リアルな水中が作れる！！
- 159. #UE4 | @UNREALENGINE その他 ●背景アセット ● ライティング
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171. #UE4 | @UNREALENGINE ライティング ライトはDirectional と Sky のみ
- 172. #UE4 | @UNREALENGINE ライティング DirectionalLightの影 Cascade Shadow Area Shadow
- 173. #UE4 | @UNREALENGINE ライティング DirectionalLightの影 Cascade Shadow Area Shadow
- 174. #UE4 | @UNREALENGINE ライティング SunPosition Calculator
- 175. #UE4 | @UNREALENGINE ライティング 緯度経度、タイムゾーン 日にちと時間を入れると その場所と時間の太陽の位置を計算する SunPosition Calculator
- 176. #UE4 | @UNREALENGINE ライティング SunPosition Calculator レベルに置く
- 177. #UE4 | @UNREALENGINE ライティング GoogleMapから緯度経度を取得 緯度 経度 Sun Position Calculator
- 178. #UE4 | @UNREALENGINE ライティング SunPosition Calculator
- 179. #UE4 | @UNREALENGINE ライティング 有名なセノーテの緯度経度を取得 緯度経度 Sun Position Calculator
- 180. #UE4 | @UNREALENGINE ライティング SunPosition Calculator
- 181. #UE4 | @UNREALENGINE ライティング LightMap解像度の調整 Light Map密度調整で トライ＆エラーが続き大変だった
- 182. #UE4 | @UNREALENGINE ライティング LightMap解像度の調整 アクタ選択して・・・
- 183. #UE4 | @UNREALENGINE ライティング LightMap解像度の調整 アクタ選択して・・・ アセット開いて・・・
- 184. #UE4 | @UNREALENGINE ライティング LightMap解像度の調整 アクタ選択して・・・ アセット開いて・・・ 解像度変えて・・・
- 185. #UE4 | @UNREALENGINE ライティング LightMap解像度の調整 アクタ選択して・・・ アセット開いて・・・ 解像度変えて・・・ これをアセット数分繰り返す
- 186. #UE4 | @UNREALENGINE ライティング LightMap解像度の調整 アクタ選択して・・・ アセット開いて・・・ 解像度変えて・・・ これをアセット数分繰り返す めんどくさい・・・
- 187. #UE4 | @UNREALENGINE ライティング LightMap解像度の調整 Pythonで半自動化
- 188. #UE4 | @UNREALENGINE ライティング LightMap解像度の調整
- 189.