【Unity Shader】自定义材质面板的小技巧

写在前面

之前遇到过一些朋友问怎么在材质面板里定义类似于bool这种变量，控制一些代码的执行。我们当然可以写一个C#文件来自定义材质面板，就像Unity为Standard Shader写材质面板一样（你可以在built-in shader包里找到这些文件），但这样有时候太麻烦了。实际上，有一种更简单的方法，不需要写额外的C#文件就可以直接在shader里定义类似bool、enum这种简单的变量，Unity为这些变量提供了内置的材质面板。而这就是通过MaterialPropertyDrawer（当然我们也可以重写内置的MaterialPropertyDrawer，但太麻烦我就不写了）。

示例

总体来说，MaterialPropertyDrawers内置了4种最常见的面板：ToggleDrawer，EnumDrawer，KeywordEnumDrawer，PowerSliderDrawer。

类别描述ToggleDrawer把一个类型为float的属性显示为一个开关，它的值要么是0要么是1。当选中它时，Unity还会设置一个名为大写属性名_ON（可以自定义名字）的shader feature（需要在shader里使用”#pragma shader_feature”来定义它），我们可以在shader里用过#if、#ifdef或者#if defined关键词来判断它当前是否被开启。EnumDrawer把一个类型为float的属性显示为一个下拉列表。可以使用UnityEngine.Rendering命名空间下的各种状态来设置对应的渲染状态，例如ZWrite、ZTest、Blend等。据实验推测，这个值不可以随便定义，老老实实用UnityEngine.Rendering。KeywordEnum和EnumDrawer类似，也会把一个类型为float的属性显示为一个下拉列表，但不同的是它会定义一组shader keyword（需要在shader里使用”#pragma multi_compile”来定义它们）。这些keyword的名字是大写属性名_枚举名。同样，我们可以在shader里用过#if、#ifdef或者#if defined配合#elif来判断当前选择是哪个keyword。最多同时支持9个keywords。PowerSliderDrawer显示一个非线性响应的滑动条，其中PowerSliderDrawer中的参数指定了底数，然后我们再根据Range()来指定范围。其实简单说来就是滑动条上的数值不再是均匀变化了，而是xslider进行变化，但我们在shader里还是可以直接访问到一个float数值。

下面的代码没有任何实际意义，只是为了演示四种面板：

