LoginSignup
1
1

More than 1 year has passed since last update.

入門してから水面のMaterialを作ってみよう。

Last updated at Posted at 2022-12-18

事前説明

 今回の記事はあくまでもUEのMaterialのtutorialしかないので、水効果を達成する方法は今回の例よりいい方法一杯ある。本番のゲームにはこれを使うのはお勧めできない。そして、今回の実現要素もあくまでも私の個人の意見の上に水は多変ので、特定したシーンしか使わない方がいい。

では効果を見てみよう

Unreal Engine_2022.07.16-23.14.mp4_20221213_233733.gif
 悪くはないだね。更に素晴らしいのはこれはただのテクスチャーので、パソコンの性能が食わないので、コストが低いうちにいい効果が出る。弱点特定した角度以外に不自然ということ。

先ず、構想を考えよう。

この動画を観察したら、水面の要素は以下の通りと思う。
1.透明
2.屈折率は時間と場所によって変わってる。
3.波は一つだけじゃなくて、多数の波を混み合っている。
4.流れてる。
つまり実現するために、透明なMaterialを作成して、そして複数の波を各自のスビートと角度で動く同時に、屈折率を変われば完成できるだね。

事前準備

  今回使う法線マッピングを以下の二つ。もちろん自分が持ってる水の法線マッピングでも全然👌。今回は便利のために二つの法線マッピングしか使わない。
Water_1 - 副本.png
Water_2.png

上手く準備できた?
では、始めましょう!

M_WaterというMaterialを作成する

image.png

これ以外に法線マッピングはちゃんとエンジンのコンテンツに導入したのも確認する。
image.png

これで事前準備終わりました。

波の作成

MaterialのBlueprintは以下、MaskのターミナルはMaskComponentである。
ちょっと説明しよう。
AbsoluteWorldPositionはこのテクスチャーの一つつづのピクセルがゲーム世界内の座標を取得する。そしてMask(R、G)はこのテクスチャーのRとGチャンネルだけを取得する。(ここでRGしか取得しない理由はこのテクスチャーの)
Pannerは偏位のことで、これでテクスチャーは動ける。Speedのところは2Ⅾベクトルを作って(キーボードの2を押しながらマウスをクリック)動く方向が決める。Muiltiplyは積を求めるの意味で、ここで波の大きさを決まる(値が大きさほど波が小さい)。最後にRGをAppendして、法線になる。
image.png

上の部分完成したら、同じ手順でもう二つの波を作って、但し三つ目は大波のつもりだから、Multipyの時は2Dベクトルでかける。
そしてDervizeNormalZ_Functionを使ってNormal(法線)のところに出力、(DervizeNormalZ_FunctionはXY軸からZ軸を計算するファンクションである。)
image.png
完成したら、こういう感じのはず(動いている)。
image.png

これで波の部分は完成!👏

透明度

先ずは、MaterialのBlendModeをTranslucent(半透明)にして、TranslucencyのところでLignthingModeはSurfaceTranslucencyVolumeする。
image.png
image.png
透明度計算する原理は
物を見るとXの距離マイナスYの距離で、水の透明度計算できる
image.png
世界のDepthマイナスピクセルDepthで、水の深さ(自分で設定する)に割るとPower(平方して掛け下の数)して、フレネルの公式を代入して算出する。下のはこのピクセルの座標。最後にDepthFadeに掛けるとよりスムーズにできる。
image.png
より自然のためにEmissiveColorのところでちょっと光を与えて0.05ぐらいの数を与える。
全体のBlueprintは以下の通り
image.png

今はこういう感じのはずです。
image.png

屈折率

屈折率水の深さに関わる。そして透明度の部分には既に深さを計算したことがあったので、直接透明度の結果の後ろにLerp関数を一回計算すればいい。
image.png
ここのLerpは屈折率に関わるので、好きのように調整してもいい。

上手く行ったらこれで完成です。
image.png
もちろん色とかこれから直接Colorのところで調整できる、屈折率と同じくLerpを使ったらもっと自然。

image.png

image.png

色々遊んで見てください!
説明が足りない、もしくは間違いを見つけたら私にDMしてください。
Twitter:DrunkSouzan

参考資料

中国語だが、私が書いたより詳しく説明したビデオである。
https://www.bilibili.com/video/BV1aS4y1N7X6/?spm_id_from=333.788&vd_source=3be72e334fa7564264589d38fe47829d

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1