[Unity]砂のように消えるShaderをつくる

この記事は[近畿大学 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/kindai) 19日目の記事です。
#はじめに
Shaderを勉強し始めてから早一週間, そろそろ何か作ってみなければと思い, Unityで砂のように消えるShaderを作りました.
#Shaderとは
簡単に言うと,「描画方法に関するプログラム」です.　Unityでは, デフォルトで一般的な描画処理をするShaderが用意されているのでUnity触ったことあるけど, Shader知らないという人もいると思います.
#ShaderLab言語の簡単な説明
ShaderLab言語はUnityでShaderを記述する言語です.
Unityを起動して, Project->Create->Shader->Standard Surface Shaderで新規のShaderを作成します. 以下が作成した直後のコードです.

```

Shader "Custom/NewSurfaceShader"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _Glossiness ("Smoothness", Range(0,1)) = 0.5
        _Metallic ("Metallic", Range(0,1)) = 0.0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
        };

        half _Glossiness;
        half _Metallic;
        fixed4 _Color;

        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;
            // Metallic and smoothness come from slider variables
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}
``` 
簡単に解説すると,

- Properties
    - Inspectorウィンドウでパラメータの値を変更できるようにする.
    - `変数名("表示名",データ形式)= 初期値` で記述する(データ形式と変数の型は必ずしも一致しない).
- Tags
    - レンダリングするタイミングや方法を指定する.
- CGPROGRAM-ENDCG
    - この中で具体的な処理を書きます.
- #pragma
    - システム固有機能の使用.
- Input構造体
    - ここで宣言した変数をsurface関数で使用できます.
    - 詳しくは[公式マニュアル](https://docs.unity3d.com/ja/current/Manual/SL-SurfaceShaders.html)参照.
- surface関数
    - 具体的な描画処理を記述する.
    - 今回はo.Alpha(透明度)を操作することで砂のように消える機能を実装する.
    - Alphaが小さいほど透明になり, 0から1の値をとる.

#準備
透明なシェーダを作るために以下のようにコードを書き換える.

```
Shader "Custom/NewSurfaceShader"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
    }
    SubShader
    {
        Tags { "Queue"="Transparent" }
        LOD 200

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

        struct Input
        {
        };

        fixed4 _Color;

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            o.Albedo = _Color;
            o.Alpha = 1.0;
        }
        ENDCG
    }
    FallBack "Diffuse"
}
```

奥を先に描画させるために描画順を遅くし, 半透明に描画するためにalpha:fadeの追加し, 今回使わないパラメータを削除した.

#実装
Alphaをランダムに0から1の値をとるようにして, 粒の表現を実装する.
乱数生成用にInput構造体に`float3 worldPos;`を追加した. Adjustを変化させることでAlphaを調節することができる.

```
...
Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _Adjust ("Adjust", Range(-1,1))=0
    }
    SubShader
    {
        ...    
        float _Adjust;
        fixed4 _Color;

        float rand(float3 co)
        {
            return frac(sin(dot(co.xyz, float3(12.9898, 78.233, 56.787))) * 43758.5453);
        }

        struct Input
        {
            float3 worldPos;
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            o.Albedo = _Color;
            o.Alpha = clamp(rand(IN.worldPos)-_Adjust,0,1);
        }
...
```
実行してみると、
![sand.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399478/3e6710e7-e0d6-eacf-c947-4aec9f4bcbcc.gif)
これだけだとすこし物足りないので,x軸とy軸の大きいほうからグラデーションのように消えていく機能と輪郭をぼやかす機能を増やして最終的なコードは以下のようにしました.
それぞれの機能のバランスをWeight1,2で調節できます.

```
...
Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _Adjust ("Adjust", Range(-1,1))=0
        _Weight1("Weight1",Range(0,1)) = 0.5
        _Weight2("Weight2",Range(0,1)) = 0.5
    }
    SubShader
    {
        ... 
        float _Adjust;
        fixed4 _Color;
        float _Weight1;
        float _Weight2;

        float rand(float3 co)
        {
            return frac(sin(dot(co.xyz, float3(12.9898, 78.233, 56.787))) * 43758.5453);
        }

        struct Input
        {
            float3 worldPos;
            float3 worldNormal;
            float3 viewDir;
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            o.Albedo = _Color;
            float3 localPos = IN.worldPos - mul(unity_ObjectToWorld, float4(0,0,0,1)).xyz;
　　　　　　 //xyはxとyの和が大きいほど1に近づく
            float xy = 1/(1+exp((localPos.x+localPos.y)));
            //borderは視線ベクトルと法線ベクトルの内積の絶対値で, 垂直に交わる場合は0、平行に交わる場合には1になる.
            float border =  (abs(dot(IN.viewDir, IN.worldNormal)));
            o.Alpha = clamp(border*_Weight2+(1-_Weight2)*((xy*_Weight1+rand(localPos)*(1-_Weight1)))-_Adjust,0,1);
        }
...
```

#結果
![end.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399478/5f5c949a-0fad-1ea3-1e83-332ec88eb62b.gif)


#参考
- [Unityシェーダープログラミングの教科書 ShaderLab言語解説編](https://booth.pm/ja/items/660001)
- [【Unityシェーダ入門】透明なシェーダを作る](http://nn-hokuson.hatenablog.com/entry/2016/10/05/201022)
- [【Unityシェーダ入門】リムライティングのシェーダを作る](http://nn-hokuson.hatenablog.com/entry/2016/10/11/191324)
- [[Unity]シェーダー用の小回りが利く3次元ノイズ関数](http://wordpress.notargs.com/blog/blog/2016/07/12/unity%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC%E7%94%A8%E3%81%AE%E5%B0%8F%E5%9B%9E%E3%82%8A%E3%81%AE%E5%8A%B9%E3%81%8F3%E6%AC%A1%E5%85%83%E3%83%8E%E3%82%A4%E3%82%BA%E9%96%A2%E6%95%B0/)