(十六)unity shader之——————高级纹理之渲染纹理（镜子、玻璃效果）_shader 镜子效果

在之前的学习中，一个摄像机的渲染结果会输出到颜色缓冲中，并显示到我们的屏幕上。现在的GPU允许我们把整个三维场景渲染到一个中间缓冲中，即渲染目标纹理（Render Target Texture,RTT），而不是传统的帧缓冲或后备缓冲。与之相关的是多重渲染目标（Multiple Render Target,MRT），这种技术指的是GPU允许我们把场景同时渲染到多个渲染目标纹理中，而不再需要为每个渲染目标纹理单独渲染完整的场景，延迟渲染就是使用多重渲染目标的一个应用。

unity为渲染目标纹理定义了一个专门的纹理类型——渲染纹理（Render Texture）。在unity中使用渲染纹理通常有两种方式：

1.一种方式在Project目录下创建一个渲染纹理，然后把某个摄像机的渲染目标设置成该渲染纹理，这样一来该摄像机的渲染结果会实时更新到渲染纹理中，而不会显示在屏幕上。使用这种方法，我们还可以选择渲染纹理的分辨率、滤波模式等纹理属性。

2.另一种方式是在屏幕后处理时使用GrabPass命令或OnRenderImage函数来获取当前屏幕图像，unity会把这回屏幕图像放到一张 和屏幕分辨率等同的渲染纹理中，然后我们可以在自定义的Pass中把他们当成普通的纹理来处理，从而实现各种屏幕特效。

一、镜子效果

首先在project视图下创建一个渲染纹理，然后为了得到从镜子出发观察到的场景图像，还需要创建一个摄像机，并调整它的位置、裁剪平面、视角等，使得它的显示图像是我们希望的镜子图像。由于这个摄像机不需要直接显示在屏幕上，而是用于渲染到纹理。因此我们把刚刚创建的Render Texture拖拽到该摄像机的Target Texture上。

镜子效果的实现是使用一个渲染纹理作为输入属性，并把该渲染纹理在水平方向上翻转后直接显示到物体上即可。

实现：

1.声明一个纹理属性，它对应了由镜子摄像机渲染得到的渲染纹理（之前创建的render texture纹理面板赋值给它）：

Properties {
		_MainTex ("Main Tex", 2D) = "white" {}
	}

2.在顶点着色器中计算纹理坐标：

v2f vert(a2v v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				
				o.uv = v.texcoord;
				// Mirror needs to filp x
				o.uv.x = 1 - o.uv.x;
				
				return o;
			}

在上面的代码中，我们翻转了x分量的纹理坐标，这是因为镜子里显示的图像都是左右相反的。

3.在片元着色器中对渲染纹理进行采样和输出：

fixed4 frag(v2f i) : SV_Target {
				return tex2D(_MainTex, i.uv);
			}

在上面的实现中，我们把渲染纹理的分辨率大小设置为256X256，有时这样的分辨率会使图像模糊不清，此时我们可以使用更高的分辨率或更多的抗锯齿采样等。但需要注意的是，更高的分辨率会影响带宽和性能，我们应该尽量使用较小的分辨率。

二、玻璃效果

在unity中，我们还可以在unity shader中使用一种特殊的Pass来完成获取屏幕图像的目的，也就是GrabPass。当我们在shader中定义了一个GrabPass后，unity会把当前屏幕的图像绘制在一张纹理中，以便我们在后续的Pass中访问它。我们通常会使用GrabPass来实现诸如玻璃等透明材质的模拟，与使用简单的透明混合不同，使用GrabPass可以让我们对该物体后面的图像进行更复杂的处理，例如使用法线来模拟折射效果，而不再是简单的和原屏幕颜色进行混合。

需要注意的是使用GrabPass的时候，我们需要额外小心物体的渲染队列设置。正如之前所说，GrabPass通常用于渲染透明物体，尽管代码里并不包含混合指令，但我们往往需要把物体的渲染队列设置成透明队列（即"Queue"="Transparent"）。这样才可以保证当渲染该物体时，所有的不透明物体都已经被绘制在屏幕上，从而获取正确的屏幕图像。

在本节将会使用GrassPass来模拟一个玻璃效果。这种效果的实现非常简单，首先使用一张法线纹理来修改模型的法线信息，然后使用之前的立方体纹理反射方法，通过一个cubemap来模拟玻璃的反射，而在模拟折射时，则使用了GrabPass获取玻璃后面的屏幕图像，并使用切线空间下的法线对屏幕纹理坐标便宜后，再对屏幕图像进行采样来模拟近似的折射效果。

实现：

1.首先为了得到本场景适用的环境映射纹理，我们使用之前章节实现的创建立方体纹理的脚本工具来创建这个cubemap。

