LoginSignup
6
1

More than 5 years have passed since last update.

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

Posted at

備考

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

はじめに

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

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

Toggle

[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

Enum

[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

KeywordEnum

[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

PowerSlider

[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

IntRange

[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

Space

  • シェーダプロパティの上部にスペースを導入します
_Red("Red", Float) = 0
[Space] _Green("Green", Float) = 0
[Space(50)] _Blue("Blue", Float) = 0

20170927142218.png

Header

  • シェーダプロパティの上部にヘッダーテキストを表示します
[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

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1