Shader学习的基础知识（十四）玻璃效果

这次我们使用第二种渲染纹理方式GrabPass来制做一个玻璃效果。非常简单，用一张法线纹理来修改法线信息，通过一个CubeMap来模拟玻璃反射，而在模拟折射时，则使用了GrabPass获取玻璃后面的屏幕图像，并在切线空间中进行偏移后，再对屏幕图像进行采样来模拟。

玻璃效果：

创建一个立方体和一个圆，圆放在立方体里面。
创建立文体纹理，具体参考这个：
https://blog.youkuaiyun.com/ww1351646544/article/details/88389655
然后使用以下Shader加入Material后，赋予立方体。
代码如下，具体说明在注释中：

Shader "Custom/TestShader23" {
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
	}
	SubShader {
		// 因为玻璃的，这里我们需要做透明混合
		Tags { "Queue"="Transparent" "RenderType"="Opaque" }
		
		//这是一个抓取屏幕图像的Pass,会把图像存进_RefractionTex这个变量中
		GrabPass { "_RefractionTex" }
		
		Pass {		
			CGPROGRAM
			
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			
			sampler2D _MainTex;
			float4 _MainTex_ST;
			sampler2D _BumpMap;
			float4 _BumpMap_ST;
			samplerCUBE _Cubemap;
			float _Distortion;
			fixed _RefractAmount;
			sampler2D _RefractionTex;
			float4 _RefractionTex_TexelSize;
			
			struct a2v {
				float4 vertex : POSITION;
				float3 normal : NORMAL;
				float4 tangent : TANGENT; 
				float2 texcoord: TEXCOORD0;
			};
			
			struct v2f {
				float4 pos : SV_POSITION;
				float4 scrPos : TEXCOORD0;
				float4 uv : TEXCOORD1;
				float4 TtoW0 : TEXCOORD2;  
			    float4 TtoW1 : TEXCOORD3;  
			    float4 TtoW2 : TEXCOORD4; 
			};
			
			v2f vert (a2v v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				
				//齐次坐标系下的屏幕坐标值
				o.scrPos = ComputeGrabScreenPos(o.pos);
				
				//TRANSFORM_TEX 想当于 v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
				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; 
				
				//这里的TtoW0、TtoW1、TtoW2 的xyz列排构成了一个转置到世界空间的矩阵
				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;
			}
			
			fixed4 frag (v2f i) : SV_Target {
				//世界坐标下的位置第一组纹理坐标的分量
				float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
				fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));
				
				// 取切线空间中的法线
				fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));	
				
				// 计算切线空间中的偏移
				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;
				
				// 把法线转到世界空间
				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);
			}
			
			ENDCG
		}
	}
	
	FallBack "Diffuse"
}