講演動画はこちら https://www.youtube.com/watch?v=Wr974MCYHSU 発表者：小林浩之（Epic Games Japan） 本スライドは2019年12月15日に行われた勉強会「 UE4 Environment Art Dive」の講演資料となります。

1. UE4で学ぶ水中表現
Epic Games Japan / Technical Artist
小林 浩之

2. #UE4 | @UNREALENGINE
自己紹介
小林 浩之
普段はUDNでの解答など、
UE4のサポート業務を中心にやってます
前職はAAAタイトルのTA
Twitter / はのば@hannover_bloss

3. #UE4 | @UNREALENGINE
勉強会用に
作ってきました

4. #UE4 | @UNREALENGINE
セノーテ
鍾乳洞の天井が崩落して
できた穴に溜まった泉
ユカタン半島に点在

5. #UE4 | @UNREALENGINE
目指した絵作り
● 水上、水中両方からみても破綻しない
● リアルな水中表現

6. #UE4 | @UNREALENGINE
目指した絵作り
● 水上、水中両方からみても破綻しない
● リアルな水中表現

7. #UE4 | @UNREALENGINE
水上、水中両方からみても破綻しない
カメラが半分水没した状態を再現

8. #UE4 | @UNREALENGINE
水面のメッシュ構成
カメラと向かい合う面を作って疑似的に水没状態を再現

9. #UE4 | @UNREALENGINE
水面のメッシュ構成
メッシュA
断面用

10. #UE4 | @UNREALENGINE
水面のメッシュ構成
メッシュB
水面(表)用

11. #UE4 | @UNREALENGINE
水面のメッシュ構成
メッシュC
水面(裏)用

12. #UE4 | @UNREALENGINE
水面のメッシュ構成
メッシュD
境界用

13. #UE4 | @UNREALENGINE
水面のメッシュ構成
半透明ソート順(描画する順番)をきっちり決めたかったため
4つのメッシュ構成に

14. #UE4 | @UNREALENGINE
水マテリアル解説

15. #UE4 | @UNREALENGINE
水面マテリアル(表)

16. #UE4 | @UNREALENGINE
水面マテリアル(表)

17. #UE4 | @UNREALENGINE
水面マテリアル(表)
Screen UV歪ませる
Scene Colorと深度、フレネル

18. #UE4 | @UNREALENGINE
水面マテリアル(表)

19. #UE4 | @UNREALENGINE
水面マテリアル(表)
OpacityやRefractionは使わず、
Scene ColorをEmissiveに刺すことで半透明を表現
水面の動き(波)はHoudiniで連番テクスチャ作成
ノーマルやWorld Displacementに

20. #UE4 | @UNREALENGINE
水面の動き
HoudiniのOceanからオフセットとノーマルを連番書き出し

21. #UE4 | @UNREALENGINE
水面の動き
HoudiniのOceanからオフセットとノーマルを連番書き出し
UVはワールド座標

22. #UE4 | @UNREALENGINE
水面マテリアル(表)
Screen UV歪ませる
Scene Colorと深度、フレネル

23. #UE4 | @UNREALENGINE
水面マテリアル(表)
Screen UV歪ませる

24. #UE4 | @UNREALENGINE
水面マテリアル(表)
Screen UVにPixel Normalを足しているだけ
物理的に正しいものではないので注意

25. #UE4 | @UNREALENGINE
水面マテリアル(表)
Scene Colorと深度、フレネル

26. #UE4 | @UNREALENGINE
水面マテリアル(表)
歪めたScreen UVをScene Colorへ
深度によって色を付ける

27. #UE4 | @UNREALENGINE
水面マテリアル(裏)

28. #UE4 | @UNREALENGINE
水面マテリアル(裏)

29. #UE4 | @UNREALENGINE
水面マテリアル(裏)
Screen UV歪ませる
Scene Color
全反射表現(後ほど解説)

30. #UE4 | @UNREALENGINE
水面マテリアル(裏)
Screen UV歪ませる
Scene Color

