ColorMask使用简例

按照惯例，先上效果图：

从图中我们可以看到，房子的顶部和旗帜的颜色搭配可以有很多种方案，如果我们的项目中有这样的需求，该怎样去实现呢？

一种可能的做法就是使用ColorMask，顾名思义，就是使用颜色遮罩。我们可以将希望进行修改的部分的主贴图部分改为灰度图，仅保留阴影关系和细节纹理。然后制作一张Mask遮罩图。这张遮罩图在对应主贴图需要修改的部分标记颜色，并且可以对颜色进行分区处理。针对每个分区，分区颜色和主颜色按照一定关系进行融合，就可以搭配出多种方案啦！

当然，如果需要某个部分单独Bloom或者自发光，colorMask也是很容易想到的一种快捷处理方法。

思路分析

主贴图修改Mask图制作颜色分级设置自发光

代码实现

主贴图修改

首先我们把对应房顶和旗子的贴图位置改为灰度图，目的是去除原来颜色的干扰，但是保留阴影关系和细节纹理

图中灰度区域依然含有渐变关系来保留相关细节

Mask图制作

在主贴图对应区域进行颜色分级，例如下图：

在本案例中，红色被设置为一级颜色（房顶），绿色为二级颜色（旗帜底部颜色），蓝色为三级颜色（旗帜边缘），在shader中我们会对这些分级颜色进行分别处理

颜色分级

针对每一级颜色都要设置其与主颜色的融合程度

之所以会将分量设置为主颜色的强度，是为了保证上文中提到的阴影关系和细节纹理，即灰度图部分。ColorMask部分的颜色不设参数进行修改（用处不大，如果需要对自发光或者bloom进行细节调整的话，可以单独针对自发光或者bloom设置参数控制）

自发光

根据自己的需求添加，上图中的toggle部分就是用来控制是否实现自发光的，代码实现也很简单

Shader代码：

Shader "MayoHa/M_ColorMask_ToonLit" { Properties{ _MainColor("主颜色",Color) = (1,1,1,1) _MainTex("主贴图",2D) = "white"{} _ColorMaskTex("颜色遮罩贴图（一级：红 二级：绿 三级：蓝）",2D) = "white"{} _ToonRamp("卡通渐变图",2D) = "white"{} //_MainValue("主颜色强度",Range(0,2)) = 1 [Header(ColorMask)] _FirstColor("一级颜色",Color) = (1,1,1,1) _FirstValue("Main颜色强度",Range(0,1)) = 0.5 [Toggle] _isFEmiss("是否自发光",Float) = 0 _SecondColor("二级颜色",Color) = (1,1,1,1) _SecondValue("Main颜色强度",Range(0,1)) = 0.5 [Toggle] _isSEmiss("是否自发光",Float) = 0 _ThirdColor("三级颜色",Color) = (1,1,1,1) _ThirdValue("Main颜色强度",Range(0,1)) = 0.5 [Toggle] _isTEmiss("是否自发光",Float) = 0 } SubShader{ Tags{"RenderType" = "Opaque" "Queue" = "Geometry"} LOD 200 CGPROGRAM #include "UnityCG.cginc" #pragma surface surf ToomRamp exclude_path:prepass fixed4 _MainColor; sampler2D _MainTex; sampler2D _ColorMaskTex; sampler2D _ToonRamp; float _MainValue; fixed4 _FirstColor; fixed4 _SecondColor; fixed4 _ThirdColor; float _FirstValue; float _SecondValue; float _ThirdValue; float _isFEmiss; float _isSEmiss; float _isTEmiss; //光照函数 inline half4 LightingToomRamp(SurfaceOutput s,half3 lightDir,half atten){ #ifndef USING_DIRECTIONAL_LIGHT lightDir = normalize(lightDir); #endif half NdotL = dot(s.Normal,lightDir)*0.5 + 0.5; half3 ramp = tex2D(_ToonRamp,float2(NdotL,NdotL)).rgb; half4 c; c.rgb = s.Albedo * _LightColor0.rgb * ramp * atten * 2; c.a = 0; return c; } struct Input{ float2 uv_MainTex :TEXCOORD0; }; //表面函数 void surf(Input IN,inout SurfaceOutput o){ fixed4 c = tex2D(_MainTex,IN.uv_MainTex) * _MainColor; fixed4 m = tex2D(_ColorMaskTex,IN.uv_MainTex); fixed3 firstColor = (_FirstColor + c.rgb * _FirstValue) * m.r; fixed3 secondColor = (_SecondColor + c.rgb * _SecondValue) * m.g; fixed3 thirdColor = (_ThirdColor + c.rgb * _ThirdValue) * m.b; fixed3 noMaskColor = c.rgb * (1-m.r-m.g-m.b); //Albedo o.Albedo = noMaskColor + firstColor + secondColor + thirdColor; //Alpha o.Alpha = c.a; //Emission o.Emission = firstColor * _isFEmiss + secondColor * _isSEmiss + thirdColor * _isTEmiss; } ENDCG } Fallback"diffuse" }

总结

ColorMask就像是PS或者AE里面的遮罩或蒙版，有了它我们可以实现很多种奇幻的效果。同时，ColorMask也经常搭配StencilMask一起使用，以此来实现一些常见的特效效果。ColorMask很容易想到的一点就是用在人物服装或道具的玩家自定义上，比如一些mmo游戏的喷漆或颜料道具，甚至个人猜想部分MOBA手游中的角色皮肤也可以使用ColorMask实现资产的部分再利用，减轻美术的工作负担。总之，ColorMask的使用并不算十分复杂，但要想非常熟练地使用它创造出炫酷的效果，还需要不断地积累和实践