Unity ShaderLab开发实战（四）描边

最新推荐文章于 2024-08-08 16:50:43 发布

淡泊以致远

最新推荐文章于 2024-08-08 16:50:43 发布

阅读量2.8k

点赞数 3

分类专栏： Unity Shader

本文链接：https://blog.csdn.net/jfy307596479/article/details/84936381

版权

本文详细介绍了如何使用Unity ShaderLab通过面剔除实现描边效果。从最简单的沿法线挤出物体到解决重叠物体、轮廓不连续和模型空间原点问题，逐步优化描边算法，最后通过两个Pass中和处理立方体棱边的描边问题，实现稳定的描边效果。

摘要由CSDN通过智能技术生成

之前可能在面剔除中提到过，面剔除可以用来实现描边效果。（以下效果图来自Unity3D ShaderLab开发实战详解）

原理：这是一个最简单的描边，使用面剔除：Cull指令，上图中，最左边的球使用的是Cull Front，中间的使用Cull Back。最右边的球第一个Pass使用了Cull Front并且将球体沿法线挤出一点点，第二个Pass使用Cull Back正常渲染，从而产生了描边效果。下面开始讲一下各种描边。

1.最简单的方式，一个pass讲物体沿法线挤出，形成轮廓。

效果：

代码：

Shader "Tut/Shader/Toon/Outline_1" {
   Properties {
       _Outline("Outline",range(0,0.2))=0.02
   }
   SubShader {
       pass{
       Tags{"LightMode"="Always"}
       Cull Off
       ZWrite Off
       CGPROGRAM
       #pragma vertex vert
       #pragma fragment frag
       #include "UnityCG.cginc"
       float _Outline;
       struct v2f {
           float4 pos:SV_POSITION;
       };

       v2f vert (appdata_full v) {
           v2f o;
           v.vertex.xyz+=v.normal*_Outline;
           o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
           return o;
       }
       float4 frag(v2f i):COLOR
       {
           float4 c=0;
           return c;
       }
       ENDCG
       }//end of pass
       pass{
       Tags{"LightMode"="ForwardBase"}
       CGPROGRAM
       #pragma vertex vert
       #pragma fragment frag
       #include "UnityCG.cginc"

       float4 _LightColor0;
       struct v2f {
           float4 pos:SV_POSITION;
           float3 lightDir:TEXCOORD0;
           float3 viewDir:TEXCOORD1;
           float3 normal:TEXCOORD2;
       };

       v2f vert (appdata_full v) {
           v2f o;
           o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
           o.normal=v.normal;
           o.lightDir=ObjSpaceLightDir(v.vertex);
           o.viewDir=ObjSpaceViewDir(v.vertex);

           return o;
       }
       float4 frag(v2f i):COLOR
       {
           float4 c=1;
           float3 N=normalize(i.normal);
           float3 viewDir=normalize(i.viewDir);
           float diff=dot(N,i.lightDir);
           diff=(diff+1)/2;
           diff=smoothstep(diff/12,1,diff);
           c=_LightColor0*diff;
           return c;
       }
       ENDCG
       }
   }
}

这个方法有两个问题：1.重叠物体区域没有描边，因为关闭了ZWrite，后面渲染的物体根据ZTest的结果将物体自己渲染输出写入，把轮廓擦掉了；2.轮廓的粗细和相机远近有关，距离越远，轮廓越细；3.有些地方轮廓是间断的，比如上图中cube，相邻两个面的法线方向是分离的，再沿法线挤出去后当然就被分开了。

2.先解决第一和第二个问题，打开ZWrite，第一个问题就解决了，第二个问题我们希望最终的输出是在屏幕上看到的那样挤出来，而不是模型上，不希望考虑镜头的远近，也就是在视空间下挤。

效果：

代码：

Shader "Tut/Shader/Toon/Outline_1x" {
   Properties {
       _Outline("Out line",range(0,0.1))=0.02
   }
   SubShader {
       pass{
       Tags{"LightMode"="Always"}
       Cull Front
       ZWrite On
       CGPROGRAM
       #pragma vertex vert
       #pragma fragment frag
       #include "UnityCG.cginc"
       float _Outline;
       struct v2f {