devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

UnityShader基础案例（五）——物体描边_unity 描边

作者：笔触狂放9 | 2024-02-18 12:28:12

赞

踩

unity 描边

一、基于菲涅尔反射的物体描边

        1.1 基于内边缘发光的方式

                内边缘发光本身的局限性就不说了。                

  1. Shader "Custom/Test0"
  2. {
  3.     Properties
  4.     {
  5.         _MainColor("主颜色",Color)=(0,0,0,1)
  6.  
  7.         _OutlineColor("描边颜色",Color)=(1,1,1,1)
  8.         _OutlineGlowPow("描边等级",Range(0,5))=2
  9.         _OutlineStrength("描边强度",Range(0,4))=1
  10.         
  11.     }
  12.     SubShader
  13.     {
  14.         
  15.         Pass
  16.         {
  17.             CGPROGRAM
  18.             #pragma vertex vert
  19.             #pragma fragment frag
  20.             #include "UnityCG.cginc"
  21.             #include "UnityLightingCommon.cginc"
  22.             float4 _MainColor;
  23.             fixed4 _OutlineColor;
  24.             fixed _OutlineGlowPow;
  25.             fixed _OutlineStrength;
  26.  
  27.             struct a2v
  28.             {
  29.                 float4 vertex:POSITION;
  30.                 float3 normal:NORMAL;
  31.             };
  32.  
  33.             struct v2f
  34.             {
  35.                 float4 pos:SV_POSITION;
  36.                 float3 normal:TEXCOORD0;
  37.                 float3 worldPos:TEXCOORD1;
  38.             };
  39.  
  40.  
  41.             v2f vert(a2v v)
  42.             {
  43.                 v2f o;
  44.  
  45.                 o.pos = UnityObjectToClipPos(v.vertex);
  46.                 o.normal = UnityObjectToWorldNormal(v.normal);
  47.                 o.worldPos = mul(unity_ObjectToWorld, v.vertex);
  48.  
  49.                 return o;
  50.             }
  51.  
  52.             fixed4 frag(v2f i):SV_Target
  53.             {
  54.                 i.normal = normalize(i.normal);
  55.                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
  56.  
  57.                 fixed3 worldNormal = normalize(i.normal);
  58.  
  59.                 fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
  60.  
  61.                 fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb *
  62.                     (dot(worldLight, worldNormal) * 0.5 + 0.5)+ambient;
  63.                 float3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos)); normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz);
  64.                 //越边缘，值越大
  65.                 float fresnel = pow(1 - saturate(dot(i.normal, viewDir)), _OutlineGlowPow) * _OutlineStrength;
  66.  
  67.                 fixed3 color = lerp(diffuse, _OutlineColor, fresnel);
  68.  
  69.                 return fixed4(color, 1);
  70.             }
  71.             ENDCG
  72.         }
  73.         
  74.     }
  75. }

                可以看到，基本上模型的每个边缘都上了色，这有区别于我们接下来说的其他描边效果。至于说整体偏红，主要是模型没任何贴图什么的毕竟白色*其他颜色的结果只会是其他颜色，而且用一张遮罩纹理也可以解决问题。              

        1.2 基于外边缘发光的方式                

  1. Shader "Custom/Test0"
  2. {
  3.     Properties
  4.     {
  5.         _MainColor("主颜色",Color)=(0,0,0,1)
  6.  
  7.         _HaloColor("外光晕颜色",Color)=(1,1,1,1)
  8.         _HaloArea("外光晕范围",Range(0,2))=1
  9.         _HaloPow("外光晕等级",Range(0,3))=1
  10.         _HaloStrength("外光晕强度",Range(0,4))=1
  11.     }
  12.     SubShader
  13.     {
  14.         //第一个Pass实现内发光,或者说边缘发光
  15.         Pass
  16.         {
  17.             Tags
  18.             {
  19.                 "LightMode"="ForwardBase"
  20.             }
  21.             
  22.             CGPROGRAM
  23.             #pragma vertex vert
  24.             #pragma fragment frag
  25.             #include "UnityCG.cginc"
  26.             #include "UnityLightingCommon.cginc"
  27.             fixed4 _MainColor;
  28.  
  29.             struct a2v
  30.             {
  31.                 float4 vertex:POSITION;
  32.                 float3 normal:NORMAL;
  33.             };
  34.  
  35.             struct v2f
  36.             {
  37.                 float4 pos:SV_POSITION;
  38.                 float3 worldNormal :COLOR;
  39.             };
  40.  
  41.             v2f vert(a2v v)
  42.             {
  43.                 v2f o;
  44.  
  45.                 o.pos = UnityObjectToClipPos(v.vertex);
  46.  
  47.                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
  48.  
  49.                 return o;
  50.             }
  51.  
  52.             fixed4 frag(v2f i):SV_Target
  53.             {
  54.                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
  55.  
  56.                 fixed3 worldNormal = normalize(i.worldNormal);
  57.  
  58.                 fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
  59.  
  60.                 fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb *
  61.                     (dot(worldLight, worldNormal) * 0.5 + 0.5);
  62.                 return fixed4(ambient + diffuse, 1);
  63.             }
  64.             ENDCG
  65.         }
  66.         Pass
  67.         {
  68.             //剔除正面，防止外边缘遮住原模型，并不是所有的都需要剔除正面，比如袖子什么的
  69.             //那个需要开启深度模板什么的，暂时还没学到
  70.             Cull Front
  71.             //混合用于控制外边缘强度
  72.             Blend SrcAlpha OneMinusSrcAlpha
  73.             //ZWrite off  这个用于外边缘叠加和其他物体叠加时可能会产生的透明边界的情形
  74.             CGPROGRAM
  75.             #pragma vertex vert
  76.             #pragma fragment frag
  77.             #include "UnityCG.cginc"
  78.             fixed4 _HaloColor;
  79.             fixed _HaloPow;
  80.             fixed _HaloArea;
  81.             fixed _HaloStrength;
  82.  
  83.             struct a2v
  84.             {
  85.                 float4 vertex:POSITION;
  86.                 float3 normal:NORMAL;
  87.             };
  88.  
  89.             struct v2f
  90.             {
  91.                 float4 pos:SV_POSITION;
  92.                 float3 normal:TEXCOORD0;
  93.                 float4 worldPos:TEXCOORD1;
  94.             };
  95.  
  96.  
  97.             v2f vert(a2v v)
  98.             {
  99.                 v2f o;
  100.                 o.normal = UnityObjectToWorldNormal(v.normal);
  101.                 v.vertex.xyz += v.normal * _HaloArea;
  102.                 o.pos = UnityObjectToClipPos(v.vertex);
  103.                 o.worldPos = mul(unity_ObjectToWorld, v.vertex);
  104.                 return o;
  105.             }
  106.  
  107.             fixed4 frag(v2f i):SV_Target
  108.             {
  109.                 i.normal = normalize(i.normal);
  110.                 //和Pass一不一样，原因是我们要把背面当正面渲染，所以视角方向要相反
  111.                 float3 viewDir = normalize(i.worldPos.xyz - _WorldSpaceCameraPos.xyz);
  112.                 //边缘仍然使用菲涅尔判断，只是和检测方式内边缘不同
  113.                 float fresnel = pow(saturate(dot(i.normal, viewDir)), _HaloPow) * _HaloStrength;
  114.                 return fixed4(_HaloColor.rgb, fresnel);
  115.             }
  116.             ENDCG
  117.         }
  118.     }
  119. }

                                       

                              

