游戏里经常需要在角色上做描边，这里总结一下平时几种常见的描边做法。

优点是简单，效果直接，性价比高。

1. 定点对着法线方向外移，缺点是可以看出顶点之间有断裂

 

  1. Shader "ly/Outline_2Pass_1"
  2. {
  3.     Properties
  4.     {
  5.         _MainTex("Texture", 2D) = "white"{}
  6.         _Outline("Outline", range(0, 1)) = 0.02
  7.         _OutlineColor("Outline Color", Color) = (1,1,1,1)
  8.     }
  9.         
  10.     SubShader
  11.     {
  12.         //第一个批次，画描边
  13.         Pass
  14.         {
  15.             //Cull掉前面的一半，只让描边显示在后面
  16.             Cull Front
  17.             CGPROGRAM
  18.             #pragma vertex vert
  19.             #pragma fragment frag
  20.             #include "UnityCG.cginc"
  21.             fixed _Outline;
  22.             fixed4 _OutlineColor;
  24.             struct v2f
  25.             {
  26.                 float4 pos : SV_POSITION;
  27.                 float4 color : COLOR;
  28.             };
  30.             v2f vert (appdata_full v)
  31.             {
  32.                 v2f o;
  34.                 //源顶点位置添加法线方向乘以参数的偏移量
  35.                 v.vertex.xyz += v.normal * _Outline;
  37.                 //位置从自身坐标系转换到投影空间
  38.                 //旧版本o.pos = mul(UNITY_MATRIX_MVP,v.vertex);
  39.                 o.pos = UnityObjectToClipPos(v.vertex);
  41.                 //描边颜色
  42.                 o.color = _OutlineColor;
  43.                 return o;
  44.             }
  45.             
  46.             float4 frag (v2f i) : COLOR
  47.             {
  48.                 return i.color; //描边
  49.             }
  50.             ENDCG
  51.         }
  54.         //第二个批次
  55.         Pass
  56.         {
  57.             CGPROGRAM
  58.             #pragma vertex vert
  59.             #pragma fragment frag
  60.             #include "UnityCG.cginc"
  61.             sampler2D _MainTex;
  62.             half4 _MainTex_ST;
  64.             struct v2f
  65.             {
  66.                 float4 pos : SV_POSITION;
  67.                 float2 uv : TEXCOORD0;
  68.                 fixed4 color : COLOR;
  69.             };
  71.             v2f vert(appdata_base v)
  72.             {
  73.                 v2f o;
  74.                 o.pos = UnityObjectToClipPos(v.vertex);
  75.                 o.uv = v.texcoord;
  76.                 o.color = fixed4(0, 0, 0, 1);
  77.                 return o;
  78.             }
  80.             fixed4 frag(v2f i) : SV_Target
  81.             {
  82.                 fixed4 col = tex2D(_MainTex, i.uv);
  83.                 return col;
  84.             }
  85.             ENDCG
  86.         }
  87.     }
  88. }

 

2. 得到法线在投影空间上的xy轴，作为偏移方向将顶点外移，得到的结果类似1，也有断裂

 