31. #UE4 | @UNREALENGINE
水面マテリアル(裏)
全反射表現(後ほど解説)

32. #UE4 | @UNREALENGINE
断面マテリアル

33. #UE4 | @UNREALENGINE
断面マテリアル
マテリアルはシンプルに透過させているだけ
Custom Depthに描画して水面以下判定に使う

34. #UE4 | @UNREALENGINE
境界マテリアル

35. #UE4 | @UNREALENGINE
境界マテリアル

36. #UE4 | @UNREALENGINE
境界マテリアル
境界のグラデーション
Scene Color

37. #UE4 | @UNREALENGINE
境界マテリアル
境界のグラデーション

38. #UE4 | @UNREALENGINE
境界マテリアル
矩形に開いたUVからグラデーションを作る
テクスチャでもよさそう

39. #UE4 | @UNREALENGINE
境界マテリアル
矩形に開いたUVから計算
テクスチャでもよさそう

40. #UE4 | @UNREALENGINE
境界マテリアル
Scene Color

41. #UE4 | @UNREALENGINE
境界マテリアル
境界部分のグラデーションを使って、
Scene Colorを適当に歪める

42. #UE4 | @UNREALENGINE
目指した絵作り
● 水上、水中両方からみても破綻しない
● リアルな水中表現

43. #UE4 | @UNREALENGINE
目指した絵作り
● 水上、水中両方からみても破綻しない
● リアルな水中表現

44. #UE4 | @UNREALENGINE
どんな水中表現を使ったか

45. #UE4 | @UNREALENGINE
何もない状態から要素を足していきます

46. #UE4 | @UNREALENGINE
水面の反射と屈折

47. #UE4 | @UNREALENGINE
コースティクス

48. #UE4 | @UNREALENGINE
色の減衰

49. #UE4 | @UNREALENGINE
ゴッドレイ

50. #UE4 | @UNREALENGINE
Before After

51. #UE4 | @UNREALENGINE
水中の構成要素
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ

52. #UE4 | @UNREALENGINE
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ
水中の構成要素

53. #UE4 | @UNREALENGINE
水面の反射と屈折

54. #UE4 | @UNREALENGINE
水面の反射と屈折
水中だと水面が鏡のようになるのはなぜ？

55. #UE4 | @UNREALENGINE
中学物理の授業思い出してみましょう

56. #UE4 | @UNREALENGINE
入射角、反射角、屈折角について

57. #UE4 | @UNREALENGINE
簡単に図で説明します

58. #UE4 | @UNREALENGINE
空気
水

59. #UE4 | @UNREALENGINE
光
光が差し込んできたとき…

60. #UE4 | @UNREALENGINE
光が当たった地点から
面に対して垂直な線を引く
光

61. #UE4 | @UNREALENGINE
入射角
垂直線との間の角

62. #UE4 | @UNREALENGINE
反射角
一部の光が反射して
入射角の反対側に飛ぶ
角度は入射角と等しい

63. #UE4 | @UNREALENGINE
屈折角
反射しなかった光は
屈折して水の中へ
空気から水の場合
屈折角は入射角よりも
小さくなる

64. #UE4 | @UNREALENGINE
空気から水に向かって
光が向かった場合の図
空気
水

65. #UE4 | @UNREALENGINE
水中から空気へ向かった場合

66. #UE4 | @UNREALENGINE

67. #UE4 | @UNREALENGINE
入射角
垂直線との間の角

68. #UE4 | @UNREALENGINE
反射角
一部の光が反射して
入射角の反対側に飛ぶ
角度は入射角と等しい

69. #UE4 | @UNREALENGINE
屈折角
水から空気の場合
屈折角は入射角より大きくなる

70. #UE4 | @UNREALENGINE
臨界角
90°
ある入射角で屈折角が90度になる
さらに入射角を大きくすると…

71. #UE4 | @UNREALENGINE
全反射
入射角が臨界角を超えると
すべての光を反射する

