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