3. 顶点的位置作为方向矢量，则不会因为方向差距较大而断裂

 

  1. Shader "ly/Outline_2Pass_2"
  2. {
  3.     Properties
  4.     {
  5.         _MainTex("Texture", 2D) = "white"{}
  6.         _Outline("Outline", range(0, 1)) = 0.02
  7.         _OutlineColor("Outline Color", Color) = (1,1,1,1)
  8.     }
  9.         
  10.     SubShader
  11.     {
  12.         //第一个批次，画描边
  13.         Pass
  14.         {
  15.             //Cull掉前面的一半，只让描边显示在后面
  16.             Cull Front
  17.             CGPROGRAM
  18.             #pragma vertex vert
  19.             #pragma fragment frag
  20.             #include "UnityCG.cginc"
  21.             fixed _Outline;
  22.             fixed4 _OutlineColor;
  24.             struct v2f
  25.             {
  26.                 float4 pos : SV_POSITION;
  27.                 float4 uv : TEXCOORD0;
  28.             };
  30.             v2f vert (appdata_full v)
  31.             {
  32.                 v2f o;
  34.                 //位置从自身坐标系转换到投影空间
  35.                 //旧版本o.pos = mul(UNITY_MATRIX_MVP,v.vertex);
  36.                 o.pos = UnityObjectToClipPos(v.vertex);
  38.                 //方式二，扩张顶点位置
  39.                 //法线变换到投影空间
  40.                 //float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal);
  41.                 //得到投影空间的偏移
  42.                 //float2 offset = TransformViewToProjection(normal.xy);
  43.  
  44.                 ////方式三，把顶点当做方向矢量，在方向矢量的方向偏移
  45.                 float3 dir = normalize(v.vertex.xyz);
  46.                 dir = mul((float3x3)UNITY_MATRIX_IT_MV, dir);
  47.                 float2 offset = TransformViewToProjection(dir.xy);
  49.                 //有一些情况下，侧边看不到，所以把方式一和二的算法相结合
  50.                 //float3 dir = normalize(v.vertex.xyz);
  51.                 //float3 dir2 = v.normal;
  52.                 //float D = dot(dir, dir2);
  53.                 //D = (1 + D / _Outline) / (1 + 1 / _Outline);
  54.                 //dir = lerp(dir2, dir, D);
  55.                 //dir = mul((float3x3)UNITY_MATRIX_IT_MV, dir);
  56.                 //float2 offset = TransformViewToProjection(dir.xy);
  57.                 //offset = normalize(offset);
  59.                 //在xy两个方向上偏移顶点的位置
  60.                 o.pos.xy += offset * o.pos.z * _Outline;
  62.                 return o;
  63.             }
  64.             
  65.             float4 frag (v2f i) : COLOR
  66.             {
  67.                 return _OutlineColor; //描边
  68.             }
  69.             ENDCG
  70.         }
  71.         //第二个批次，略
  72. }

 

顶点的视角dir和法线dir点乘，得出偏离度，越靠近边缘，颜色的强度越高。

优点是节约批次。

  1. v2f vert (appdata_full v)
  2. {
  3. 　　v2f o;
  5. 　　//略
    　　//_RimColor边缘光颜色　　
    　　//_RimPower边缘光强度
  6. 　　float3 viewDir = normalize(ObjSpaceViewDir(v.vertex));
  7. 　　float dotProduct = 1 - dot(normalize(v.normal), viewDir);
  8. 　　fixed3 rimCol = smoothstep(1 - _RimPower, 1.0, dotProduct) * _RimColor;
  9. 　　o.color = rimCol;
  11. 　　//略
  12.   　return o;      
  13. }

　　

优点是效果完美，缺点是消耗性能。

摄像机上挂一个脚本，处理后处理的步骤，outlineCamera 为临时摄像机，参数与主摄像机相同，看着同样的Unit层。

临时摄像机渲染到RT上，先画剪影，然后用自定义的描边shader画上去。

  1. using UnityEngine;
  2. using UnitySampleAssets.ImageEffects;
  4. [RequireComponent(typeof(Camera))]
  5. [AddComponentMenu("Image Effects/Other/Post Effect Outline")]
  7. class PostEffectOutline : PostEffectsBase
  8. {
  9.     public enum OutLineMethod
  10.     {
  11.         eIteration,
  12.         eScale,
  13.     }
  15.     private Camera attachCamera;
  16.     private Camera outlineCamera;
  17.     private Shader simpleShader;
  18.     private Shader postOutlineShader;
  19.     private Material postOutlineMat;
  20.     private RenderTexture mTempRT;
  22.     public Color outlineColor = new Color(0, 1f, 0, 1f);// Color.green;
  24.     [Range(0, 10)]
  25.     public int outlineWidth = 1;
  27.     [Range(1, 9)]
  28.     public int iterations = 1;
  30.     public OutLineMethod outlineMethod = OutLineMethod.eIteration;
  33.     void Awake()
  34.     {
  35.         FindShaders();
  36.     }
  38.     void FindShaders()
  39.     {
  40.         if (!simpleShader)
  41.             simpleShader = Shader.Find("ly/DrawSimple");
  43.         if (outlineMethod == OutLineMethod.eIteration)
  44.         {
  45.             if (!postOutlineShader)
  46.                 postOutlineShader = Shader.Find("ly/PostOutlineIteration");
  47.         }
  48.         else
  49.         {
  50.             if (!postOutlineShader)
  51.                 postOutlineShader = Shader.Find("ly/PostOutlineScale");
  52.         }
  53.     }
  55.     protected override void Start()
  56.     {
  57.         base.Start();
  58.         attachCamera = GetComponent<Camera>();
  59.         if (outlineCamera == null)
  60.         {
  61.             outlineCamera = new GameObject().AddComponent<Camera>();
  62.             outlineCamera.enabled = false;
  63.             outlineCamera.transform.parent = attachCamera.transform;
  64.             outlineCamera.name = "outlineCam";
  65.         }
  66.         postOutlineMat = new Material(postOutlineShader);
  67.     }
  69.     public override bool CheckResources()
  70.     {
  71.         CheckSupport(false);
  73.         if (!isSupported)
  74.             ReportAutoDisable();
  75.         return isSupported;
  76.     }
  78.     private void OnRenderImage(RenderTexture source, RenderTexture destination)
  79.     {
  80.         if (CheckResources() == false)
  81.         {
  82.             Graphics.Blit(source, destination);
  83.             return;
  84.         }
  87.         outlineCamera.CopyFrom(attachCamera);
  88.         outlineCamera.clearFlags = CameraClearFlags.Color;
  89.         outlineCamera.backgroundColor = Color.black;
  90.         outlineCamera.cullingMask = 1 << LayerMask.NameToLayer("Unit");
  92.         if (mTempRT == null)
  93.             mTempRT = RenderTexture.GetTemporary(source.width, source.height, source.depth);
  95.         mTempRT.Create();
  97.         outlineCamera.targetTexture = mTempRT;
  98.         outlineCamera.RenderWithShader(simpleShader, "");
  100.         postOutlineMat.SetTexture("_SceneTex", source);
  101.         postOutlineMat.SetColor("_Color", outlineColor);
  102.         postOutlineMat.SetInt("_Width", outlineWidth);
  103.         postOutlineMat.SetInt("_Iterations", iterations);
  105.         //画描边混合材质
  106.         Graphics.Blit(mTempRT, destination, postOutlineMat);
  108.         mTempRT.Release();
  109.     }
  110. }

 

先用简单的shader画出剪影

  1. Shader "ly/DrawSimple"
  2. {
  3.     FallBack OFF
  4. }

 

然后就是这个自定义的描边shader画的过程。

第一种是类似高斯模糊的方式来迭代，迭代次数越多则越细腻。

  1. // ly 类似高斯模糊方式迭代循环处理描边
  3. Shader "ly/PostOutlineIteration"
  4. {
  5.     Properties
  6.     {
  7.         _MainTex("Main Texture", 2D) = "black"{}        //画完物体面积后的纹理
  8.         _SceneTex("Scene Texture", 2D) = "black"{}        //原场景纹理
  9.         _Color("Outline Color", Color) = (0,1,0,0.8)        //描边颜色
  10.         _Width("Outline Width", int) = 1                //描边宽度
  11.         _Iterations("Iterations", int) = 1                //描边迭代次数（越多越平滑，消耗越高）
  12.     }
  14.     SubShader
  15.     {
  16.         Pass
  17.         {
  18.             CGPROGRAM
  19.             sampler2D _MainTex;
  20.             float2 _MainTex_TexelSize;
  21.             sampler2D _SceneTex;
  22.             fixed4 _Color;
  23.             float _Width;
  24.             int _Iterations;
  26.             #pragma vertex vert
  27.             #pragma fragment frag    
  28.             #include "UnityCG.cginc"
  29.  
  30.             struct v2f
  31.             {
  32.                 float4 pos : SV_POSITION;
  33.                 float2 uv : TEXCOORD0;
  34.             };
  36.             v2f vert(appdata_base v)
  37.             {
  38.                 v2f o;
  39.                 o.pos = UnityObjectToClipPos(v.vertex);
  40.                 o.uv = v.texcoord.xy;
  41.                 return o;
  42.             }
  44.             half4 frag(v2f i) : COLOR
  45.             {
  46.                 //迭代次数为奇数，保证对称
  47.                 int iterations = _Iterations * 2 + 1;
  48.                 float ColorIntensityInRadius;
  49.                 float Tx_x = _MainTex_TexelSize.x * _Width;
  50.                 float Tx_y = _MainTex_TexelSize.y * _Width;
  52.                 //计算是否大于0，则此像素属于外边的范围内
  53.                 for (int k=0; k<iterations; k+=1)
  54.                 {
  55.                     for (int j=0; j<iterations; j+=1)
  56.                     {
  57.                         ColorIntensityInRadius += tex2D(_MainTex, i.uv.xy + float2((k - iterations / 2) * Tx_x, (j - iterations / 2) * Tx_y));
  58.                     }
  59.                 }
  61.                 //如果有颜色，或者不在外边的范围内，则渲染原场景。否则，在外边内，渲染描边。
  62.                 if (tex2D(_MainTex, i.uv.xy).r > 0 || ColorIntensityInRadius == 0)
  63.                     return tex2D(_SceneTex, i.uv);
  64.                 else
  65.                     return  _Color.a * _Color + (1 - _Color.a)*tex2D(_SceneTex, i.uv);
  66.             }
  68.             ENDCG
  69.         }
  70.     }
  71. }

第二种方法简单些，直接把剪影的部分uv扩大，再把原图叠上去。

  1. // ly 扩张剪影uv来填充描边
  3. Shader "ly/PostOutlineScale"
  4. {
  5.     Properties
  6.     {
  7.         _MainTex("Main Texture", 2D) = "black"{}        //画完物体面积后的纹理
  8.         _SceneTex("Scene Texture", 2D) = "black"{}        //原场景纹理
  9.         _Color("Outline Color", Color) = (0,1,0,1)        //描边颜色
  10.         _Width("Outline Width", float) = 1                //描边宽度
  11.     }
  13.     SubShader
  14.     {
  15.         Pass
  16.         {
  17.             CGPROGRAM
  18.             sampler2D _MainTex;
  19.             sampler2D _SceneTex;
  20.             float2 _SceneTex_TexelSize;
  22.             fixed4 _Color;
  23.             float _Width;
  25.             #pragma vertex vert
  26.             #pragma fragment frag    
  27.             #include "UnityCG.cginc"
  28.  
  29.             struct v2f
  30.             {
  31.                 float4 pos : SV_POSITION;
  32.                 half2 uv[2] : TEXCOORD0;
  33.                 half2 uv2[4] : TEXCOORD2;
  34.             };
  36.             v2f vert(appdata_base v)
  37.             {
  38.                 v2f o;
  39.                 o.pos = UnityObjectToClipPos(v.vertex);
  41.                 o.uv[0] = v.texcoord.xy;
  42.                 o.uv[1] = v.texcoord.xy;
  44.                 half2 offs = _SceneTex_TexelSize.xy * _Width;
  46.                 o.uv2[0].x = v.texcoord.x - offs.x;
  47.                 o.uv2[0].y = v.texcoord.y - offs.y;
  49.                 o.uv2[1].x = v.texcoord.x + offs.x;
  50.                 o.uv2[1].y = v.texcoord.y - offs.y;
  52.                 o.uv2[2].x = v.texcoord.x + offs.x;
  53.                 o.uv2[2].y = v.texcoord.y + offs.y;
  55.                 o.uv2[3].x = v.texcoord.x - offs.x;
  56.                 o.uv2[3].y = v.texcoord.y + offs.y;
  58.                 if (_SceneTex_TexelSize.y < 0)
  59.                 {
  60.                     o.uv[1].y = 1 - o.uv[1].y;
  61.                     o.uv2[0].y = 1 - o.uv2[0].y;
  62.                     o.uv2[1].y = 1 - o.uv2[1].y;
  63.                     o.uv2[2].y = 1 - o.uv2[2].y;
  64.                     o.uv2[3].y = 1 - o.uv2[3].y;
  65.                 }
  66.                 return o;
  67.             }
  69.             half4 frag(v2f i) : COLOR
  70.             {
  71.                 fixed4 stencil = tex2D(_MainTex, i.uv[1]);
  73.                 // 有剪影的部分，显示原图
  74.                 if (any(stencil.rgb))
  75.                 {
  76.                     fixed4 framebuffer = tex2D(_SceneTex, i.uv[0]);
  77.                     return framebuffer;
  78.                 }
  79.                 // 没有剪影的部分，先把剪影扩张，扩张出颜色的部分用剪影，没有颜色的用原图
  80.                 else
  81.                 {
  82.                     fixed4 color1 = tex2D(_MainTex, i.uv2[0]);
  83.                     fixed4 color2 = tex2D(_MainTex, i.uv2[1]);
  84.                     fixed4 color3 = tex2D(_MainTex, i.uv2[2]);
  85.                     fixed4 color4 = tex2D(_MainTex, i.uv2[3]);
  86.                     fixed4 color;
  87.                     color.rgb = max(color1.rgb, color2.rgb);
  88.                     color.rgb = max(color.rgb, color3.rgb);
  89.                     color.rgb = max(color.rgb, color4.rgb);
  90.                     if (any(color.rgb))
  91.                     {
  92.                         return _Color;
  93.                         //color.a = (color1.a + color2.a + color3.a + color4.a) * 0.25;
  94.                         //return color;
  95.                     }
  96.                     else
  97.                     {
  98.                         fixed4 framebuffer = tex2D(_SceneTex, i.uv[0]);
  99.                         return framebuffer;
  100.                     }
  101.                 }
  102.             }
  104.             ENDCG
  105.         }
  106.     }
  108.     SubShader
  109.     {
  110.         Pass
  111.         {
  112.             SetTexture[_MainTex]{}
  113.         }
  114.     }
  116.     Fallback Off
  117. }

 

版权声明：本文为xiaohutu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaohutu/p/10834491.html