72. #UE4 | @UNREALENGINE
UE4で全反射を再現

73. #UE4 | @UNREALENGINE
Planar Reflection
なるべく綺麗な反射が欲しかったのでPlanarを使用
反射が下向きなのでPlanarも180度ひっくり返す

74. #UE4 | @UNREALENGINE
Planar Reflection
反射は綺麗だけど、臨界角の境目を作っていないので向こう側が見えない

75. #UE4 | @UNREALENGINE
マテリアルで臨界角を求める

76. #UE4 | @UNREALENGINE
約48.6度
水→空気の臨界角
48.6°

77. #UE4 | @UNREALENGINE
入射角を調べる
48.6°

78. #UE4 | @UNREALENGINE
水面からの垂直線
Pixel Normalに置き換え
Pixel
Normal

79. #UE4 | @UNREALENGINE
光のベクトル
Camera Vectorに置き換え
Camera
Vector

80. #UE4 | @UNREALENGINE
2ベクトルのなす角が48.6度
以上かどうかを求める

81. #UE4 | @UNREALENGINE
水面マテリアル(裏)

82. #UE4 | @UNREALENGINE
臨界角マスク
水面マテリアル(裏)

83. #UE4 | @UNREALENGINE
水面マテリアル(裏)
内積(Dot Product)で
2ベクトルのなす角を求める

84. #UE4 | @UNREALENGINE
臨界角マスク
水面マテリアル(裏)
臨界角48.6度のマスクができる

85. #UE4 | @UNREALENGINE
水面マテリアル(裏)
Scene Colorに乗算
透けないように
臨界角マスク

86. #UE4 | @UNREALENGINE
水面マテリアル(裏)
鏡面に切り替え
臨界角マスク

87. #UE4 | @UNREALENGINE

88. #UE4 | @UNREALENGINE
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ
水中の構成要素

89. #UE4 | @UNREALENGINE
水中の構成要素
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ

90. #UE4 | @UNREALENGINE
コースティクス
反射や屈折の影響で光が収束してできる模様
川や海などの底でよく観察できる

91. #UE4 | @UNREALENGINE
どうやってこの模様ができているんでしょうか？

92. #UE4 | @UNREALENGINE
先ほどの図に戻ります

93. #UE4 | @UNREALENGINE

94. #UE4 | @UNREALENGINE
水面が波打っているとどうなるか

95. #UE4 | @UNREALENGINE
空気
水
底

96. #UE4 | @UNREALENGINE
光が水面を通って・・・

97. #UE4 | @UNREALENGINE
屈折して・・・

98. #UE4 | @UNREALENGINE
底に当たる

99. #UE4 | @UNREALENGINE
光が集中した場所は
当然明るくなる

100. #UE4 | @UNREALENGINE
明るい

101. #UE4 | @UNREALENGINE
明るい
暗い

102. #UE4 | @UNREALENGINE
明るい

103. #UE4 | @UNREALENGINE
明るい
暗い

104. #UE4 | @UNREALENGINE
どうやって表現するか

105. #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成

106. #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成
先ほどの図を3次元で

107. #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成
Ocean Simurationで適当に波を作る

108. #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成
平面グリッドを用意

109. #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成
平面にノーマル転送

110. #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成
屈折ベクトルを計算

111. #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成
屈折ベクトルへ頂点を移動

112. #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成
重なり具合を頂点カラーに転送

113. #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成
連番テクスチャとしてレンダリング

114. #UE4 | @UNREALENGINE
UE4でセットアップ

115. #UE4 | @UNREALENGINE
Light Function
マテリアルで連番テクスチャ再生
Directional Lightに適用

116. #UE4 | @UNREALENGINE
Light Function
Houdiniで作った連番テクスチャをFlip Bookノードでアニメーション

117. #UE4 | @UNREALENGINE
Light Function
Houdiniで作った連番テクスチャをFlip Bookノードでアニメーション

118. #UE4 | @UNREALENGINE
Light Function Off