二、 基于模型扩充的描边                

        实现原理也很简单，就是模型扩充渲染一下，原模型渲染一下，结果一叠加，啪，就成了，但是要注意原模型一定要盖着扩充模型。不过说着简单，但还有很多要注意的点。

        2.1 不关闭深度写入但使用正面剔除               

  1. Shader "Custom/Test0"
  2. {
  3.     Properties
  4.     {
  5.         _MainColor("主颜色",Color)=(0,0,0,1)
  6.  
  7.         _OutlineColor("描边颜色",Color)=(1,1,1,1)
  8.         _OutlineArea("描边区域",Range(0,0.2))=2
  9.         _OutlineStrength("描边强度",Range(0,1))=1
  10.  
  11.     }
  12.     SubShader
  13.     {
  14.         Tags{"Queue"="Overlay"}
  15.         //模型扩充渲染
  16.         Pass
  17.         {
  18.             Cull Front
  19.             //ZWrite off
  20.             CGPROGRAM
  21.             #pragma vertex vert
  22.             #pragma fragment frag
  23.             #include "UnityCG.cginc"
  24.             float4 _MainColor;
  25.             fixed4 _OutlineColor;
  26.             fixed _OutlineArea;
  27.             fixed _OutlineStrength;
  28.  
  29.             struct a2v
  30.             {
  31.                 float4 vertex:POSITION;
  32.                 float3 normal:NORMAL;
  33.             };
  34.  
  35.             struct v2f
  36.             {
  37.                 float4 pos:SV_POSITION;
  38.             };
  39.  
  40.  
  41.             v2f vert(a2v v)
  42.             {
  43.                 v2f o;
  44.                 v.vertex.xyz+=v.normal*_OutlineArea;
  45.                 o.pos = UnityObjectToClipPos(v.vertex);                
  46.                 return o;
  47.             }
  48.  
  49.             fixed4 frag():SV_Target
  50.             {                                
  51.                 return _OutlineColor*_OutlineStrength;
  52.             }
  53.             ENDCG
  54.         }
  55.         //正常漫反射光照
  56.         Pass
  57.         {
  58.             Tags
  59.             {
  60.                 "LightMode"="ForwardBase"
  61.             }
  62.             CGPROGRAM
  63.             #pragma vertex vert
  64.             #pragma fragment frag
  65.             #include "UnityCG.cginc"
  66.             #include "UnityLightingCommon.cginc"
  67.             fixed4 _MainColor;
  68.  
  69.             struct a2v
  70.             {
  71.                 float4 vertex:POSITION;
  72.                 float3 normal:NORMAL;
  73.             };
  74.  
  75.             struct v2f
  76.             {
  77.                 float4 pos:SV_POSITION;
  78.                 float3 worldNormal :COLOR;
  79.             };
  80.  
  81.             v2f vert(a2v v)
  82.             {
  83.                 v2f o;
  84.  
  85.                 o.pos = UnityObjectToClipPos(v.vertex);
  86.  
  87.                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
  88.  
  89.                 return o;
  90.             }
  91.  
  92.             fixed4 frag(v2f i):SV_Target
  93.             {
  94.                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
  95.  
  96.                 fixed3 worldNormal = normalize(i.worldNormal);
  97.  
  98.                 fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
  99.  
  100.                 fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb *
  101.                     (dot(worldLight, worldNormal) * 0.5 + 0.5);
  102.                 return fixed4(ambient + diffuse, 1);
  103.             }
  104.             ENDCG
  105.         }
  106.  
  107.     }
  108. }

                

        2.2 关闭深度写入和剔除的方式                

  1. Shader "Custom/Test0"
  2. {
  3.     Properties
  4.     {
  5.         _MainColor("主颜色",Color)=(0,0,0,1)
  6.  
  7.         _OutlineColor("描边颜色",Color)=(1,1,1,1)
  8.         _OutlineArea("描边区域",Range(0,0.2))=2
  9.         _OutlineStrength("描边强度",Range(0,1))=1
  10.  
  11.     }
  12.     SubShader
  13.     {
  14.         //模型扩充渲染
  15.         Pass
  16.         {
  17.             ZWrite off
  18.             CGPROGRAM
  19.             #pragma vertex vert
  20.             #pragma fragment frag
  21.             #include "UnityCG.cginc"
  22.             float4 _MainColor;
  23.             fixed4 _OutlineColor;
  24.             fixed _OutlineArea;
  25.             fixed _OutlineStrength;
  26.  
  27.             struct a2v
  28.             {
  29.                 float4 vertex:POSITION;
  30.                 float3 normal:NORMAL;
  31.             };
  32.  
  33.             struct v2f
  34.             {
  35.                 float4 pos:SV_POSITION;
  36.             };
  37.  
  38.  
  39.             v2f vert(a2v v)
  40.             {
  41.                 v2f o;
  42.                 v.vertex.xyz+=v.normal*_OutlineArea;
  43.                 o.pos = UnityObjectToClipPos(v.vertex);                
  44.                 return o;
  45.             }
  46.  
  47.             fixed4 frag():SV_Target
  48.             {                                
  49.                 return _OutlineColor*_OutlineStrength;
  50.             }
  51.             ENDCG
  52.         }
  53.         Pass
  54.         {
  55.             Tags
  56.             {
  57.                 "LightMode"="ForwardBase"
  58.             }
  59.             CGPROGRAM
  60.             #pragma vertex vert
  61.             #pragma fragment frag
  62.             #include "UnityCG.cginc"
  63.             #include "UnityLightingCommon.cginc"
  64.             fixed4 _MainColor;
  65.  
  66.             struct a2v
  67.             {
  68.                 float4 vertex:POSITION;
  69.                 float3 normal:NORMAL;
  70.             };
  71.  
  72.             struct v2f
  73.             {
  74.                 float4 pos:SV_POSITION;
  75.                 float3 worldNormal :COLOR;
  76.             };
  77.  
  78.             v2f vert(a2v v)
  79.             {
  80.                 v2f o;
  81.  
  82.                 o.pos = UnityObjectToClipPos(v.vertex);
  83.  
  84.                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
  85.  
  86.                 return o;
  87.             }
  88.  
  89.             fixed4 frag(v2f i):SV_Target
  90.             {
  91.                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
  92.  
  93.                 fixed3 worldNormal = normalize(i.worldNormal);
  94.  
  95.                 fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
  96.  
  97.                 fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb *
  98.                     (dot(worldLight, worldNormal) * 0.5 + 0.5);
  99.                 return fixed4(ambient + diffuse, 1);
  100.             }
  101.             ENDCG
  102.         }
  103.  
  104.     }
  105. }

                可以看到，只是在模型周围才有描边效果，至于说周围那条淡蓝色的细边缘，那是Unity自带的选中物体时的描边效果。

                关闭深度写入有一个问题就是描边本身会被其他物体阻挡，从而破坏描边效果。

        2.3 使用渲染队列的关闭深度写入的方式                                                           

  1. Shader "Custom/Test0"
  2. {
  3.     Properties
  4.     {
  5.         _MainColor("主颜色",Color)=(0,0,0,1)
  6.  
  7.         _OutlineColor("描边颜色",Color)=(1,1,1,1)
  8.         _OutlineArea("描边区域",Range(0,0.2))=2
  9.         _OutlineStrength("描边强度",Range(0,1))=1
  10.  
  11.     }
  12.     SubShader
  13.     {
  14.         Tags{"Queue"="Overlay"}
  15.         //模型扩充渲染
  16.         Pass
  17.         {
  18.             ZWrite off
  19.             CGPROGRAM
  20.             #pragma vertex vert
  21.             #pragma fragment frag
  22.             #include "UnityCG.cginc"
  23.             float4 _MainColor;
  24.             fixed4 _OutlineColor;
  25.             fixed _OutlineArea;
  26.             fixed _OutlineStrength;
  27.  
  28.             struct a2v
  29.             {
  30.                 float4 vertex:POSITION;
  31.                 float3 normal:NORMAL;
  32.             };
  33.  
  34.             struct v2f
  35.             {
  36.                 float4 pos:SV_POSITION;
  37.             };
  38.  
  39.  
  40.             v2f vert(a2v v)
  41.             {
  42.                 v2f o;
  43.                 v.vertex.xyz+=v.normal*_OutlineArea;
  44.                 o.pos = UnityObjectToClipPos(v.vertex);                
  45.                 return o;
  46.             }
  47.  
  48.             fixed4 frag():SV_Target
  49.             {                                
  50.                 return _OutlineColor*_OutlineStrength;
  51.             }
  52.             ENDCG
  53.         }
  54.         //正常漫反射光照
  55.         Pass
  56.         {
  57.             Tags
  58.             {
  59.                 "LightMode"="ForwardBase"
  60.             }
  61.             CGPROGRAM
  62.             #pragma vertex vert
  63.             #pragma fragment frag
  64.             #include "UnityCG.cginc"
  65.             #include "UnityLightingCommon.cginc"
  66.             fixed4 _MainColor;
  67.  
  68.             struct a2v
  69.             {
  70.                 float4 vertex:POSITION;
  71.                 float3 normal:NORMAL;
  72.             };
  73.  
  74.             struct v2f
  75.             {
  76.                 float4 pos:SV_POSITION;
  77.                 float3 worldNormal :COLOR;
  78.             };
  79.  
  80.             v2f vert(a2v v)
  81.             {
  82.                 v2f o;
  83.  
  84.                 o.pos = UnityObjectToClipPos(v.vertex);
  85.  
  86.                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
  87.  
  88.                 return o;
  89.             }
  90.  
  91.             fixed4 frag(v2f i):SV_Target
  92.             {
  93.                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
  94.  
  95.                 fixed3 worldNormal = normalize(i.worldNormal);
  96.  
  97.                 fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
  98.  
  99.                 fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb *
  100.                     (dot(worldLight, worldNormal) * 0.5 + 0.5);
  101.                 return fixed4(ambient + diffuse, 1);
  102.             }
  103.             ENDCG
  104.         }
  105.  
  106.     }
  107. }

                 很明显，结果正确。        

        2.4 基于模板测试的描边效果

                也是两个Pass，第一个Pass把扩充后的模型模板值写进去，第二个Pass按原模型把更大的模板值更过即可，描边效果上面这个一样，就不演示了。