<code class="language-C++ hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Shader <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Custom/Material Property Drawer Example"</span>{    Properties    {        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Header creates a header text before the shader property.</span>        [Header(Material Property Drawer Example)]        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Space creates vertical space before the shader property.</span>        [Space]        _MainTex (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Main Tex"</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>D) = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"white"</span> {}        _SecondTex (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Second Tex"</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>D) = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"white"</span> {}        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Large amount of space</span>        [Space(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>)]        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Toggle displays a **float** as a toggle. </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// The property value will be 0 or 1, depending on the toggle state. </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// When it is on, a shader keyword with the uppercase property name +"_ON" will be set, </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// or an explicitly specified shader keyword.</span>        [Toggle] _Invert (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Invert color?"</span>, Float) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Will set "ENABLE_FANCY" shader keyword when set</span>        [Toggle(ENABLE_FANCY)] _Fancy (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Fancy?"</span>, Float) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Enum displays a popup menu for a **float** property. </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// You can supply either an enum type name </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// (preferably fully qualified with namespaces, in case there are multiple types), </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// or explicit name/value pairs to display. </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Up to **7** name/value pairs can be specified</span>        [Enum(UnityEngine.Rendering.BlendMode)] _SrcBlend (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Src Blend Mode"</span>, Float) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>        [Enum(UnityEngine.Rendering.BlendMode)] _DstBlend (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Dst Blend Mode"</span>, Float) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>        [Enum(Off, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, On, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>)] _ZWrite (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ZWrite"</span>, Float) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>        [Enum(UnityEngine.Rendering.CompareFunction)] _ZTest (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ZTest"</span>, Float) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>        [Enum(UnityEngine.Rendering.CullMode)] _Cull (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Cull Mode"</span>, Float) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// KeywordEnum displays a popup menu for a **float** property, and enables corresponding shader keyword. </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// This is used with "#pragma multi_compile" in shaders, to enable or disable parts of shader code. </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Each name will enable "property name" + underscore + "enum name", uppercased, shader keyword. </span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Up to **9** names can be provided.</span>        [KeywordEnum(None, Add, Multiply)] _Overlay (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Overlay mode"</span>, Float) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// PowerSlider displays a slider with a non-linear response for a Range shader property.</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// A slider with 3.0 response curve</span>        [PowerSlider(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.0</span>)] _Shininess (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Shininess"</span>, Range (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.01</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>)) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.08</span>    }    SubShader    {        Tags { <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Queue"</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Transparent"</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"RenderType"</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Transparent"</span> }        Blend [_SrcBlend] [_DstBlend]        ZWrite [_ZWrite]        ZTest [_ZTest]        Cull [_Cull]        Pass        {            CGPROGRAM            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Need to define _INVERT_ON shader keyword</span>            <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> shader_feature _INVERT_ON</span>            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Need to define _INVERT_ON shader keyword</span>            <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> shader_feature ENABLE_FANCY</span>            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// No comma between features</span>            <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> multi_compile _OVERLAY_NONE _OVERLAY_ADD _OVERLAY_MULTIPLY</span>            <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> vertex vert</span>            <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> fragment frag</span>            <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#include "UnityCG.cginc"</span>            sampler2D _MainTex;            float4 _MainTex_ST;            sampler2D _SecondTex;            float4 _SecondTex_ST;            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> _Shininess;            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> appdata            {                float4 vertex : POSITION;                float2 uv : TEXCOORD0;            };            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> v2f            {                float4 uv : TEXCOORD0;                float4 vertex : SV_POSITION;            };            v2f vert (appdata v)            {                v2f o;                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);                o.uv.xy = TRANSFORM_TEX(v.uv, _MainTex);                o.uv.zw = TRANSFORM_TEX(v.uv, _SecondTex);                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> o;            }            fixed4 frag (v2f i) : SV_Target            {                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// sample the texture</span>                fixed4 col = tex2D(_MainTex, i.uv.xy);                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Use #if, #ifdef or #if defined</span>                <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">if</span> _INVERT_ON</span>                col = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> - col;                <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">endif</span></span>                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Use #if, #ifdef or #if defined</span>                <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">if</span> ENABLE_FANCY</span>                col.r = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>;                <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">endif</span></span>                fixed4 secCol = tex2D(_SecondTex, i.uv.zw);                <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">if</span> _OVERLAY_ADD</span>                col += secCol;                <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">elif</span> _OVERLAY_MULTIPLY</span>                col *= secCol;                <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">endif</span></span>                col *= _Shininess;                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> col;            }            ENDCG        }    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li></ul>

得到的面板是这样的：

上面的代码基本显示了所有可能的例子。有一点需要注意的是使用#pragma multi_compile声明多个keyword时，每个keyword之间是没有逗号的，而官网里的有逗号，这是不对的。

除了上面的四种内置属性面板外，还有一些装饰性的内置drawer，例如Space和Header。在上面的例子里，我们在它们的后面直接写属性，像下面这样：

<code class="language-C++ hljs mathematica has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">[<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Space</span>] _Prop1 (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Prop1"</span>, Float) = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

装饰性drawer的后面有没有紧跟属性都是可以的。

shader feature和shader keyword

从上面的内容，我们知道可以使用#pragma shader_feature和#pragma multi_compile来实现“只写一份代码但实现不同功能”的目的。但世界上没有免费的午餐，Unity实际上只是在背后生成了很多份有少许不同的shader变种（shader variants），每个变种包含了不同的keyword而已，没什么非常神奇的地方。

当我们在代码里写到：

<code class="language-C++ hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> multi_compile _OVERLAY_NONE _OVERLAY_ADD _OVERLAY_MULTIPLY</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

Unity就生成了3个shader变种，每个对应开启其中的一个keyword。

如果我们再添加新的定义：

<code class="language-C++ hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> shader_feature ENABLE_FANCY</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

Unity会再分别为是否开启ENABLE_FANCY来生成两种变种，也就是一共生成了3*2=6个shader变种。因此，当我们定义了大量的feature或者keyword的时候，就会出现有大量的变种！（而且Unity允许的keyword数目也是有限制的。）

那么#pragma shader_feature和#pragma multi_compile有什么区别呢？实际上，#pragma shader_feature是#pragma multi_compile的子集，#pragma shader_feature生成的变种一个是不包含任何keyword的，一个是包含某个keyword的。我们可以使用#pragma multi_compile来实现同样的目的，只需要使用一个全是下划线的名字来表示不使用任何keyword即可。下面的两句话是等价的：

<code class="language-C++ hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> shader_feature ENABLE_FANCY</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> multi_compile __ ENABLE_FANCY</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

如果有些keyword我们实际上并没有使用到，Unity也不会为这些生成shader变种，我们可以在shader的代入面板里看到到底实际生成了多少个变种：

实际上，Unity的surface shader能够有那样强大的功能也是依靠了这样的机制。也包括我们在通过使用#pragma multi_compile_fwdbase或multi_compile_fwdadd这样的代码时，我们之所以需要使用这样的语句就是因为Unity为forward pass等内置了一些shader keyword，而我们通过这些语句来让unity为不同的光照pass生成不同的shader变种，否则的话我们的shader就一种类型，只能包含特定的任务，无法为多类型的光源等进行不同的服务。

当然，我们可以独立使用#pragma shader_feature和#pragma multi_compile，而不必一定要和MaterialPropertyDrawer配合使用。我们可以直接在代码里通过Material.EnableKeyword和Material.DisableKeyword来局部开启某些keyword，也可以通过Shader.EnableKeyword和Shader.DisableKeyword来全局开启。

参考链接：http://docs.unity3d.com/Manual/SL-MultipleProgramVariants.html