Unity 为队伍设置不同颜色的shader

在魔兽争霸等一些游戏中，我们通过模型的颜色就能很轻松的区分队伍，如下：

 

实现的方法有很多，比如：

1，为不同队伍各出一张不同颜色的贴图（Hmmm，war3有的地图可以容纳12只队伍，美术大大们会很[bu4] 感[da3] 谢[si3]你的）

2，额外用一张灰度图标记要变色的区域，通过程序来操作这一块区域变色（much better）

3，不需要任何额外的贴图，通过分析原图，直接改变需要变色的区域的颜色。

 

我们的目的是要实现第3种方法。

 

环境：Win 10，Unity 5.4.3f1

模型：https://www.assetstore.unity3d.com/en/#!/content/4696  

下图是萌萌哒的Kyle Robot，左图(红色)是原型，右图（绿色）是我们要达成的目标：

 

不完美的尝试1：

我的第一反应是提取与红色相近的颜色，然后变到绿色就可以了，代码如下：

Shader "Custom/TeamMaskRgb" {
       Properties {
              _MainTex ("Base (RGB)", 2D) = "white" {}
              _From("From Color",Color) = (1,1,1,1)
              _To("To Color",Color) = (1,1,1,1)
              _RgbRange("Rgb Range",Range(0,1))=0.1
       }
       SubShader {
              Tags { "RenderType"="Opaque" }
              LOD 150

       CGPROGRAM
       #pragma surface surf Lambert noforwardadd

       sampler2D _MainTex;
       fixed4 _From;
       fixed4 _To;
       fixed _RgbRange;

       struct Input {
              float2 uv_MainTex;
       } ;

       void surf (Input IN, inout SurfaceOutput o) {
              fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
              // 老师傅们都说不要用if，所以就改成step了！
              fixed con = step(abs(_From.r-c.r),_RgbRange);
              con = con + step(abs(_From.g-c.g),_RgbRange);
              con = con + step(abs(_From.b-c.b),_RgbRange);
              con = step(3,con);

              o.Albedo = lerp(c.rgb,c.rgb+_To-_From,con);
              o.Alpha = c.a;
       }
       ENDCG
       }

       Fallback "Mobile/VertexLit"
}

但是，结果与我的设想却不大一样，小Kyle变成了：

这很怪异，Kyle身上的红色并不纯，而我们取色却只能取一种，虽然我们给了一个允许的范围，但RGB色彩模式的本质决定了我们取不到我们想要的所有红色，

还会取到一些我们不想要的颜色。因为：

Kyle肩膀处的红色是接近RGB(255,106,89)，我们以此颜色作为要改变的基色调。

Kyle膝盖处的红色是接近RGB(135,44,36)，虽然数值上与肩膀处的红色相差很大，但明显是红色的，这也是我们想要改变的部位。

Kyle两眼中间的灰色接近RGB(171,171,173)

我们取_RgbRange=0.38.

那R值允许的范围就是255-255*0.38<R<255+255*0.38,即158<R<352(大于255我们另外处理，不影响下面的结论)，可以发现两眼中间的灰色的R值在取色范围

内，而膝盖处的暗红色却不在范围内。这就解释了为什么两眼中间变绿了，而膝盖为什么没变绿。

 

不完美的尝试2

尝试着去优化一下，像下面这样做一下插值，用颜色的RGB空间距离来判断距离：

Shader "Custom/TeamMaskRgbEx1" {
       Properties {
              _MainTex ("Base (RGB)", 2D) = "white" {}
              _From ("From Color", Color) = (1,1,1,1)
              _To ("To Color", Color) = (1,1,1,1)
              _Range ("Range", Range (0.0, 2.0)) = 0.01
       }
       SubShader {
              Tags { "RenderType"="Opaque" }
              LOD 150

              CGPROGRAM
              #pragma surface surf Lambert noforwardadd

              sampler2D _MainTex;
              fixed4 _From;
              fixed4 _To;
              half _Range;

              struct Input {
                     float2 uv_MainTex;
              } ;

              void surf (Input IN, inout SurfaceOutput o) {
                     fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
                     fixed colorDistance = (c.r - _From.r)*(c.r - _From.r) + (c.g - _From.g)*(c.g - _From.g) + (c.b - _From.b)*(c.b - _From.b);
                     o.Albedo = lerp(c.rgb,(_To.rgb - _From.rgb + c.rgb),
                                     saturate(1 - colorDistance / (_Range * _Range)));
                     o.Alpha = c.a;
              }
              ENDCG
       }

       Fallback "Mobile/VertexLit"
}

但效果却依然不能让我满意：

 

那到底怎样才能准确取到与红色相近的颜色呢？答案是利用颜色的HSV模型。

HSV模型的定义以及其与RGB模型之间的转换请参考：https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4

这里不赘述了。

 

不完美的尝试3

如果你了解了颜色的HSV模型，应该就会想到只要找到红色色相（Hue）附近的颜色，然后改变他们就可以了，我也是这样想的：