三、 一些问题

        以上是几个大写法，但这几个大写法都有些小问题，一是描边效果近大远小，一个是少顶点的描边使用扩充顶点和剔除正面都会出现的描边不贴合模型本身，         

        3.1 问题一的优化

                至于实现，大致就是将法线转换到投影空间下，这时候就能得出来，投影空间下的偏移值，在返回来加到顶点偏移上就行。       

  1. Shader "Custom/Test0"
  2. {
  3.     Properties
  4.     {
  5.         _MainColor("主颜色",Color)=(0,0,0,1)
  6.  
  7.         _OutlineColor("描边颜色",Color)=(1,1,1,1)
  8.         _OutlineArea("描边区域",Range(0,0.2))=2
  9.         _OutlineStrength("描边强度",Range(0,1))=1
  10.  
  11.     }
  12.     SubShader
  13.     {
  14.         Tags{"Queue"="Overlay"}
  15.         //模型扩充渲染
  16.         Pass
  17.         {
  18.             ZWrite off
  19.             CGPROGRAM
  20.             #pragma vertex vert
  21.             #pragma fragment frag
  22.             #include "UnityCG.cginc"
  23.             float4 _MainColor;
  24.             fixed4 _OutlineColor;
  25.             fixed _OutlineArea;
  26.             fixed _OutlineStrength;
  27.  
  28.             struct a2v
  29.             {
  30.                 float4 vertex:POSITION;
  31.                 float3 normal:NORMAL;
  32.             };
  33.  
  34.             struct v2f
  35.             {
  36.                 float4 pos:SV_POSITION;
  37.             };
  38.  
  39.  
  40.             v2f vert(a2v v)
  41.             {
  42.                 v2f o;
  43.                 float3 normal1=mul(unity_MatrixITMV,v.normal);
  44.                 float3 normal2=TransformViewToProjection(normal1);                
  45.                 o.pos = UnityObjectToClipPos(v.vertex);
  46.                 o.pos.xy+=normal2.xy*_OutlineArea;
  47.                 return o;
  48.             }            
  49.             
  50.             fixed4 frag():SV_Target
  51.             {                                
  52.                 return _OutlineColor*_OutlineStrength;
  53.             }
  54.             ENDCG
  55.         }
  56.         //正常漫反射光照
  57.         Pass
  58.         {
  59.             Tags
  60.             {
  61.                 "LightMode"="ForwardBase"
  62.             }
  63.             
  64.             CGPROGRAM
  65.             #pragma vertex vert
  66.             #pragma fragment frag
  67.             #include "UnityCG.cginc"
  68.             #include "UnityLightingCommon.cginc"
  69.             fixed4 _MainColor;
  70.  
  71.             struct a2v
  72.             {
  73.                 float4 vertex:POSITION;
  74.                 float3 normal:NORMAL;
  75.             };
  76.  
  77.             struct v2f
  78.             {
  79.                 float4 pos:SV_POSITION;
  80.                 float3 worldNormal :COLOR;
  81.             };
  82.  
  83.             v2f vert(a2v v)
  84.             {
  85.                 v2f o;
  86.  
  87.                 o.pos = UnityObjectToClipPos(v.vertex);
  88.  
  89.                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
  90.  
  91.                 return o;
  92.             }
  93.  
  94.             fixed4 frag(v2f i):SV_Target
  95.             {
  96.                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
  97.  
  98.                 fixed3 worldNormal = normalize(i.worldNormal);
  99.  
  100.                 fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
  101.  
  102.                 fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb *
  103.                     (dot(worldLight, worldNormal) * 0.5 + 0.5);
  104.                 return fixed4(ambient + diffuse, 1);
  105.             }
  106.             ENDCG
  107.         }
  108.  
  109.     }
  110. }

                结果：效果不展示了，变化有点小，但还是有的。

        4.2 问题二：                    

                     我们上面写的全是根据法线偏移，一旦少顶点就会出现这样的结果，解决办法也很简单，沿顶点方向偏移即可。        

  1. Shader "Custom/Test0"
  2. {
  3.     Properties
  4.     {
  5.         _MainColor("主颜色",Color)=(0,0,0,1)
  6.  
  7.         _OutlineColor("描边颜色",Color)=(1,1,1,1)
  8.         _OutlineArea("描边区域",Range(0,0.2))=2
  9.         _OutlineStrength("描边强度",Range(0,1))=1
  10.  
  11.     }
  12.     SubShader
  13.     {
  14.         Tags{"Queue"="Overlay"}
  15.         //模型扩充渲染
  16.         Pass
  17.         {
  18.             ZWrite off
  19.             CGPROGRAM
  20.             #pragma vertex vert
  21.             #pragma fragment frag
  22.             #include "UnityCG.cginc"
  23.             float4 _MainColor;
  24.             fixed4 _OutlineColor;
  25.             fixed _OutlineArea;
  26.             fixed _OutlineStrength;
  27.  
  28.             struct a2v
  29.             {
  30.                 float4 vertex:POSITION;
  31.                 float3 normal:NORMAL;
  32.             };
  33.  
  34.             struct v2f
  35.             {
  36.                 float4 pos:SV_POSITION;
  37.             };
  38.  
  39.       
  40.             v2f vert(a2v v)
  41.             {
  42.                 v2f o;
  43.                 v.vertex.xyz+=v.vertex.xyz*_OutlineArea;
  44.                 o.pos = UnityObjectToClipPos(v.vertex);                
  45.                 return o;
  46.             }
  47.             
  48.             fixed4 frag():SV_Target
  49.             {                                
  50.                 return _OutlineColor*_OutlineStrength;
  51.             }
  52.             ENDCG
  53.         }
  54.         //正常漫反射光照
  55.         Pass
  56.         {
  57.             Tags
  58.             {
  59.                 "LightMode"="ForwardBase"
  60.             }
  61.             
  62.             CGPROGRAM
  63.             #pragma vertex vert
  64.             #pragma fragment frag
  65.             #include "UnityCG.cginc"
  66.             #include "UnityLightingCommon.cginc"
  67.             fixed4 _MainColor;
  68.  
  69.             struct a2v
  70.             {
  71.                 float4 vertex:POSITION;
  72.                 float3 normal:NORMAL;
  73.             };
  74.  
  75.             struct v2f
  76.             {
  77.                 float4 pos:SV_POSITION;
  78.                 float3 worldNormal :COLOR;
  79.             };
  80.  
  81.             v2f vert(a2v v)
  82.             {
  83.                 v2f o;
  84.  
  85.                 o.pos = UnityObjectToClipPos(v.vertex);
  86.  
  87.                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
  88.  
  89.                 return o;
  90.             }
  91.  
  92.             fixed4 frag(v2f i):SV_Target
  93.             {
  94.                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
  95.  
  96.                 fixed3 worldNormal = normalize(i.worldNormal);
  97.  
  98.                 fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
  99.  
  100.                 fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb *
  101.                     (dot(worldLight, worldNormal) * 0.5 + 0.5);
  102.                 return fixed4(ambient + diffuse, 1);
  103.             }
  104.             ENDCG
  105.         }
  106.  
  107.     }
  108. }

       

      