2.声明属性：

Properties {
		_MainTex ("Main Tex", 2D) = "white" {}
		_BumpMap ("Normal Map", 2D) = "bump" {}
		_Cubemap ("Environment Cubemap", Cube) = "_Skybox" {}
		_Distortion ("Distortion", Range(0, 100)) = 10
		_RefractAmount ("Refract Amount", Range(0.0, 1.0)) = 1.0
	}

其中_MainTex是该玻璃的材质纹理，默认为白色纹理，_BumpMap是玻璃的法线纹理，_Cubemap用于模拟反射的环境纹理，_Distortion则用于控制模拟折射时图像的扭曲程度，_RefractAmount用于控制折射程度，当_RefractAmount值为0时，该玻璃只包含反射效果，当_RefractAmount值为1的时，该玻璃只包括折射效果。

3.定义相应的渲染队列，并使用GrabPass来获取屏幕图像：

SubShader {
		// We must be transparent, so other objects are drawn before this one.
		Tags { "Queue"="Transparent" "RenderType"="Opaque" }
		
		// This pass grabs the screen behind the object into a texture.
		// We can access the result in the next pass as _RefractionTex
		GrabPass { "_RefractionTex" }

我们首先在SubShader的标签中将渲染队列设置成Transparent，尽管在后面的RenderType被设置为了Opaque。这两者看似矛盾，但实际上服务于不同的需求。把Queue设置成Transparent可以确保该物体渲染时，其他所有的不透明物体都已经被渲染到屏幕上了。否则就可能无法正确得到“透过玻璃看到的图像”。而设置RenderType则是为了在使用着色器替换时，该物体可以在需要时被正确渲染。这通常发生在我们需要得到摄像机的深度和法线纹理时。

随后我们通过关键词GrabPass定义了一个抓取屏幕图像的Pass。在这个Pass中我们定义了一个字符串，该字符串内部的名称决定了抓取得到的屏幕图像将会被存入哪个纹理中，实际上我们可以省略声明该字符串，但直接声明纹理名称的方法往往可以得到更高的性能。

4.定义渲染玻璃所需的Pass，为了在shader中访问各个属性，首先定义他们对应的变量：

sampler2D _MainTex;
			float4 _MainTex_ST;
			sampler2D _BumpMap;
			float4 _BumpMap_ST;
			samplerCUBE _Cubemap;
			float _Distortion;
			fixed _RefractAmount;
			sampler2D _RefractionTex;
			float4 _RefractionTex_TexelSize;

需要注意的是，我们还定义了_RefractionTex和_RefractionTex_TexelSize变量，这对应了在使用GrabPass时指定的纹理名称。_RefractionTex_TexelSize可以让我们得到该纹理的纹素大小，例如一个大小为256X512的纹理，它的纹素大小为(1/256,1/512)。我们需要在对屏幕图像的采样坐标进行偏移时使用该变量。

5.我们首先需要定义顶点着色器：

v2f vert (a2v v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				
				o.scrPos = ComputeGrabScreenPos(o.pos);
				
				o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
				o.uv.zw = TRANSFORM_TEX(v.texcoord, _BumpMap);
				
				float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;  
				fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);  
				fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);  
				fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w; 
				
				o.TtoW0 = float4(worldTangent.x, worldBinormal.x, worldNormal.x, worldPos.x);  
				o.TtoW1 = float4(worldTangent.y, worldBinormal.y, worldNormal.y, worldPos.y);  
				o.TtoW2 = float4(worldTangent.z, worldBinormal.z, worldNormal.z, worldPos.z);  
				
				return o;
			}

在进行了必要的顶点坐标变换后，我们通过调用内置的ComputerGrabScreenPos函数来得到对应被抓取的屏幕图像的采样坐标。接着计算了_MainTex和_BumpMap的采样坐标，并把它们分别存储在一个float4类型变量的xy和zw分量中。由于我们需要在片元着色器中把法线方向从切线空间（由法线纹理采样得到）变换到世界空间下，以便对Cubemap进行采样，因此我们需要在这里计算该顶点对应的从顶点对应的从切线空间到世界空间的变换矩阵，并把该矩阵的每一行分别存储在TtoW0,TtoW1和TtoW2的xyz分量中。这里面使用的数学方法就是，得到切线空间下的3个坐标轴(xyz轴分别对应了切线、副切线和法线的方向)在世界空间下的表示，再把它们依次按列组成一个变换矩阵即可。TtoW0等值的w轴同样被利用起来，用来存储世界空间下的顶点坐标。

6.然后定义片元着色器：

