【Unity】入門 SurfaceShader(サーフェスシェーダ)をやってみる

環境メモ
開発環境　MacBookPro
⭐️Mac OS Mojave バージョン10.14
⭐️Unity 2019.2.21f1

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🌸Unity🌸<br>初めて🌸SurfaceShader(サーフェスシェーダ)🌸をやってみたよぉ💕💕めーぷるさん(<a href="https://twitter.com/MapleSyrupCS6?ref_src=twsrc%5Etfw">@MapleSyrupCS6</a> )のLT資料動画を見て、Unityでこんな事が出来るんだ🤩って知ったよぉ😍<br><br>🌸手順書<a href="https://t.co/aD1aTtM6OV">https://t.co/aD1aTtM6OV</a><br><br>🍭めーぷるさんのLT資料動画<a href="https://t.co/1z2uzAcRAQ">https://t.co/1z2uzAcRAQ</a> <a href="https://t.co/6vAFu0dNci">pic.twitter.com/6vAFu0dNci</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1287391299218243585?ref_src=twsrc%5Etfw">July 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# シェダーを作ってマテリアルにアタッチする
Assetsの場所で「Create」-「Shader」-「Standard Surface Shader」を選択する
<img width="734" alt="スクリーンショット 2020-07-26 20.44.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7d2564f4-cb10-a866-7272-fabfd77ada41.png">

シェダーファイルができる
<img width="90" alt="スクリーンショット 2020-07-26 21.04.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ff1122c6-7a70-6d38-9770-15a1bb14effc.png">

新規マテリアルを作る
Assetsの場所で「Create」-「Material」を選択する
<img width="491" alt="スクリーンショット 2020-07-26 21.06.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/67831881-8077-9ee9-743e-1caabc3c729d.png">

# マテリアルにシェダーを設定する
マテリアルのShaderで「Custom」から、先ほど作成したシェダーを選択する
<img width="373" alt="スクリーンショット 2020-07-26 21.01.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b4ca94d8-9a59-14fb-bc3d-47a058e38f40.png">

<img width="537" alt="スクリーンショット 2020-07-26 21.01.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/19743059-4928-0058-6a13-b215577e1255.png">


# 透明シェダー
プロパティから色を選択すると、オブジェクトに透明色が反映
↓↓完成図
<img width="1149" alt="スクリーンショット 2020-07-26 20.59.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/14ef3812-6987-a127-7a38-2fcaa274ebd1.png">


```cs:Sample01.shader

Shader "Custom/Sample01"
{
    Properties{
        _BaseColor ("Base Color", Color) = (1.0,1.0,1.0,1.0)
    }
    
    SubShader
    {
        Tags { "Queue"="Transparent" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard alpha:fade
        #pragma target 3.0
        

        struct Input
        {
            float2 uv_MainTex;
        };
        
        fixed4 _BaseColor;
        
        void surf (Input IN, inout SurfaceOutputStandard o)
        {
          // プロパティから選択された色を設定
          o.Albedo = _BaseColor.rgb;
          // 透明度
          o.Alpha = 0.8;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

```


# 画像テクスチャ
選択された画像テクスチャをモデルに反映
↓↓完成図
<img width="1154" alt="スクリーンショット 2020-07-26 21.38.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7a330908-c09f-a1d3-34f1-8a121a06979a.png">


```cs:Sample01.shader

Shader "Custom/Sample02"
{
    Properties{
        _MainTex("Texture", 2D) = "white"{}
    }
    
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard fullforwardshadows
        #pragma target 3.0
        
        struct Input
        {
            float2 uv_MainTex;
        };
        
        sampler2D _MainTex;
        
        void surf (Input IN, inout SurfaceOutputStandard o)
        {
          o.Albedo =tex2D(_MainTex, IN.uv_MainTex);
        }
        ENDCG
    }
    FallBack "Diffuse"
}

```

# 画像テクスチャをスライド移動させる
↓↓X軸を動かした内容
![x.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/06e092cf-004b-e42e-701d-bc654d371a90.gif)


```cs:Sample03.shader

Shader "Custom/Sample03"
{
    Properties{
        _MainTex("Texture", 2D) = "white"{}
    }
    
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard fullforwardshadows
        #pragma target 3.0
        
        struct Input
        {
            float2 uv_MainTex;
        };
        
        sampler2D _MainTex;
        
        void surf (Input IN, inout SurfaceOutputStandard o)
        {
          fixed2 uv = IN.uv_MainTex;
          uv.x += 10 * _Time;
          o.Albedo =tex2D(_MainTex, uv);
        }
        ENDCG
    }
    FallBack "Diffuse"
}

```

↓↓Y軸を動かした内容
![y.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/aede0145-d5b5-6e5f-8ca8-68d7fdf0d526.gif)

```cs:Sample04.shader

Shader "Custom/Sample04"
{
    Properties{
        _MainTex("Texture", 2D) = "white"{}
    }
    
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard fullforwardshadows
        #pragma target 3.0
        
        struct Input
        {
            float2 uv_MainTex;
        };
        
        sampler2D _MainTex;
        
        void surf (Input IN, inout SurfaceOutputStandard o)
        {
          fixed2 uv = IN.uv_MainTex;
          uv.y += 10 * _Time;
          o.Albedo =tex2D(_MainTex, uv);
        }
        ENDCG
    }
    FallBack "Diffuse"
}

```