UE4で学ぶ水中表現【UE4 Environment Art Dive 2019】

12.8K Views

December 18, 19

スライド概要

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

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

profile-image

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

シェア

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

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

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.

Before #UE4 | @UNREALENGINE 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.

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

71.

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

72.

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

73.

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

74.

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

75.

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

76.

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

77.

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

78.

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

79.

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

80.

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

81.

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

82.

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

83.

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

84.

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

85.

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

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.

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

106.

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

107.

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

108.

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

109.

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

110.

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

111.

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

112.

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

113.

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

114.

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

115.

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

116.

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

117.

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

118.

Light Function Off #UE4 | @UNREALENGINE

119.

Light Function On #UE4 | @UNREALENGINE

120.

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

121.

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

122.

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

123.

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

124.

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

125.

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

126.

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

127.

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

128.

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

129.

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

130.

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

131.

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

132.

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

133.

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

134.

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

135.

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

136.

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

137.

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

138.

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

139.

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

140.

Volumetric Fog #UE4 | @UNREALENGINE

141.

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

142.

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

143.

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

144.

Volume Material #UE4 | @UNREALENGINE

145.

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

146.

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

147.

Volume Material 色 #UE4 | @UNREALENGINE

148.

Niagara Particle #UE4 | @UNREALENGINE

149.

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

150.

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

151.

Volumetric Fog Off #UE4 | @UNREALENGINE

152.

Volumetric Fog On #UE4 | @UNREALENGINE

153.

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

154.

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

155.

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

156.

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

157.

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

158.

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

159.

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

160.

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

161.

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

162.

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

163.

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

164.

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

165.

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

166.

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

167.

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

168.

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

169.

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

170.

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

171.

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

172.

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

173.

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

174.

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

175.

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

176.

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

177.

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

178.

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

179.

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

180.

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

181.

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

182.

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

183.

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

184.

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

185.

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

186.

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

187.

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

188.

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

189.

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