【Unity】シェーダを実装する時に MaterialPropertyDrawer を使用して Inspector の表示をカスタマイズする

# 備考

この投稿は自分のブログの記事の転載になります
http://baba-s.hatenablog.com/entry/2017/09/27/153000_1

# はじめに

https://docs.unity3d.com/ScriptReference/MaterialPropertyDrawer.html

シェーダを実装する時に MaterialPropertyDrawer を使用することで
Inspector の表示をカスタマイズすることができます

MaterialPropertyDrawer は自作することができますが
今回は Unity が標準で用意しているモノをいくつか紹介していきます

# Toggle

```shader
[Toggle(RED)] _Invert("Red ?" , Float) = 0
```

- float 値を 1 と 0 で切り替えるチェックボックスを表示します  
- シェーダキーワードの有効/無効を切り替えることも可能です  

```
Shader "Custom/Example"
{
    Properties
    {
        [Toggle(RED)] _Invert("Red ?" , Float) = 0
    }

    SubShader
    {
        CGINCLUDE
        #include "UnityCG.cginc"

        fixed4 frag(v2f_img i) : SV_Target
        {
            fixed4 col = fixed4(1, 1, 1, 1);
            #ifdef RED
            col.y = 0;
            col.z = 0;
            #endif
            return col;
        }
        ENDCG

        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            #pragma multi_compile _ RED
            ENDCG
        }
    }
}
```

![20170927141936.gif](https://qiita-image-store.s3.amazonaws.com/0/39164/d5aab509-f843-9e20-d13f-0c31136ad03a.gif)

# Enum

```shader
[Enum(ZERO, 0, HALF, 128, FULL, 255)] _Red("Red", Int) = 128
```

- float 値を選択できるポップアップメニューを表示します  
- 列挙型の名前を指定するか、表示名と値のペアをカンマ区切りで設定することで使用します  
- 表示名と値のペアを指定する場合、最大 7 つまで指定できます  

```
Shader "Custom/Example"
{
    Properties
    {
        [Enum(ZERO, 0, HALF, 128, FULL, 255)] _Red("Red", Int) = 128
    }

    SubShader
    {
        CGINCLUDE
        #include "UnityCG.cginc"
        fixed _Red;

        fixed4 frag(v2f_img i) : SV_Target
        {
            fixed4 col = fixed4(_Red / 255, 0, 0, 1);
            return col;
        }
        ENDCG

        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            ENDCG
        }
    }
}
```

![20170927142000.png](https://qiita-image-store.s3.amazonaws.com/0/39164/a7a1c504-1a02-46f4-e187-59abbdb5d8ec.png)

# KeywordEnum

```shader
[KeywordEnum(RED, GREEN, BLUE)] _Mode("Color Type", Float) = 0
```

- 有効化したいシェーダキーワードをポップアップメニューから選択できます  
- シェーダキーワードは大文字の「【プロパティ名】_【表示名】」で有効になります  
- シェーダキーワードは最大 9 つまで指定できます  

```
Shader "Custom/Example"
{
    Properties
    {
        [KeywordEnum(RED, GREEN, BLUE)] _Mode("Color Type", Float) = 0
    }

    SubShader
    {
        CGINCLUDE
        #include "UnityCG.cginc"

        fixed4 frag(v2f_img i) : SV_Target
        {
            fixed4 col = fixed4(1, 1, 1, 1);
            #ifdef _MODE_RED
                col = fixed4(1, 0, 0, 1);
            #elif _MODE_GREEN
                col = fixed4(0, 1, 0, 1);
            #elif _MODE_BLUE
                col = fixed4(0, 0, 1, 1);
            #endif
            return col;
        }
        ENDCG

        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            #pragma multi_compile _MODE_RED _MODE_GREEN _MODE_BLUE
            ENDCG
        }
    }
}
```

![20170927142030.png](https://qiita-image-store.s3.amazonaws.com/0/39164/e43fef88-2a9d-afa0-634e-927b04e7bcd1.png)

# PowerSlider

```shader
[PowerSlider(2.5)] _Red("Red", Range(0, 1)) = 1
```

- 非線形のカーブに従って値を設定するスライダーを表示します  

```
Shader "Custom/Example"
{
    Properties
    {
        [PowerSlider(2.5)] _Red("Red", Range(0, 1)) = 1
    }

    SubShader
    {
        CGINCLUDE
        #include "UnityCG.cginc"
        fixed _Red;

        fixed4 frag(v2f_img i) : SV_Target
        {
            fixed4 col = fixed4(_Red, 0, 0, 1);
            return col;
        }
        ENDCG

        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            ENDCG
        }
    }
}
```

![20170927142049.gif](https://qiita-image-store.s3.amazonaws.com/0/39164/0ff24868-d216-7cb8-a958-7b8e86743136.gif)

# IntRange

```shader
[IntRange] _Red("Red", Range(0, 255)) = 128
```

- 指定された範囲の値を設定できる int 型のスライダーを表示します  

```
Shader "Custom/Example"
{
    Properties
    {
        [IntRange] _Red("Red", Range(0, 255)) = 128
    }

    SubShader
    {
        CGINCLUDE
        #include "UnityCG.cginc"
        fixed _Red;

        fixed4 frag(v2f_img i) : SV_Target
        {
            fixed4 col = fixed4(_Red / 255, 0, 0, 1);
            return col;
        }
        ENDCG

        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            ENDCG
        }
    }
}
```

![20170927142115.gif](https://qiita-image-store.s3.amazonaws.com/0/39164/a59096b9-9e17-1a63-5d61-06ddb771813b.gif)

# Space

- シェーダプロパティの上部にスペースを導入します  

```shader
_Red("Red", Float) = 0
[Space] _Green("Green", Float) = 0
[Space(50)] _Blue("Blue", Float) = 0
```

![20170927142218.png](https://qiita-image-store.s3.amazonaws.com/0/39164/22f5e372-de2b-b53a-a92b-1364279d4532.png)

# Header

- シェーダプロパティの上部にヘッダーテキストを表示します  

```shader
[Header(Color 1)] 
_Red1("Red 1", Float) = 0
_Green1("Green 1", Float) = 0
_Blue1("Blue 1", Float) = 0

[Header(Color 2)] 
_Red2("Red 2", Float) = 0
_Green2("Green 2", Float) = 0
_Blue2("Blue 2", Float) = 0
```

![20170927142159.png](https://qiita-image-store.s3.amazonaws.com/0/39164/68efe4d3-8b3f-1ba8-c7e1-3a19ac4daa13.png)