首页 > 代码库 > Unity 为队伍设置不同颜色的shader

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

2024-08-29 08:34:13   224人阅读

在魔兽争霸等一些游戏中，我们通过模型的颜色就能很轻松的区分队伍，如下：
技术分享 技术分享技术分享 技术分享
实现的方法有很多，比如：
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

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


联系
我们