119. #UE4 | @UNREALENGINE
Light Function On

120. #UE4 | @UNREALENGINE
水中の構成要素
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ

121. #UE4 | @UNREALENGINE
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ
水中の構成要素

122. #UE4 | @UNREALENGINE
水は赤い光を吸収する
光が水の中を進むほど赤い光が吸収され、結果的に青が残る
コップの水や浅瀬では吸収量が少ないため無色透明に見える

123. #UE4 | @UNREALENGINE
ポストプロセスマテリアルで再現

124. #UE4 | @UNREALENGINE
ポストプロセスマテリアル

125. #UE4 | @UNREALENGINE
ポストプロセスマテリアル
深度
Custom Depthで
水面以下かどうか判定
深度を元に
Scene Colorへ色を乗算

126. #UE4 | @UNREALENGINE
ポストプロセスマテリアル
深度

127. #UE4 | @UNREALENGINE
カメラからの距離

128. #UE4 | @UNREALENGINE
水面からの距離

129. #UE4 | @UNREALENGINE
ポストプロセスマテリアル
深度を元に
Scene Colorへ色を乗算

130. #UE4 | @UNREALENGINE
Scene Colorへ色を乗算

131. #UE4 | @UNREALENGINE
ポストプロセスマテリアル
Custom Depthで
水面以下かどうか判定

132. #UE4 | @UNREALENGINE
Custom Depthで水面以下判定
断面メッシュをCustom Depthに描画して・・・

133. #UE4 | @UNREALENGINE
Custom Depthで水面以下判定
水面以下のマスクを作る

134. #UE4 | @UNREALENGINE
Custom Depthで水面以下判定
水面以下にだけ色を付ける

135. #UE4 | @UNREALENGINE
ポストプロセスマテリアル Off

136. #UE4 | @UNREALENGINE
ポストプロセスマテリアル On

137. #UE4 | @UNREALENGINE
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ
水中の構成要素

138. #UE4 | @UNREALENGINE
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ
水中の構成要素

139. #UE4 | @UNREALENGINE
水中でのゴッドレイ
水中の浮遊物や泡、微生物などに光が当たって筋に見える

140. #UE4 | @UNREALENGINE
Volumetric Fog

141. #UE4 | @UNREALENGINE
Volumetric Fog
普通に置いただけだと全体的にフォグがかかる

142. #UE4 | @UNREALENGINE
Volumetric Fog
水上と水中でフォグの濃度を変えたい
濃い
薄い

143. #UE4 | @UNREALENGINE
Volume Material
Particleに対して適用可能
Volumetric Fogの濃度や色をMaterialから制御できる

144. #UE4 | @UNREALENGINE
Volume Material

145. #UE4 | @UNREALENGINE
Volume Material
Volume範囲と濃度

146. #UE4 | @UNREALENGINE
Volume Material
水面以下かどうか

147. #UE4 | @UNREALENGINE
Volume Material
色

148. #UE4 | @UNREALENGINE
Niagara Particle

149. #UE4 | @UNREALENGINE
Niagara Particle
Particle SpawnにParticles.SpriteSizeを追加
フォグを調整したい範囲の大きさを数値入力

150. #UE4 | @UNREALENGINE
Niagara Particle
RenderからVolume Materialアサイン

151. #UE4 | @UNREALENGINE
Volumetric Fog Off

152. #UE4 | @UNREALENGINE
Volumetric Fog On

153. #UE4 | @UNREALENGINE
まとめ
● 水中表現に必要な要素

154. #UE4 | @UNREALENGINE
まとめ
● 水中表現に必要な要素
● 水面の反射と屈折

155. #UE4 | @UNREALENGINE
まとめ
● 水中表現に必要な要素
● 水面の反射と屈折
● コースティクス

156. #UE4 | @UNREALENGINE
まとめ
● 水中表現に必要な要素
● 水面の反射と屈折
● コースティクス
● 色の減衰