Shader "Custom/TeamMaskHue" {
       Properties {
              _Color ("Color", Color) = (1,1,1,1)
              _MainTex ("Albedo (RGB)", 2D) = "white" {}
              _From("From Color",Color) = (1,1,1,1)
              _To("To Color",Color) = (1,1,1,1)
              _FaultTolerant("hue fault-tolerant",range(0,359)) = 2
       }
       SubShader {
              Tags { "RenderType"="Opaque" }
              LOD 200

              CGPROGRAM
              #pragma surface surf Standard fullforwardshadows

              sampler2D _MainTex;

              struct Input {
                     float2 uv_MainTex;
              } ;

              fixed4 _Color;
              fixed4 _From;
              fixed4 _To;
              float _FaultTolerant;

              float getHue(float3 col) {
                     float r=col.r,g=col.g,b=col.b;
                     float _max = max(r,max(g,b));
                     float _min = min(r,min(g,b));
                     float _gradient = _max - _min;
                     float ret = 0;
                     if(_max == r) {
                           ret = (g-b)/_gradient;
                     }

                     else if(_max == g) {
                           ret = 2 + (b-r)/_gradient;
                     }

                     else if(_max == b) {
                           ret = 4 + (r-g)/_gradient;
                     }

                     ret = ret*60.0;

                     if(ret<0) {
                           ret = ret + 360;
                     }
                     return ret;
              }

              void surf (Input IN, inout SurfaceOutputStandard o) {
                     fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
                     float hc = getHue(c.rgb);
                     float hFrom = getHue(_From.rgb);
                     float differ = abs(hc-hFrom);
                     differ = lerp(differ,abs(differ-360),step(180,differ));
                     o.Albedo = lerp(c.rgb,c.rgb - _From.rgb + _To.rgb,
                           step(differ,_FaultTolerant));
                     o.Alpha = c.a;
              }
              ENDCG
       }
       FallBack "Diffuse"
}
 

Emmm，效果如下：

这是怎么回事呢？难道用色相（Hue）也不能取到真正意义上相近的颜色吗？那些该死的意料之外的绿色是怎么回事呢？

上图是HSV空间模型，从图中可以很直观的看到圆锥中心线附近的颜色呈灰色，也就是说不管哪种色相，在其饱和度过低的时候都会表现为灰色，

在其明暗度（Brightness）过低时会表现为黑色。

所以，为了准确找到与指定颜色看上去近似的颜色，我们还需要考虑饱和度（Saturation）和明暗度 （Brightness ，HSV 用Value表示）。

一般的，Hue十分接近，Saturation和Brightness的误差各不超过0.7的颜色，它们看起来是相似的颜色。

 

最终代码如下（含branch优化）：

Shader "Custom/TeamMaskFinal" {
       Properties {
              _MainTex ("Base (RGB)", 2D) = "white" {}
              _From("From Color",Color) = (1,1,1,1)
              _To("To Color",Color) = (1,1,1,1)
              _HError("Hue Error",range(0,1)) = 0 // 允许的色相误差
              _SError("Saturation Error",range(0,1)) = 0 // 允许的饱和度误差
              _VError("Brightness Error",range(0,1)) = 0 // 允许的亮度误差
       }
       SubShader {
              Tags { "RenderType"="Opaque" }
              LOD 150

              CGPROGRAM
              #pragma surface surf Lambert noforwardadd

              sampler2D _MainTex;
              fixed4 _From;
              fixed4 _To;
              fixed _HError;
              fixed _SError;
              fixed _VError;

              struct Input {
                     float2 uv_MainTex;
              } ;

              fixed3 RGBtoHSV(fixed3 c)
              {
                  fixed4 K = fixed4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
                  fixed4 p = lerp(fixed4(c.bg, K.wz), fixed4(c.gb, K.xy), step(c.b, c.g));
                  fixed4 q = lerp(fixed4(p.xyw, c.r), fixed4(c.r, p.yzx), step(p.x, c.r));

                  float d = q.x - min(q.w, q.y);
                  float e = 1.0e-10;
                  return fixed3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
              }

              fixed3 HSVtoRGB(fixed3 c)
              {
                  fixed4 K = fixed4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
                  fixed3 p = abs(frac(c.xxx + K.xyz) * 6.0 - K.www);
                  return c.z * lerp(K.xxx, saturate(p - K.xxx), c.y);
              }

              void surf (Input IN, inout SurfaceOutput o) {
                     fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
                     fixed3 cHSV = RGBtoHSV(c);
                     fixed3 FromHSV= RGBtoHSV(_From);
                     fixed3 ToHSV= RGBtoHSV(_To);

                     fixed diffHue = abs(cHSV.x-FromHSV.x);
                     diffHue = lerp(diffHue,abs(diffHue-1),step(0.5,diffHue));

                     fixed con = step(diffHue,_HError);
                     con = con + step(abs(cHSV.y-FromHSV.y),_SError);
                     con = con + step(abs(cHSV.z-FromHSV.z),_VError);
                     con = step(2.5,con);
                     fixed3 ret = cHSV + ToHSV - FromHSV;
//                   ret.x = lerp(ret.x,ret.x-1,step(1,ret.x));
//                   ret.x = lerp(ret.x,ret.x+1,step(ret.x,0));

                     o.Albedo = lerp(c.rgb,HSVtoRGB(ret),fixed3(con,con,con));

                     o.Alpha = c.a;
              }
              ENDCG
       }

       Fallback "Mobile/VertexLit"
}

 

最终效果图:

 

用到RGB、HSV互相转换的优化算法链接：

http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl