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

# 事前説明
　今回の記事はあくまでもUEのMaterialのtutorialしかないので、水効果を達成する方法は今回の例よりいい方法一杯ある。本番のゲームにはこれを使うのはお勧めできない。そして、今回の実現要素もあくまでも私の個人の意見の上に水は多変ので、特定したシーンしか使わない方がいい。
## では効果を見てみよう
![Unreal Engine_2022.07.16-23.14.mp4_20221213_233733.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/29c850fb-01b5-6225-80bf-a4b37ec373b8.gif)
　悪くはないだね。更に素晴らしいのはこれはただのテクスチャーので、パソコンの性能が食わないので、コストが低いうちにいい効果が出る。弱点特定した角度以外に不自然ということ。
## 先ず、構想を考えよう。
https://www.youtube.com/watch?v=TbViczxCFNI

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

## 事前準備
　　今回使う法線マッピングを以下の二つ。もちろん自分が持ってる水の法線マッピングでも全然👌。今回は便利のために二つの法線マッピングしか使わない。
![Water_1 - 副本.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/c41727b4-9622-e894-9e40-c393191ee5b6.png)
![Water_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/a2826ba9-43f6-ddd4-02ce-2c273b86b458.png)

上手く準備できた？
**では、始めましょう！**

M_WaterというMaterialを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/b41ae910-6f29-6113-527f-91551746b2f8.png)

これ以外に法線マッピングはちゃんとエンジンのコンテンツに導入したのも確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/924c147e-bf0a-032b-b47f-f28346d7ac10.png)

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

## 波の作成
MaterialのBlueprintは以下、MaskのターミナルはMaskComponentである。
ちょっと説明しよう。
AbsoluteWorldPositionはこのテクスチャーの一つつづのピクセルがゲーム世界内の座標を取得する。そしてMask（R、G）はこのテクスチャーのＲとＧチャンネルだけを取得する。（ここでRGしか取得しない理由はこのテクスチャーの）
Pannerは偏位のことで、これでテクスチャーは動ける。Speedのところは2Ⅾベクトルを作って（キーボードの2を押しながらマウスをクリック）動く方向が決める。Muiltiplyは積を求めるの意味で、ここで波の大きさを決まる（値が大きさほど波が小さい）。最後にRGをAppendして、法線になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/cc1202db-719a-082b-df82-e14de64252e0.png)

上の部分完成したら、同じ手順でもう二つの波を作って、但し三つ目は大波のつもりだから、Multipyの時は２Dベクトルでかける。
そして**DervizeNormalZ_Function**を使ってNormal（法線）のところに出力、（DervizeNormalZ_FunctionはXY軸からZ軸を計算するファンクションである。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/5626240e-bee2-a8d0-0172-01f362db418a.png)
完成したら、こういう感じのはず（動いている）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/663731d7-9cd7-dd86-4ade-be8a196cdbe1.png)

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

## 透明度
先ずは、MaterialのBlendModeをTranslucent（半透明）にして、TranslucencyのところでLignthingModeはSurfaceTranslucencyVolumeする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/a067e880-8c30-e40c-a79e-269805c04978.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/9cf012d0-44e3-dac5-2620-7d7de6e6f741.png)
透明度計算する原理は
物を見るとXの距離マイナスYの距離で、水の透明度計算できる
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/568febdc-936f-1675-462d-19e96619a559.png)
世界のDepthマイナスピクセルDepthで、水の深さ（自分で設定する）に割るとPower（平方して掛け下の数）して、フレネルの公式を代入して算出する。下のはこのピクセルの座標。最後にDepthFadeに掛けるとよりスムーズにできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/e28758d0-abec-a3e8-c9c9-de2e817c076f.png)
より自然のためにEmissiveColorのところでちょっと光を与えて0.05ぐらいの数を与える。
全体のBlueprintは以下の通り
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/0a149dfe-4bce-aa68-12f7-13405a8a3780.png)

今はこういう感じのはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/f4e80b56-ea9f-760b-3c37-869971f0981d.png)


## 屈折率

屈折率水の深さに関わる。そして透明度の部分には既に深さを計算したことがあったので、直接透明度の結果の後ろにLerp関数を一回計算すればいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/3435566a-4581-2249-a966-96e7c2b88fe5.png)
ここのLerpは屈折率に関わるので、好きのように調整してもいい。

上手く行ったらこれで完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/ab5ef78a-c200-3cea-4f25-268594866788.png)
もちろん色とかこれから直接Colorのところで調整できる、屈折率と同じくLerpを使ったらもっと自然。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/0de3f78e-1183-0b7d-7bc2-71bab0b944e8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/045a0122-2d56-8160-8f01-688dd04f7055.png)

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


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