157. #UE4 | @UNREALENGINE
まとめ
● 水中表現に必要な要素
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ

158. #UE4 | @UNREALENGINE
まとめ
● 水中表現に必要な要素
● 水面の反射と屈折
● コースティクス
● 色の減衰
● ゴッドレイ
これらを理解して表現できれば、リアルな水中が作れる！！

159. #UE4 | @UNREALENGINE
その他
● 背景アセット
● ライティング

160. #UE4 | @UNREALENGINE
背景アセット
Megascansライブラリ

161. #UE4 | @UNREALENGINE
背景アセット
Megascansライブラリ

162. #UE4 | @UNREALENGINE
濡れマテリアル

163. #UE4 | @UNREALENGINE
濡れマテリアル
Roughness
水面以下はそのまま
水面以上は0～徐々に元のRoughnessへ

164. #UE4 | @UNREALENGINE
濡れマテリアル

165. #UE4 | @UNREALENGINE
濡れマテリアル
水面位置を取得

166. #UE4 | @UNREALENGINE
濡れマテリアル
水面位置からのグラデーション

167. #UE4 | @UNREALENGINE
濡れマテリアル
Roughnessテクスチャに乗算

168. #UE4 | @UNREALENGINE
濡れマテリアル Off

169. #UE4 | @UNREALENGINE
濡れマテリアル On

170. #UE4 | @UNREALENGINE
Megascansを使ってよかったこと
モチーフにしたセノーテがそもそもパーツが少ない(岩や枝ばかり)ので
Megascansライブラリが非常に役立った
背景アセットの製作コストを抑えて、メインの水中表現に注力ことができた

171. #UE4 | @UNREALENGINE
ライティング
ライトは Directional と Sky のみ

172. #UE4 | @UNREALENGINE
ライティング
Directional Lightの影
Cascade Shadow Area Shadow

173. #UE4 | @UNREALENGINE
ライティング
Directional Lightの影
Cascade Shadow Area Shadow

174. #UE4 | @UNREALENGINE
ライティング
Sun Position Calculator

175. #UE4 | @UNREALENGINE
ライティング
緯度経度、タイムゾーン
日にちと時間を入れると
その場所と時間の太陽の位置を計算する
Sun Position Calculator

176. #UE4 | @UNREALENGINE
ライティング
Sun Position Calculator レベルに置く

177. #UE4 | @UNREALENGINE
ライティング
Google Mapから緯度経度を取得
緯度 経度
Sun Position Calculator

178. #UE4 | @UNREALENGINE
ライティング
Sun Position Calculator

179. #UE4 | @UNREALENGINE
ライティング
有名なセノーテの緯度経度を取得
緯度 経度
Sun Position Calculator

180. #UE4 | @UNREALENGINE
ライティング
Sun Position Calculator

181. #UE4 | @UNREALENGINE
ライティング
Light Map解像度の調整
Light Map密度調整で
トライ＆エラーが続き大変だった

182. #UE4 | @UNREALENGINE
ライティング
Light Map解像度の調整
アクタ選択して・・・

183. #UE4 | @UNREALENGINE
ライティング
Light Map解像度の調整
アクタ選択して・・・
アセット開いて・・・

184. #UE4 | @UNREALENGINE
ライティング
Light Map解像度の調整
アクタ選択して・・・
アセット開いて・・・
解像度変えて・・・

185. #UE4 | @UNREALENGINE
ライティング
Light Map解像度の調整
アクタ選択して・・・
アセット開いて・・・
解像度変えて・・・
これをアセット数分繰り返す

186. #UE4 | @UNREALENGINE
ライティング
Light Map解像度の調整
アクタ選択して・・・
アセット開いて・・・
解像度変えて・・・
これをアセット数分繰り返す
めんどくさい・・・

187. #UE4 | @UNREALENGINE
ライティング
Light Map解像度の調整
Pythonで半自動化

188. #UE4 | @UNREALENGINE
ライティング
Light Map解像度の調整

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