四、屏幕后处理实现方式 

        后处理基于高斯模糊，而且整个过程基本是对渲染纹理的处理，第一步先渲染需要描边的物体（这里涉及到摄像机分层渲染， 然后进行高斯模糊，再和原图片做减法，留下只有模糊过的轮廓，再和整体图像做混合。

        脚本：        

  1. using System;
  2. using System.Collections;
  3. using System.Collections.Generic;
  4. using UnityEngine;
  5. using UnityEngine.Serialization;
  6.  
  7. [ExecuteInEditMode]
  8. public class RenderImage : MonoBehaviour
  9. {
  10.     //用于渲染需要描边层的摄像机
  11.     private GameObject cameraSecond;
  12.     
  13.     [Header("是否开启描边效果")] public bool isOutline = true;
  14.     
  15.     [Header("用于描边层提取的Shader")]public Shader shader0;    
  16.     [Header("实现描边的Shader")] public Shader shader1;
  17.     
  18.     private Camera _camera;
  19.     private RenderTexture _cSRenderTexture;
  20.  
  21.     private Material _material;
  22.     
  23.     [Header("迭代次数")] [Range(0, 10)] public int iterations = 3;
  24.  
  25.     [Header("模糊范围")] [Range(0.2f, 20f)] public float blurArea = 0.6f;
  26.  
  27.     [Header("降采样")] [Range(1, 8)] private int downSample = 2;
  28.     
  29.     private void Awake()
  30.     {
  31.         
  32.         cameraSecond = GameObject.Find("cameraSecond");
  33.         cameraSecond.transform.SetParent(this.transform.parent);
  34.         _camera = cameraSecond.GetComponent<Camera>();
  35.         _material = new Material(shader1);
  36.     }
  37.  
  38.     //在这个摄像机渲染之前，先把描边层的渲染了
  39.     private void OnPreRender()
  40.     {
  41.         _cSRenderTexture = CustomDownSample(_cSRenderTexture);
  42.         _camera.targetTexture = _cSRenderTexture;
  43.         //着色器替换，使用shader0中的RenderType类型的SubShader进行渲染
  44.         _camera.RenderWithShader(shader0, "RenderType");
  45.  
  46.     }
  47.     
  48.     private void OnRenderImage(RenderTexture src, RenderTexture dest)
  49.     {
  50.         if (_material != null&& isOutline )
  51.         {
  52.  
  53.             int rtW = src.width / downSample;
  54.             int rtH = src.height / downSample;
  55.  
  56.             RenderTexture buffer0 = RenderTexture.GetTemporary(rtW, rtH);
  57.             
  58.             buffer0.filterMode = FilterMode.Bilinear;
  59.             
  60.             Graphics.Blit(_cSRenderTexture, buffer0);
  61.             //不停的模糊处理
  62.             for (int i = 0; i < iterations; i++)
  63.             {
  64.                 _material.SetFloat("_BlurArea", 1.0f + i * blurArea);
  65.                 
  66.                 RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH);
  67.                 //第一个Pass用于横向模糊
  68.                 Graphics.Blit(buffer0, buffer1, _material, 0);
  69.  
  70.                 RenderTexture.ReleaseTemporary(buffer0);
  71.                 
  72.                 buffer0 = buffer1;
  73.  
  74.                 buffer1 = RenderTexture.GetTemporary(rtW, rtH);
  75.                 //第二个Pass用于纵向模糊
  76.                 Graphics.Blit(buffer0, buffer1, _material, 1);
  77.  
  78.                 RenderTexture.ReleaseTemporary(buffer0);
  79.  
  80.                 buffer0 = buffer1;
  81.             }
  82.             
  83.             //原图像做减法，提取出边缘
  84.             //此时buffer0中存放着模糊处理后的区域
  85.             _material.SetTexture("_SecondTex", buffer0);
  86.             RenderTexture buffer2 = RenderTexture.GetTemporary(rtW, rtH);
  87.             //第三个Pass用于获取只包含边缘的纹理
  88.             Graphics.Blit(_cSRenderTexture, buffer2, _material, 2);
  89.             RenderTexture.ReleaseTemporary(buffer0);
  90.             buffer0 = buffer2;
  91.             
  92.             
  93.             //最后和该摄像机进行混合
  94.             _material.SetTexture("_SecondTex",buffer0);
  95.             Graphics.Blit(src, dest, _material, 3);
  96.             RenderTexture.ReleaseTemporary(buffer0);
  97.         }
  98.         else
  99.         {
  100.             Graphics.Blit(src, dest);
  101.         }
  102.         cameraSecond.SetActive(true);
  103.     }
  104.  
  105.     private RenderTexture CustomDownSample(RenderTexture rT)
  106.     {
  107.         //把上一帧的申请空间先释放了
  108.         RenderTexture.ReleaseTemporary(rT);
  109.         rT = RenderTexture.GetTemporary(Screen.width / downSample, Screen.height / downSample);
  110.         return rT;
  111.     }
  112. }

              Shader:

                用于描边层提取的Shader：                

  1. Shader "Custom/Test1"
  2. {
  3.     Properties
  4.     {
  5.         //_OutlineColor("描边颜色",Color)=(1,0,1,1)
  6.     }
  7.     //用于着色器替换
  8.     SubShader
  9.     {
  10.         Tags
  11.         {
  12.             "RenderType"="Opaque"
  13.         }
  14.         Pass
  15.         {
  16.             CGPROGRAM
  17.             #pragma vertex vert
  18.             #pragma fragment frag
  19.             #include "UnityCG.cginc"
  20.             fixed4 _OutlineColor;
  21.  
  22.             struct a2v
  23.             {
  24.                 float4 vertex:POSITION;
  25.             };
  26.  
  27.             struct v2f
  28.             {
  29.                 float4 pos:SV_POSITION;
  30.             };
  31.  
  32.             v2f vert(a2v v)
  33.             {
  34.                 v2f o;
  35.                 o.pos = UnityObjectToClipPos(v.vertex);
  36.                 return o;
  37.             }
  38.  
  39.             fixed4 frag():SV_Target
  40.             {
  41.                //描边颜色在物体材质上调
  42.                return _OutlineColor;  
  43.             }
  44.             ENDCG
  45.         }
  46.     }
  47. }

                要描边的物体Shader：                

  1. Shader "Custom/Test2"
  2. {
  3.     Properties
  4.     {
  5.         _MainColor("主颜色",Color)=(0,0,0,1)
  6.         _OutlineColor("描边颜色",Color)=(1,1,1,1)
  7.     }
  8.     SubShader
  9.     {
  10.         Tags
  11.         {
  12.             "RenderType"="Opaque"
  13.         }
  14.         //正常漫反射光照
  15.         Pass
  16.         {
  17.             Tags
  18.             {
  19.                 "LightMode"="ForwardBase"
  20.             }
  21.             CGPROGRAM
  22.             #pragma vertex vert
  23.             #pragma fragment frag
  24.             #include "UnityCG.cginc"
  25.             #include "UnityLightingCommon.cginc"
  26.             fixed4 _MainColor;
  27.  
  28.             struct a2v
  29.             {
  30.                 float4 vertex:POSITION;
  31.                 float3 normal:NORMAL;
  32.             };
  33.  
  34.             struct v2f
  35.             {
  36.                 float4 pos:SV_POSITION;
  37.                 float3 worldNormal :COLOR;
  38.             };
  39.  
  40.             v2f vert(a2v v)
  41.             {
  42.                 v2f o;
  43.  
  44.                 o.pos = UnityObjectToClipPos(v.vertex);
  45.  
  46.                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
  47.  
  48.                 return o;
  49.             }
  50.  
  51.             fixed4 frag(v2f i):SV_Target
  52.             {
  53.                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
  54.  
  55.                 fixed3 worldNormal = normalize(i.worldNormal);
  56.  
  57.                 fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
  58.  
  59.                 fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb *
  60.                     (dot(worldLight, worldNormal) * 0.5 + 0.5);
  61.                 return fixed4(ambient + diffuse, 1);
  62.             }
  63.             ENDCG
  64.         }
  65.     }
  66.     
  67.     
  68. }

        真正的重头戏：        

  1. Shader "Custom/Test0"
  2. {
  3.     Properties
  4.     {
  5.         _MainTex("渲染纹理",2D)="white"{}
  6.         _SecondTex("",2D)="white"{}
  7.         _BlurArea("模糊范围",float)=1.0
  8.     }
  9.     SubShader
  10.     {
  11.         //类似C++的头文件，可以减少重复代码    
  12.         CGINCLUDE
  13.         #include "UnityCG.cginc"
  14.  
  15.         sampler2D _MainTex;
  16.         float4 _MainTex_TexelSize;
  17.         float _BlurArea;
  18.  
  19.         struct a2v
  20.         {
  21.             float4 vertex:POSITION;
  22.             float2 texcoord:TEXCOORD0;
  23.         };
  24.  
  25.         struct v2f
  26.         {
  27.             float4 pos:SV_POSITION;
  28.             float2 uv[5]:TEXCOORD0;
  29.         };
  30.  
  31.         v2f vertVertical(a2v v)
  32.         {
  33.             v2f o;
  34.             o.pos = UnityObjectToClipPos(v.vertex);
  35.             //将纹理坐标计算放在顶点着色器中，由于传递是线性插值，所以并不会影响结果
  36.             o.uv[0] = v.texcoord;
  37.             o.uv[1] = v.texcoord + float2(0, _MainTex_TexelSize.y * 1.0) * _BlurArea;
  38.             o.uv[2] = v.texcoord - float2(0, _MainTex_TexelSize.y * 1.0) * _BlurArea;
  39.             o.uv[3] = v.texcoord + float2(0, _MainTex_TexelSize.y * 2.0) * _BlurArea;
  40.             o.uv[4] = v.texcoord - float2(0, _MainTex_TexelSize.y * 2.0) * _BlurArea;
  41.  
  42.             return o;
  43.         }
  44.  
  45.         v2f vertHorizontal(a2v v)
  46.         {
  47.             v2f o;
  48.             o.pos = UnityObjectToClipPos(v.vertex);
  49.             //注意这里是x方向的偏移
  50.             o.uv[0] = v.texcoord;
  51.             o.uv[1] = v.texcoord + float2(_MainTex_TexelSize.x * 1.0, 0) * _BlurArea;
  52.             o.uv[2] = v.texcoord - float2(_MainTex_TexelSize.x * 1.0, 0) * _BlurArea;
  53.             o.uv[3] = v.texcoord + float2(_MainTex_TexelSize.x * 2.0, 0) * _BlurArea;
  54.             o.uv[4] = v.texcoord - float2(_MainTex_TexelSize.x * 2.0, 0) * _BlurArea;
  55.  
  56.             return o;
  57.         }
  58.  
  59.         fixed4 frag_Blur(v2f i):SV_Target
  60.         {
  61.             float weight[3] = {0.4026, 0.2442, 0.0545};
  62.             fixed3 color = tex2D(_MainTex, i.uv[0]) * weight[0];
  63.             //权重计算
  64.             for (int j = 1; j < 3; j++)
  65.             {
  66.                 color += tex2D(_MainTex, i.uv[j * 2 - 1]) * weight[j];
  67.                 color += tex2D(_MainTex, i.uv[j * 2]) * weight[j];
  68.             }
  69.             return fixed4(color, 1);
  70.         }
  71.         ENDCG
  72.  
  73.         //用于横向模糊
  74.         Pass
  75.         {
  76.             NAME "GAUSSIAN_VERTICAL"
  77.             CGPROGRAM
  78.             #pragma vertex vertHorizontal
  79.             #pragma fragment frag_Blur
  80.             ENDCG
  81.         }
  82.         //用于纵向模糊
  83.         Pass
  84.         {
  85.             NAME "GAUSSIAN_HORIZONTAL"
  86.             CGPROGRAM
  87.             #pragma vertex vertVertical
  88.             #pragma fragment frag_Blur
  89.             ENDCG
  90.         }
  91.         //用于提取模糊后的边缘
  92.         Pass
  93.         {
  94.             CGPROGRAM
  95.             #pragma vertex vert
  96.             #pragma fragment frag
  97.             //存放着模糊后的纹理
  98.             sampler2D _SecondTex;
  99.             struct a2v_1
  100.             {
  101.                 float4 vertex:POSITION;
  102.                 float2 texcoord:TEXCOORD0;
  103.             };
  104.  
  105.             struct v2f_1
  106.             {
  107.                 float4 pos:SV_POSITION;
  108.                 float2 uv:TEXCOORD0;
  109.             };
  110.             v2f_1 vert(a2v_1 v)
  111.             {
  112.                 v2f_1 o;
  113.                 o.pos=UnityObjectToClipPos(v.vertex);
  114.                 o.uv=v.texcoord;
  115.                 return o;
  116.             }
  117.             fixed4 frag(v2f_1 i):SV_Target
  118.             {
  119.                 fixed3 texResult1=tex2D(_MainTex,i.uv);
  120.                 fixed3 texResult2=tex2D(_SecondTex,i.uv);
  121.                 return fixed4(texResult2-texResult1,1);
  122.             }
  123.             ENDCG
  124.         }
  125.         //用于混合原图像
  126.         Pass
  127.         {
  128.             CGPROGRAM
  129.             #pragma vertex vert
  130.             #pragma fragment frag
  131.             //存放着提取后的纹理
  132.             sampler2D _SecondTex;
  133.             struct a2v_1
  134.             {
  135.                 float4 vertex:POSITION;
  136.                 float2 texcoord:TEXCOORD0;
  137.             };
  138.  
  139.             struct v2f_1
  140.             {
  141.                 float4 pos:SV_POSITION;
  142.                 float2 uv:TEXCOORD0;
  143.             };
  144.             v2f_1 vert(a2v_1 v)
  145.             {
  146.                 v2f_1 o;
  147.                 o.pos=UnityObjectToClipPos(v.vertex);
  148.                 o.uv=v.texcoord;
  149.                 return o;
  150.             }
  151.             fixed4 frag(v2f_1 i):SV_Target
  152.             {
  153.                 fixed3 texResult1=tex2D(_MainTex,i.uv);
  154.                 fixed3 texResult2=tex2D(_SecondTex,i.uv);
  155.                 return fixed4(texResult2+texResult1,1);
  156.             }
  157.             ENDCG
  158.             
  159.         }
  160.     }
  161. }

   

                效果很不错，而且这个描边还是有点渐变的味。         

五、基于深度纹理的实现

                UnityShader基础（八）——深度纹理与法线纹理_implosion98的博客-CSDN博客

六、还有可以基于自定义边缘风格化渲染，很离谱。                  

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/107900
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号