（二十四）unity shader之——————使用噪声：下篇（水波效果）

在模拟真实水面过程中，我们往往也会使用噪声纹理。此时噪声纹理通常会用做一个高度图，以不断修改水面的法线方向。为了模拟水不断流动的效果，我们会使用和时间相关的变量来对噪声纹理进行采样，当得到法线信息后，在进行正常的反射+折射计算，得到最后的水面波动效果。

本篇文章会使用一个噪声纹理得到的法线贴图，实现一个包含菲涅耳反射的水面效果，如下图：

我们使用一张立方体纹理（cubemap）作为环境纹理，模拟反射。为了模拟折射效果，我们使用GrabPass来获取当前屏幕的渲染纹理，并使用切线空间下的法线方向对像素的屏幕坐标进行偏移，再使用该坐标对渲染纹理进行屏幕采样，从而模拟近似的折射效果，其中水波的法线纹理是由一张噪声纹理生成而得，而且会随着时间变化不断平移，模拟波光粼粼的效果。除此之外，我们没有使用一个定值来混合反射和折射颜色，而且使用之前提到的菲涅耳系数来动态决定混合系数，使用如下公式来计算菲涅耳系数：

fresnel=pow(1-max(0,v·n),4)

其中，v和n分别对应了视角方向和法线方向。它们之间的夹角越小，fresnel值越小，反射越弱，折射越强。菲涅耳系数还经常用于边缘光照的计算中。

实现：

1.声明属性

Properties {
		_Color ("Main Color", Color) = (0, 0.15, 0.115, 1)
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_WaveMap ("Wave Map", 2D) = "bump" {}
		_Cubemap ("Environment Cubemap", Cube) = "_Skybox" {}
		_WaveXSpeed ("Wave Horizontal Speed", Range(-0.1, 0.1)) = 0.01
		_WaveYSpeed ("Wave Vertical Speed", Range(-0.1, 0.1)) = 0.01
		_Distortion ("Distortion", Range(0, 100)) = 10
	}

 其中,_Color用于控制水面的颜色；_MainTex是水面波纹材质纹理，默认为白色纹理；_WaveMap是一个由噪声纹理生成的法线纹理；_Cubemap是用于模拟反射的立方体纹理；_Distortion则用于控制模拟折射时图像的扭曲程度；_WaveXSpeed和_WaveYSpeed分别用于控制法线纹理在X和Y方向上的平移速度。

2.定义相应的渲染队列，并使用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。字符串决定了抓取得到的屏幕图像将会被存入哪个纹理中。

3.定义渲染水面所需 Pass，定义变量：

fixed4 _Color;
			sampler2D _MainTex;
			float4 _MainTex_ST;
			sampler2D _WaveMap;
			float4 _WaveMap_ST;
			samplerCUBE _Cubemap;
			fixed _WaveXSpeed;
			fixed _WaveYSpeed;
			float _Distortion;	
			sampler2D _RefractionTex;
			float4 _RefractionTex_TexelSize;

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

4.定义顶点着色器：

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 = mul(UNITY_MATRIX_MVP, v.vertex);
				
				o.scrPos = ComputeGrabScreenPos(o.pos);
				
				o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
				o.uv.zw = TRANSFORM_TEX(v.texcoord, _WaveMap);
				
				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;
			}

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

5.定义片元着色器：

fixed4 frag(v2f i) : SV_Target {
				fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;
				
				clip(burn.r - _BurnAmount);
				
				float3 tangentLightDir = normalize(i.lightDir);
				fixed3 tangentNormal = UnpackNormal(tex2D(_BumpMap, i.uvBumpMap));
				
				fixed3 albedo = tex2D(_MainTex, i.uvMainTex).rgb;
				
				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
				
				fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(tangentNormal, tangentLightDir));

				fixed t = 1 - smoothstep(0.0, _LineWidth, burn.r - _BurnAmount);
				fixed3 burnColor = lerp(_BurnFirstColor, _BurnSecondColor, t);
				burnColor = pow(burnColor, 5);
				
				UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
				fixed3 finalColor = lerp(ambient + diffuse * atten, burnColor, t * step(0.0001, _BurnAmount));
				
				return fixed4(finalColor, 1);
			}

首先通过TtoW0等变量的w分量得到世界坐标，并用该值得到该片元对应的视角方向。除此以外，我们还使用内置的_Time.y变量和_WaveXSpeed、_WaveYSpeed属性计算了法线纹理的当前偏移量，并利用该值对法线纹理进行两次采样（这是为了模拟两层交叉的水面波动的效果），对两次结果相加并归一化后得到切线空间下的法线方向。然后我们使用该值和_Distortion属性以及_RefractionTex_TexelSize来对屏幕图像的采样坐标进行偏移，模拟折射效果。_Distortion值越大，偏移量越大，水面背后的物体看起来变形程度越大。在这里使用切线空间下的法线进行偏移，是因为该空间下的法线可以反映顶点局部空间下的法线方向。需要注意的是，在计算偏移后的屏幕坐标时，我们把偏移量额屏幕坐标的z分量相乘，这是为了模拟深度越大、折射程度越大的效果。如果不希望得到这个效果，可以直接把偏移值叠加到屏幕坐标上。随后对scrPos进行了透视除法，在使用该坐标对抓取的屏幕图像_RefractionTex进行采样，得到模拟的折射颜色。

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

为了混合折射和反射颜色，我们随后计算了菲涅耳系数，并据此来混合折射和反射颜色，作为最终的输出颜色。

本例中我们需要的是一张法线纹理，因此我们可以从该噪声纹理的灰度值中生成需要的法线信息，这是通过在它的纹理面板中把纹理类型设置为Normal map，并选中Create from grayscale来完成的。

最后，噪声纹理是如果构建出来的？这些纹理可以被认为是一种程序纹理，都是由计算机利用某些算法生成的。Perlin噪声和Worley噪声是两种最常使用的噪声类型，Perlin噪声可以用于生成更自然的噪声纹理，而Worley噪声则通常用于模拟诸如石头、水、纸张等多孔噪声。Photoshop等图像编辑软件往往提供了类似的功能或插件，以帮助美术人员生成需要的噪声纹理。