游戏里常出现的一种需求，就是鼠标触碰到角色或物体时高亮。正在学习unity的shader，看官方的shader示例,其中有一个就是Rim Lighting，但是官方示例那个模型并没有把这个效果凸显出来，然后查了下Rim Lighting，看到了这个例子,才明白是物体边缘高亮的效果，联想到玩的游戏，瞬间明白了。
这也算是个挺有用的效果，所以细心研究了下，而且发现官方示例和上面这个博客都没有提到为什么这么写就可以实现边缘高亮的效果，故记录+分享下。
前提
shader一开始的概念是从猫都能学会的Unity3D Shader入门指南（一）学习的，写的挺好，对shader有了基本的认识。而且没想到学unity竟然再次看到了王巍的博客。
shader的使用
通过新建一个材质（Metarial）,把它的shader里修改为自己新建的shader就可以了。然后把这个材质使用到需要效果的物体上去，在render组件里把材质替换就好了。
边缘高亮效果
先来个效果图
WDWD~~~M`020R$4ORS2OHW1.png
再上代码：
Shader "Custom/RimLighting" {
Properties {
_MainColor ("MainColor", Color) = (1.0, 1.0, 1.0, 1.0)
_MainTex ("Texture", 2D) = "white" {}
_BumpMap ("Bumpmap", 2D) = "bump" {}
_RimColor ("Rim Color", Color) = (0.26, 0.19, 0.16, 0)
_RimPower ("Rim Power", Range(0.5,8.0)) = 3.0
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 200
CGPROGRAM
// Physically based Standard lighting model, and enable shadows on all light types
#pragma surface surf Standard fullforwardshadows
// Use shader model 3.0 target, to get nicer looking lighting
#pragma target 3.0
struct Input {
float2 uv_MainTex;
float2 uv_BumpMap;
float3 viewDir;
};
sampler2D _MainTex;
sampler2D _BumpMap;
float4 _RimColor;
float _RimPower;
float4 _MainColor;
void surf (Input IN, inout SurfaceOutputStandard o) {
o.Albedo = tex2D(_MainTex, IN.uv_MainTex).rgb * _MainColor.rgb;
o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
//half rim = 1.0 - saturate( dot( normalize (IN.viewDir), 0.normal ));
half rim = 1.0 - saturate(dot (normalize(IN.viewDir), o.Normal));
o.Emission = _RimColor.rgb * pow(rim, _RimPower);
}
ENDCG
}
FallBack "Diffuse"
}
直接从void surf (Input IN, inout SurfaceOutputStandard o)这个方法看：
-
o.Albedo = tex2D(_MainTex, IN.uv_MainTex).rgb * _MainColor.rgb;颜色使用我们传入的主纹理_MainTex和主色_MainColor结合。我上图的红色球是没有添加纹理，然后使用了纯红色作为主色。如果是普通的材质，就会是一个纯红的球。 -
o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));这句是提取_BumpMap这个纹理的法线数据，说实话这个效果我不是很懂，但这个跟边缘高亮效果没有关系。 -
重点是后面两句，第一句
half rim = 1.0 - saturate(dot (normalize(IN.viewDir), o.Normal));
(1) 首先viewDir是物体点到摄像机的方向，Normal是法线的方向，dot是点积，在几何里，向量A和B点积的意义是
点积公式
因为cos的关系，所以对于一个球而言，边缘是90度夹角，正中心是0度夹角，这样dot 的值就是中心是1，边缘一圈是0，然后由中间向外侧单调递减。
(2) saturate函数只是把大小限制在0-1之间，小于0变为0，大于1变为1.然后加上1-的效果，rim的值变化就是中间为0，边缘为1，然后单调递增。
- 最后
Emission应该是自发光，o.Emission = _RimColor.rgb * pow(rim, _RimPower);是在边缘颜色_RimColor的基础上做了一个比例，而这个比例的值是怎么变化的呢？
首先rim的值在0-1之间，那么如果_RimPower是大于1的数，则_RimPower越大，pow之后的值就越小，也就是Emission 越小，那么就会越体现主色，而边缘色越少。所以原来是边缘色的地方，也会变成主色，在我的示例中，就是红色越来越多，而黄色越来越少。而最边缘，因为rim是1，它不受_RimPower的影响，一直是1，它会一直保持边缘色（其实是混色，因为主色也在）。当_RimPower大到一定程度，边缘色就会只存在于边缘很小的范围内，形成我们想要的边缘发光的效果。
再挂一张_RimPower为1的时候的样子：
很明显，相比_RimPower为3时候，黄色更多，而红色更少。
总结
- 整个过程，我角色关键的是使用了
viewDir，利用它和法线方向的变化来做文章； - 而使用
pow幂函数，让变化变得陡峭，把一个简单的颜色渐变限制到特殊区域 -
Emission的使用，让值得变化变成了视觉上颜色的变化。如果不使用Emission,可以改成其他的，比如粗糙、油腻或者手绘效果这种，也就可以在边缘实现这些效果。
材质打了个包，放在git上了
网友评论