UE4で学ぶ水中表現【UE4 Environment Art Dive 2019】
46.6K Views
December 18, 19
スライド概要
講演動画はこちら
https://www.youtube.com/watch?v=Wr974MCYHSU
発表者：小林浩之（Epic Games Japan）
本スライドは2019年12月15日に行われた勉強会「 UE4 Environment Art Dive」の講演資料となります。
Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/
関連スライド
各ページのテキスト
UE4で学ぶ水中表現 Epic Games Japan / Technical Artist 小林 浩之
自己紹介 小林 浩之 普段はUDNでの解答など、 UE4のサポート業務を中心にやってます 前職はAAAタイトルのTA Twitter / はのば@hannover_bloss #UE4 | @UNREALENGINE
勉強会用に 作ってきました #UE4 | @UNREALENGINE
セノーテ 鍾乳洞の天井が崩落して できた穴に溜まった泉 ユカタン半島に点在 #UE4 | @UNREALENGINE
目指した絵作り ● 水上、水中両方からみても破綻しない ● リアルな水中表現 #UE4 | @UNREALENGINE
目指した絵作り ● 水上、水中両方からみても破綻しない ● リアルな水中表現 #UE4 | @UNREALENGINE
水上、水中両方からみても破綻しない カメラが半分水没した状態を再現 #UE4 | @UNREALENGINE
水面のメッシュ構成 カメラと向かい合う面を作って疑似的に水没状態を再現 #UE4 | @UNREALENGINE
水面のメッシュ構成 メッシュA 断面用 #UE4 | @UNREALENGINE
水面のメッシュ構成 メッシュB 水面(表)用 #UE4 | @UNREALENGINE
水面のメッシュ構成 メッシュC 水面(裏)用 #UE4 | @UNREALENGINE
水面のメッシュ構成 メッシュD 境界用 #UE4 | @UNREALENGINE
水面のメッシュ構成 半透明ソート順(描画する順番)をきっちり決めたかったため 4つのメッシュ構成に #UE4 | @UNREALENGINE
水マテリアル解説 #UE4 | @UNREALENGINE
水面マテリアル(表) #UE4 | @UNREALENGINE
水面マテリアル(表) #UE4 | @UNREALENGINE
水面マテリアル(表) Screen UV歪ませる #UE4 | @UNREALENGINE Scene Colorと深度、フレネル
水面マテリアル(表) #UE4 | @UNREALENGINE
水面マテリアル(表) OpacityやRefractionは使わず、 Scene ColorをEmissiveに刺すことで半透明を表現 水面の動き(波)はHoudiniで連番テクスチャ作成 ノーマルやWorld Displacementに #UE4 | @UNREALENGINE
水面の動き HoudiniのOceanからオフセットとノーマルを連番書き出し #UE4 | @UNREALENGINE
水面の動き HoudiniのOceanからオフセットとノーマルを連番書き出し UVはワールド座標 #UE4 | @UNREALENGINE
水面マテリアル(表) Screen UV歪ませる #UE4 | @UNREALENGINE Scene Colorと深度、フレネル
水面マテリアル(表) Screen UV歪ませる #UE4 | @UNREALENGINE
水面マテリアル(表) Screen UVにPixel Normalを足しているだけ 物理的に正しいものではないので注意 #UE4 | @UNREALENGINE
水面マテリアル(表) Scene Colorと深度、フレネル #UE4 | @UNREALENGINE
水面マテリアル(表) 歪めたScreen UVをScene Colorへ 深度によって色を付ける #UE4 | @UNREALENGINE
水面マテリアル(裏) #UE4 | @UNREALENGINE
水面マテリアル(裏) #UE4 | @UNREALENGINE
水面マテリアル(裏) 全反射表現(後ほど解説) Screen UV歪ませる Scene Color #UE4 | @UNREALENGINE
水面マテリアル(裏) Screen UV歪ませる Scene Color #UE4 | @UNREALENGINE
水面マテリアル(裏) 全反射表現(後ほど解説) #UE4 | @UNREALENGINE
断面マテリアル #UE4 | @UNREALENGINE
断面マテリアル マテリアルはシンプルに透過させているだけ Custom Depthに描画して水面以下判定に使う #UE4 | @UNREALENGINE
境界マテリアル #UE4 | @UNREALENGINE
境界マテリアル #UE4 | @UNREALENGINE
境界マテリアル Scene Color 境界のグラデーション #UE4 | @UNREALENGINE
境界マテリアル 境界のグラデーション #UE4 | @UNREALENGINE
境界マテリアル 矩形に開いたUVからグラデーションを作る テクスチャでもよさそう #UE4 | @UNREALENGINE
境界マテリアル 矩形に開いたUVから計算 テクスチャでもよさそう #UE4 | @UNREALENGINE
境界マテリアル Scene Color #UE4 | @UNREALENGINE
境界マテリアル 境界部分のグラデーションを使って、 Scene Colorを適当に歪める #UE4 | @UNREALENGINE
目指した絵作り ● 水上、水中両方からみても破綻しない ● リアルな水中表現 #UE4 | @UNREALENGINE
目指した絵作り ● 水上、水中両方からみても破綻しない ● リアルな水中表現 #UE4 | @UNREALENGINE
どんな水中表現を使ったか #UE4 | @UNREALENGINE
何もない状態から要素を足していきます #UE4 | @UNREALENGINE
水面の反射と屈折 #UE4 | @UNREALENGINE
コースティクス #UE4 | @UNREALENGINE
色の減衰 #UE4 | @UNREALENGINE
ゴッドレイ #UE4 | @UNREALENGINE
Before #UE4 | @UNREALENGINE After
水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ #UE4 | @UNREALENGINE
水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ #UE4 | @UNREALENGINE
水面の反射と屈折 #UE4 | @UNREALENGINE
水面の反射と屈折 水中だと水面が鏡のようになるのはなぜ？ #UE4 | @UNREALENGINE
中学物理の授業思い出してみましょう #UE4 | @UNREALENGINE
入射角、反射角、屈折角について #UE4 | @UNREALENGINE
簡単に図で説明します #UE4 | @UNREALENGINE
空気 水 #UE4 | @UNREALENGINE
光 光が差し込んできたとき… #UE4 | @UNREALENGINE
光 光が当たった地点から 面に対して垂直な線を引く #UE4 | @UNREALENGINE
入射角 垂直線との間の角 #UE4 | @UNREALENGINE
反射角 一部の光が反射して 入射角の反対側に飛ぶ 角度は入射角と等しい #UE4 | @UNREALENGINE
屈折角 反射しなかった光は 屈折して水の中へ 空気から水の場合 屈折角は入射角よりも 小さくなる #UE4 | @UNREALENGINE
空気 空気から水に向かって 光が向かった場合の図 #UE4 | @UNREALENGINE 水
水中から空気へ向かった場合 #UE4 | @UNREALENGINE
#UE4 | @UNREALENGINE
入射角 垂直線との間の角 #UE4 | @UNREALENGINE
反射角 一部の光が反射して 入射角の反対側に飛ぶ 角度は入射角と等しい #UE4 | @UNREALENGINE
屈折角 水から空気の場合 屈折角は入射角より大きくなる #UE4 | @UNREALENGINE
90° 臨界角 ある入射角で屈折角が90度になる さらに入射角を大きくすると… #UE4 | @UNREALENGINE
全反射 入射角が臨界角を超えると すべての光を反射する #UE4 | @UNREALENGINE
UE4で全反射を再現 #UE4 | @UNREALENGINE
Planar Reflection なるべく綺麗な反射が欲しかったのでPlanarを使用 反射が下向きなのでPlanarも180度ひっくり返す #UE4 | @UNREALENGINE
Planar Reflection 反射は綺麗だけど、臨界角の境目を作っていないので向こう側が見えない #UE4 | @UNREALENGINE
マテリアルで臨界角を求める #UE4 | @UNREALENGINE
水→空気の臨界角 約48.6度 48.6° #UE4 | @UNREALENGINE
入射角を調べる 48.6° #UE4 | @UNREALENGINE
水面からの垂直線 Pixel Normalに置き換え Pixel Normal #UE4 | @UNREALENGINE
光のベクトル Camera Vectorに置き換え Camera Vector #UE4 | @UNREALENGINE
2ベクトルのなす角が48.6度 以上かどうかを求める #UE4 | @UNREALENGINE
水面マテリアル(裏) #UE4 | @UNREALENGINE
水面マテリアル(裏) 臨界角マスク #UE4 | @UNREALENGINE
水面マテリアル(裏) 内積(Dot Product)で 2ベクトルのなす角を求める #UE4 | @UNREALENGINE
水面マテリアル(裏) 臨界角マスク 臨界角48.6度のマスクができる #UE4 | @UNREALENGINE
水面マテリアル(裏) 臨界角マスク Scene Colorに乗算 透けないように #UE4 | @UNREALENGINE
水面マテリアル(裏) 臨界角マスク 鏡面に切り替え #UE4 | @UNREALENGINE
#UE4 | @UNREALENGINE
水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ #UE4 | @UNREALENGINE
水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ #UE4 | @UNREALENGINE
コースティクス 反射や屈折の影響で光が収束してできる模様 川や海などの底でよく観察できる #UE4 | @UNREALENGINE
どうやってこの模様ができているんでしょうか？ #UE4 | @UNREALENGINE
先ほどの図に戻ります #UE4 | @UNREALENGINE
#UE4 | @UNREALENGINE
水面が波打っているとどうなるか #UE4 | @UNREALENGINE
空気 水 底 #UE4 | @UNREALENGINE
光が水面を通って・・・ #UE4 | @UNREALENGINE
屈折して・・・ #UE4 | @UNREALENGINE
底に当たる #UE4 | @UNREALENGINE
光が集中した場所は 当然明るくなる #UE4 | @UNREALENGINE
明るい #UE4 | @UNREALENGINE
明るい 暗い #UE4 | @UNREALENGINE
明るい #UE4 | @UNREALENGINE
明るい 暗い #UE4 | @UNREALENGINE
どうやって表現するか #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成 #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成 先ほどの図を3次元で #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成 Ocean Simurationで適当に波を作る #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成 平面グリッドを用意 #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成 平面にノーマル転送 #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成 屈折ベクトルを計算 #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成 屈折ベクトルへ頂点を移動 #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成 重なり具合を頂点カラーに転送 #UE4 | @UNREALENGINE
Houdiniで屈折の計算＆連番テクスチャ作成 連番テクスチャとしてレンダリング #UE4 | @UNREALENGINE
UE4でセットアップ #UE4 | @UNREALENGINE
Light Function マテリアルで連番テクスチャ再生 Directional Lightに適用 #UE4 | @UNREALENGINE
Light Function Houdiniで作った連番テクスチャをFlip Bookノードでアニメーション #UE4 | @UNREALENGINE
Light Function Houdiniで作った連番テクスチャをFlip Bookノードでアニメーション #UE4 | @UNREALENGINE
Light Function Off #UE4 | @UNREALENGINE
Light Function On #UE4 | @UNREALENGINE
水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ #UE4 | @UNREALENGINE
水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ #UE4 | @UNREALENGINE
水は赤い光を吸収する 光が水の中を進むほど赤い光が吸収され、結果的に青が残る コップの水や浅瀬では吸収量が少ないため無色透明に見える #UE4 | @UNREALENGINE
ポストプロセスマテリアルで再現 #UE4 | @UNREALENGINE
ポストプロセスマテリアル #UE4 | @UNREALENGINE
ポストプロセスマテリアル 深度を元に Scene Colorへ色を乗算 深度 Custom Depthで 水面以下かどうか判定 #UE4 | @UNREALENGINE
ポストプロセスマテリアル 深度 #UE4 | @UNREALENGINE
カメラからの距離 #UE4 | @UNREALENGINE
水面からの距離 #UE4 | @UNREALENGINE
ポストプロセスマテリアル 深度を元に Scene Colorへ色を乗算 #UE4 | @UNREALENGINE
Scene Colorへ色を乗算 #UE4 | @UNREALENGINE
ポストプロセスマテリアル Custom Depthで 水面以下かどうか判定 #UE4 | @UNREALENGINE
Custom Depthで水面以下判定 断面メッシュをCustom Depthに描画して・・・ #UE4 | @UNREALENGINE
Custom Depthで水面以下判定 水面以下のマスクを作る #UE4 | @UNREALENGINE
Custom Depthで水面以下判定 水面以下にだけ色を付ける #UE4 | @UNREALENGINE
ポストプロセスマテリアル Off #UE4 | @UNREALENGINE
ポストプロセスマテリアル On #UE4 | @UNREALENGINE
水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ #UE4 | @UNREALENGINE
水中の構成要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ #UE4 | @UNREALENGINE
水中でのゴッドレイ 水中の浮遊物や泡、微生物などに光が当たって筋に見える #UE4 | @UNREALENGINE
Volumetric Fog #UE4 | @UNREALENGINE
Volumetric Fog 普通に置いただけだと全体的にフォグがかかる #UE4 | @UNREALENGINE
Volumetric Fog 水上と水中でフォグの濃度を変えたい 薄い 濃い #UE4 | @UNREALENGINE
Volume Material Particleに対して適用可能 Volumetric Fogの濃度や色をMaterialから制御できる #UE4 | @UNREALENGINE
Volume Material #UE4 | @UNREALENGINE
Volume Material Volume範囲と濃度 #UE4 | @UNREALENGINE
Volume Material 水面以下かどうか #UE4 | @UNREALENGINE
Volume Material 色 #UE4 | @UNREALENGINE
Niagara Particle #UE4 | @UNREALENGINE
Niagara Particle Particle SpawnにParticles.SpriteSizeを追加 フォグを調整したい範囲の大きさを数値入力 #UE4 | @UNREALENGINE
Niagara Particle RenderからVolume Materialアサイン #UE4 | @UNREALENGINE
Volumetric Fog Off #UE4 | @UNREALENGINE
Volumetric Fog On #UE4 | @UNREALENGINE
まとめ ● 水中表現に必要な要素 #UE4 | @UNREALENGINE
まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折 #UE4 | @UNREALENGINE
まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス #UE4 | @UNREALENGINE
まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 #UE4 | @UNREALENGINE
まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ #UE4 | @UNREALENGINE
まとめ ● 水中表現に必要な要素 ● 水面の反射と屈折 ● コースティクス ● 色の減衰 ● ゴッドレイ これらを理解して表現できれば、リアルな水中が作れる！！ #UE4 | @UNREALENGINE
その他 ● 背景アセット ● ライティング #UE4 | @UNREALENGINE
背景アセット Megascansライブラリ #UE4 | @UNREALENGINE
背景アセット Megascansライブラリ #UE4 | @UNREALENGINE
濡れマテリアル #UE4 | @UNREALENGINE
濡れマテリアル 水面以上は0～徐々に元のRoughnessへ 水面以下はそのまま #UE4 | @UNREALENGINE Roughness
濡れマテリアル #UE4 | @UNREALENGINE
濡れマテリアル 水面位置を取得 #UE4 | @UNREALENGINE
濡れマテリアル 水面位置からのグラデーション #UE4 | @UNREALENGINE
濡れマテリアル Roughnessテクスチャに乗算 #UE4 | @UNREALENGINE
濡れマテリアル Off #UE4 | @UNREALENGINE
濡れマテリアル On #UE4 | @UNREALENGINE
Megascansを使ってよかったこと モチーフにしたセノーテがそもそもパーツが少ない(岩や枝ばかり)ので Megascansライブラリが非常に役立った 背景アセットの製作コストを抑えて、メインの水中表現に注力ことができた #UE4 | @UNREALENGINE
ライティング ライトは Directional と Sky のみ #UE4 | @UNREALENGINE
ライティング Directional Lightの影 Cascade Shadow #UE4 | @UNREALENGINE Area Shadow
ライティング Directional Lightの影 Cascade Shadow #UE4 | @UNREALENGINE Area Shadow
ライティング Sun Position Calculator #UE4 | @UNREALENGINE
ライティング Sun Position Calculator 緯度経度、タイムゾーン 日にちと時間を入れると その場所と時間の太陽の位置を計算する #UE4 | @UNREALENGINE
ライティング Sun Position Calculator #UE4 | @UNREALENGINE レベルに置く
ライティング Sun Position Calculator Google Mapから緯度経度を取得 緯度 #UE4 | @UNREALENGINE 経度
ライティング Sun Position Calculator #UE4 | @UNREALENGINE
ライティング Sun Position Calculator 有名なセノーテの緯度経度を取得 緯度 #UE4 | @UNREALENGINE 経度
ライティング Sun Position Calculator #UE4 | @UNREALENGINE
ライティング Light Map解像度の調整 Light Map密度調整で トライ＆エラーが続き大変だった #UE4 | @UNREALENGINE
ライティング Light Map解像度の調整 アクタ選択して・・・ #UE4 | @UNREALENGINE
ライティング Light Map解像度の調整 アクタ選択して・・・ アセット開いて・・・ #UE4 | @UNREALENGINE
ライティング Light Map解像度の調整 アクタ選択して・・・ アセット開いて・・・ 解像度変えて・・・ #UE4 | @UNREALENGINE
ライティング Light Map解像度の調整 アクタ選択して・・・ アセット開いて・・・ 解像度変えて・・・ これをアセット数分繰り返す #UE4 | @UNREALENGINE
ライティング Light Map解像度の調整 アクタ選択して・・・ アセット開いて・・・ 解像度変えて・・・ めんどくさい・・・ これをアセット数分繰り返す #UE4 | @UNREALENGINE
ライティング Light Map解像度の調整 Pythonで半自動化 #UE4 | @UNREALENGINE
ライティング Light Map解像度の調整 #UE4 | @UNREALENGINE
ご清聴ありがとうございました #UE4 | @UNREALENGINE