【Unity】水面をゆらゆらしてみた（Shader）

環境メモ
⭐️Mac Book Pro（Mac OS Catalina）
⭐️Unity 2019.４.２２f1
⭐️Blender2.92
⭐️CLIP STUDIO PAINT　PRO

↓完成内容
Unityで、水面のテクスチャを少し透明に設定。
↓こんな感じで出来た。
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5b856979-86c3-2881-efe0-4359555711ff.gif)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🏝️Unity🏝️<br>Blenderで🌊水面🌊の3Dモデルを作って、Unityに取り込んで✨シェダー✨で水面を🐳ゆらゆら🌟してみたよぉ💕<br>いい感じに、揺れて🏝️気持ちいい〜😍<a href="https://t.co/R24mTIP6sJ">https://t.co/R24mTIP6sJ</a><a href="https://twitter.com/hashtag/unity?src=hash&amp;ref_src=twsrc%5Etfw">#unity</a> <a href="https://twitter.com/hashtag/Blender?src=hash&amp;ref_src=twsrc%5Etfw">#Blender</a> <a href="https://twitter.com/hashtag/clipstudio?src=hash&amp;ref_src=twsrc%5Etfw">#clipstudio</a> <a href="https://t.co/vQAfQiIyUM">pic.twitter.com/vQAfQiIyUM</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1405219364907847686?ref_src=twsrc%5Etfw">June 16, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
## 水面のテクスチャを作成する
CLIP STUDIO PAINTで水面をデジタルイラストで描きました。
![スクリーンショット 2021-06-17 1.00.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6d08830a-dfa3-10d2-b457-5202a8880367.png)

水面テクスチャをjpg形式でエクスポートしました。
![スクリーンショット 2021-06-17 1.31.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/20134b39-102b-58c8-a287-af88a079cf1e.png)

## 水面の３DモデルをBlenderで作成する
1.Blenderで、水面となる「Plane」（床）を作成する。
2.編集モードにして右クリックで細分化を選択する。
3.「10」ぐらいにして、細分化する。
![スクリーンショット 2021-06-17 1.35.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b3dc598a-11b1-5181-bc14-859da2c1675a.png)
4.UV展開して、水面テクスチャを貼る。
5.FBX形式にエクスポートする。
![スクリーンショット 2021-06-17 1.41.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9f8904f2-8555-9641-382c-3b36c0cd6b3b.png)
メッシュは必ず選んで、エクスポートすること。
![スクリーンショット 2021-06-17 1.42.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c72ef0c5-ee99-2104-68ca-bc240f32af2c.png)

## Unityで水面を揺らしてみる
1.水面の３Dモデル（FBX）を取り込む
2.水面のテクスチャを取り込む
3.水面のマテリアルを作成する。「Create」-「Material」で作成する。
4.水面のゆらゆらのシェダーを作成する。「Create」-「Shader」-「Unlit　Shader」
５.水面のマテリアルに、シェダーを配置する。Drag＆Dropで重ねると反映される。
![スクリーンショット 2021-06-17 1.54.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/fd37355f-9ae9-3a58-1598-0cc11839360d.png)

## シェダーの作成
「Create」-「Shader」-「Unlit　Shader」で作成しました。
1.水面の揺れのスピードを設定。
2.水面の揺れの周期を設定。
3.水面の揺れの振り幅を設定。
4.水面のテクスチャを少し透明に設定。

```Shader:TrySea02Shader

Shader "Unlit/TrySea02Shader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Speed("Speed ",Range(0, 100)) = 2
        _SwingCycle ("SwingCycle", Range(0.0,30.0) ) = 9.0 // 揺れの周期
        _Amplitude ("Amplitude", Range(0,1.0) ) = 0.07 // 振り幅        
    }
    SubShader {
        //　水面を少し透明に設定する
        Tags { "RenderType"="Transparent"  "Queue" = "Transparent"}
        Blend SrcAlpha OneMinusSrcAlpha
        LOD 200

        CGPROGRAM
        #pragma surface surf Lambert vertex:vert alpha
        #pragma target 3.0

        sampler2D _MainTex;
        float _Speed;
        float _SwingCycle;
        float _Amplitude;
        fixed4 _Color;
        
        struct Input {
            float2 uv_MainTex;
        };

        void vert(inout appdata_full v) {
            // スピードを設定する
            float time     = _Time.y * _Speed;
            // 揺れ幅を設定
            float offsetY  = sin(time + v.vertex.x * _SwingCycle) + sin(time + v.vertex.z * _SwingCycle);
            offsetY         *= _Amplitude;
            v.vertex.y      += offsetY;   
        }

        void surf(Input IN, inout SurfaceOutput o) {            
            fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
            o.Albedo = c.rgb;
            // 水面の透明度を0.7に設定する
            c.a = 0.7f;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

```