解读Unity中的CG编写Shader系列3——表面剔除与剪裁模式

在上一个样例中，我们得到了由mesh组件传递的信息经过数学转换至合适的颜色区间以颜色的形式着色到物体上。

这篇文章将要在此基础上研究片段的擦除(discarding fragments)和前面剪裁、后面剪裁(front face culling and back face culling)来达到透明效果。

当一个mesh组件的信息被传递后，我们能够通过代码决定哪些部分渲染(render)出来。而哪些部分不要。这个过程就像把那些不要的部分剔除了，我们看不到他。尽管他的mesh信息还在。可是我们的GPU不会去处理它。肯定比剔除前GPU的性能消耗要低。

这个过程就好比我们的mesh组件是一个透明的膜，我们如果这个胶纸我们根本看不到，而片段着色器在着色的时候像毛笔选择性地上色。最后的效果是我们可能看到膜的一部分是可见的，可是不见的地方，膜还是存在的，仅仅是我们没有给他上色。我们既看不看他们，也不须要再他们上面画宝贵的墨水(GPU并行处理能力)

所以我们能够来改造一下上一个样例中的经度绿色假彩色球体，将其经度>0.5的部分擦掉,那么代码应该对应改动为:

Pass{
		Cull Off // 关掉裁剪模式，作用后面再说
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "UnityCG.cginc"
		struct vertexOutput {
			float4 pos : SV_POSITION;
			//由顶点着色器输出mesh信息中的纹理坐标，这个坐标是以对象为坐标系的
			float4 posInObjectCoords : TEXCOORD0;
		};
		vertexOutput vert(appdata_full input)
		{
			vertexOutput output;
			output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
			//直接把texcoord传递给片段着色器
			output.posInObjectCoords = input.texcoord;
			return output;
		}
		float4 frag(vertexOutput input) : COLOR
		{
			//当坐标的y值大于0.5的时候擦除片段
			if (input.posInObjectCoords.y > 0.5)
			{
				discard;
			}

			//其余部分仍然按y值大小生成经度绿色球
			return float4(0.0, input.posInObjectCoords.y , 0.0, 1.0);
		}
		ENDCG
		} 

那么把这个shader给material，然后给一个球体能够看到我们上次见到的绿色假彩色球仅仅剩下南半球了:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW9iYW5jaGVuZ3NodWFuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

从正面看起来像是实心的

略微倾斜一下从上面看过去能够看到球体内部是空心的，所以我用膜和毛笔来比喻这个render过程。

我们来把球体换成立方体，看看是什么样子:

能够发现这是一个诡异的立方体，立方体的六个面分别仅仅绘制了一半，且都是以下的一半。

为啥立方体和球体上的效果区别这么大呢？

由于立方体是直角坐标系，球体是极坐标系啊…………扇耳光~~~还给老师了吗 吗吗吗吗吗

同理我们将>0.5改为<0.5，就能够得到球体的北半球。

这是最简单的表面剔除(cuteaway)

更好一点的表面剔除是将片段的位置从对象坐标系转换到世界坐标系，然后依据基础矩阵进行变换能够计算出哪些片段位于其它球体的内部(原始半径是0.5)，然后再将位于其它球体内部的表面剔除，这种话假如两个球互相重叠一部分，那么即使两个球互相绕着自己的球心怎么旋转。没有重叠的部分都会被绘制，而重叠的部分不会被绘制，反正我们看不到，这样省性能。

由于即使球体旋转。物体的坐标经过unity的内建矩阵变换为世界坐标后，重叠部分的世界坐标是固定的。所以不会出现两个球体重叠部分表面被裁剪后，旋转一个球之后慢慢看到被裁剪的那个洞了。

(由于前面的方法是按对象坐标系裁剪的)

前面与后面剪裁

刚刚的代码中我们看到了Cull Off。这行代码位于CGPROGRAM标记之前，所以他不属于CG的范畴。它是我们Unity中的ShaderLab的指令。所以他不须要分号来结尾。

