版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/java3182/article/details/81090351
前言
描边效果，在游戏中比较常见，实现方式也有好多种，今天主要讲一下比较容易理解的一种，需要用到两个pass实现。
描边效果
先看效果：
这个描边效果比较简单，这个动的贴图是屏幕空间计算的，顺便也说说屏幕空间计算。
原理分析
- 利用两个pass,第一个pass先画比模型大一圈的填充，第二个pass正常画贴图
- 屏幕空间是取屏幕空间的点来实现一些特殊效果
具体实现
Shader "Unlit/Outline and ScreenSpace texture"
{
Properties
{
[Header(Outline)]//Inspector显示分类标题
_OutlineVal("Outline value",Range(0.,2.)) = 1.//自定义描边大小
_OutlineCol("Outline color",Color) = (1.,1.,1.,1.)//描边颜色
[Header(Texture)]
_MainTex ("Texture", 2D) = "white" {}
_Zoom("Zoom",Range(0.5,20)) = 1//缩放贴图
_SpeedX("Speed along X",Range(-1,1)) = 0//贴图的x速度
_SpeedY("Speed along Y",Range(-1,1)) = 0//贴图的y速度
}
SubShader
{
Tags {"Queue" = "Geometry" "RenderType"="Opaque" }
LOD 100
Pass//第一个pass设置描边轮廓和颜色
{
Cull Front
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog
#include "UnityCG.cginc"
struct v2f
{
float4 pos : SV_POSITION;
};
float _OutlineVal;
v2f vert (appdata_base v)
{
v2f o;
//将顶点转到裁剪空间
o.pos = UnityObjectToClipPos(v.vertex);
//将法线转到相机空间
float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV,v.normal);
//裁剪空间计算法线的值
normal.x *= UNITY_MATRIX_P[0][0];
normal.y *= UNITY_MATRIX_P[1][1];
//根据法线和描边大小缩放模型
o.pos.xy += _OutlineVal * normal.xy;
return o;
}
fixed4 _OutlineCol;
fixed4 frag (v2f i) : SV_Target
{
return _OutlineCol;
}
ENDCG
}
Pass{//第二个pass正常绘制，并对贴图进行屏幕空间采样
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
float4 vert(appdata_base v):SV_POSITION{
return UnityObjectToClipPos(v.vertex);
}
sampler2D _MainTex;
float _Zoom;
float _SpeedX;
float _SpeedY;
fixed4 frag(float4 i:VPOS):SV_TARGET{
return tex2D(_MainTex,((i.xy/_ScreenParams.xy)+float2(_Time.y*_SpeedX,_Time.y*_SpeedY))/_Zoom);
}
ENDCG
}
}
}
- 代码中的第一个pass主要是用了法线外拓的方法，也就是将顶点向法线方向偏移一部分，为了实现这个目的，本来下面的代码就可以实现。
v2f vert (appdata_base v)
{
v2f o;
v.vertex.xyz += v.normal * _OutlineVal;
//将顶点转到裁剪空间
o.pos = UnityObjectToClipPos(v.vertex);
return o;
}
不过这种会造成近大远小的透视问题，所以就将法线的操作放到了裁剪空间后,放到后面就需要将法线也变换到裁剪空间。 - float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV,v.normal);由于法向量只是一个方向向量，不能表达空间中的特定位置。也没有齐次坐标(顶点位置中的w分量),所以位移不应该影响法向量，(float3x3)的转换就是移除位移部分，只选用模型矩阵左上角3x3的矩阵，对于法向量只希望对它实施缩放和旋转变换
- UNITY_MATRIX_IT_MV:这个矩阵是干什么的呢？这个主要是解决不等比缩放模型矩阵对法向量的影响。(当应用一个不等比缩放时，法向量就不再垂直对应表面了，等比缩放不会改变法线方向，仅仅是改变法线的长度)，这个矩阵就是为了解决这个问题为法向量专门定制的，叫法线矩阵，主要是消除对法向量错误缩放的影响，如想了解这个矩阵如何计算出来，建议阅读这个文章,法线矩阵被定义为「模型矩阵左上角的逆矩阵的转置矩阵」相当于transpose(inverse(v.normal))*v.noraml,这个Unity内置的矩阵就是在MV上的法线矩阵
- normal.x *= UNITY_MATRIX_P[0][0];
normal.y *= UNITY_MATRIX_P[1][1];
转换到相机空间后，再将法线转到投影空间 - o.pos.xy += _OutlineVal * normal.xy;
根据投影空间中的法线进行顶点偏移 - tex2D(_MainTex,((i.xy/_ScreenParams.xy)+float2(_Time.y*_SpeedX,_Time.y*_SpeedY))/_Zoom);
第二个pass中的采样是根据屏幕坐标，换算到贴图坐标去采样。
总结
描边效果有许多种实现方法，法线外拓和双pass是其中一种，相对比较好理解一些。如需配套代码，可以从作者github获取