fixed4 frag (v2f i) : SV_Target {		
				float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
				fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));
				
				// Get the normal in tangent space
				fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));	
				
				// Compute the offset in tangent space
				float2 offset = bump.xy * _Distortion * _RefractionTex_TexelSize.xy;
				i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;
				fixed3 refrCol = tex2D(_RefractionTex, i.scrPos.xy/i.scrPos.w).rgb;
				
				// Convert the normal to world space
				bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));
				fixed3 reflDir = reflect(-worldViewDir, bump);
				fixed4 texColor = tex2D(_MainTex, i.uv.xy);
				fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb;
				
				fixed3 finalColor = reflCol * (1 - _RefractAmount) + refrCol * _RefractAmount;
				
				return fixed4(finalColor, 1);
			}

我们首先通过TtoW0等变量的w分量得到世界坐标，并用该值得到该片元对应的视角方向。随后对法线纹理进行采样，得到切线空间下的法线方向。我们使用该值和_Distortion属性以及_RefractionTex_TexelSize来对屏幕图像的采样坐标进行偏移，模拟折射效果。_Distortion值越大，偏移量越大，玻璃背后的物体看起来变形程度越大，在这里我们选择使用切线空间下的法线方向来进行偏移，是因为该空间下的法线可以反映顶点局部空间下的法线方向。随后我们对scrPos透视除法得到真正的屏幕坐标，再使用该坐标对抓取的屏幕图像_RefractionTex进行采样，得到模拟的折射颜色。

之后我们把法线方向从切换空间变换到了世界空间下（使用变换矩阵的每一行，即TtoW0,TtoW1和TtoW2,分别和法线方向点乘，构成新的法线方向），并据此得到视角方向相对于法线方向的反射方向。随后我们使用反射方向对Cubemap进行采样，并把结果和主纹理颜色相乘后得到反射颜色。

最后我们使用_RefractAmount属性对反射和折射颜色进行混合，作为最终的输出颜色。

 

在前面的实现中，我们在GrabPass中使用了一个字符串指明了被抓取的屏幕图像将会存储在哪个名称的纹理中，实际上GrabPass支持两种形式：

1.直接使用GrabPass{}，然后在后续的Pass中直接使用_GrabTexture来访问屏幕图像。但是，当场景中有多个物体都使用了这样的形式来抓取屏幕时，这种方法的性能消耗比较大，因为对于每一个使用它的物体，unity都会为他单独进行一次昂贵的屏幕抓取操作。但这种方法可以让每个物体得到不同的屏幕图像，这取决于它们的渲染队列及渲染它们时当前的屏幕缓冲中的颜色。

 2.使用GrabPass{“TextureName”}，我们可以在后续的pass中使用TextureName来访问屏幕图像。使用这种方法同样可以抓取屏幕，但unity只会在每一帧时为第一个使用名为TextureName的纹理的物体执行一次抓取屏幕的操作，而这个纹理同样可以在其他Pass中被访问。这种方法更高效，因为不管场景中有多少物体使用了该命令，每一帧中unity都只会执行一次抓取工作，但这也意味着所有物体都会使用同一张屏幕图像，不过在大多数情况下已经足够了。

三、渲染纹理 vs GrabPass

尽管GrabPass和之前使用的渲染纹理+额外摄像机的方式都可以抓取屏幕图像，但他们之间还是有一些不同的。GrabPass的好处在于实现简单，我们只需要在shader中写好几行代码就可以实现屏幕抓取的目的。渲染纹理则要创建渲染纹理和额外摄像机，在把相机的render target设置为新建的渲染纹理对象，最后把该渲染纹理传递给相应shader。

但从效率上讲，使用渲染纹理效率往往好于GrabPass，尤其是在移动设备上，使用渲染纹理我们可以自定义渲染纹理大小，尽管这种方法需要把部分场景再次渲染一遍，但我们可以通过调整摄像机的渲染的渲染层来减少二次渲染时的场景大小，或使用其他方法来控制摄像机是否需要开启，而使用GrabPass获取到的图像分辨率和显示屏幕是一致的，这意味着一些高分辨率的设备上可能会造成严重的带宽影响。而且在移动设备上，GrabPass虽然不会重新渲染场景，但它往往需要CPU直接读取后备缓冲中的数据，破坏了CPU和GPU之间的并行性，这是比较耗时的，甚至在一些移动设备上不支持。

在unity 5中引入了命令缓冲来允许我们扩展unity的渲染流水线。使用命令缓冲我们也可以得到类似抓屏的效果，它可以在不透明物体渲染后把当前的图像复制到一个临时的渲染目标纹理中，然后在进行一些额外操作，例如模糊等，最后把图像传递给需要使用它的物体进行处理和显示，除此以外命令缓冲还允许我们实现很多特效效果。