Cull Off 即为关掉三角形剪裁(为何突然冒出来了三角形，脑补一下，我们的立体图像在计算机中是以三角形拼凑的，正由于如此我们的三维图形才会产生锯齿，那都是三角形的功劳啊)

Cull Front 为前面(外部)剪裁

Cull Back 为后面(内部)剪裁，而这是我们全部Shader的默认模式，也就是说假设Shader不是你自己写的。非常可能转动我们的半球的时候，你仅仅看的到前方的曲面而不是半球曲面,不信你能够拖个模型看看

至于为何默认是后面剪裁呢。由于大部分情况下我们的渲染都是对整个三维体的表面进行的。那么既然表面所有被渲染，你就看不到正背对着你的部分。所以默认后面剪裁会节省非常多物理性能啊！

只是既然我们将表面进行了擦除。那么我们能够透过被擦除的部分看到背面的内表面，那么我们应该改动这个剪裁模式了，就像一个房子有房顶。我们从正上方看不到房子里面的地板，所以地板应该属于剪裁的范畴。可是假设我们把房顶擦除了(推开房顶),还看不到地板那就有点恐怖了，这样的事情就要切换剪裁模式

为了更直观的明确这两种模式。我们改动上面的代码为内部/外部剪裁的双通道(Pass)。而且每一个Pass中的最后着色不同(红和绿)

要明确一点，Unity中的Shader仅仅会运行一个SubShader，可是会运行全部的Pass

改动后的代码：

Pass{
		Cull front // 外部剪裁，那么这个通道能够理解为是给篮球的内表面上色
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "UnityCG.cginc"
		struct vertexOutput {
			float4 pos : SV_POSITION;
			//由顶点着色器输出mesh信息中的纹理坐标，这个坐标是以对象为坐标系的
			float4 posInObjectCoords : TEXCOORD0;
		};
		vertexOutput vert(appdata_full input)
		{
			vertexOutput output;
			output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
			//直接把texcoord传递给片段着色器
			output.posInObjectCoords = input.texcoord;
			return output;
		}
		float4 frag(vertexOutput input) : COLOR
		{
			//当坐标的y值大于0.5的时候擦除片段
			if (input.posInObjectCoords.y > 0.5)
			{
				discard;
			}

			//其余部分仍然按y值大小生成经度绿色球
			return float4(0.0, input.posInObjectCoords.y , 0.0, 1.0);
		}
		ENDCG
		} 

		Pass{
		Cull back //内部剪裁。那么这个通道能够理解为是给篮球的外表面上色
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "UnityCG.cginc"
		struct vertexOutput {
			float4 pos : SV_POSITION;
			//由顶点着色器输出mesh信息中的纹理坐标，这个坐标是以对象为坐标系的
			float4 posInObjectCoords : TEXCOORD0;
		};
		vertexOutput vert(appdata_full input)
		{
			vertexOutput output;
			output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
			//直接把texcoord传递给片段着色器
			output.posInObjectCoords = input.texcoord;
			return output;
		}
		float4 frag(vertexOutput input) : COLOR
		{
			//当坐标的y值大于0.5的时候擦除片段
			if (input.posInObjectCoords.y > 0.5)
			{
				discard;
			}

			//其余部分仍然按y值大小生成经度红色球
			return float4(input.posInObjectCoords.y, 0.0 , 0.0, 1.0);
		}
		ENDCG
		} 

我们完毕了一个拥有两个Pass的Shader，如今看看球体是什么样子:

从顶部往下看。因为全然垂直看下去我们不知道这个球体的凹进去的还是凸出来的。仿佛还是我们上个样例中的绿色经度球，

我们再从底部网上看:

我们还是不知道这个红黑部分是凹的还是凸的，毕竟这是个半球，垂直半球去看没啥发现

我们再从正面偏上看过去:

可见绿黑部分是凹进去的内表面，红黑部分是凸起的外表面~

至此，我们已经能够随心所欲地控制我们的表面哪些地方可见或者不可见啦。

接下来CG还有更奇妙的地方等待我们去发现~

假设我的博客对您有帮助或者您有不论什么疑问，欢迎增加重庆u3d交流QQ群我会给您解答：68994667，也能够加群与我们一同交流技术