Shader学习的基础知识（ 三十一）水波效果

效果如图(移动端截图)：

水波效果也可以使用噪声纹理来实现，通过作为高度图并不段改变法线方向。我们会使用时间变量来对噪声纹理进行采样，再进行反射+折射计算。

我们使用一张立方体为环境纹理，并在列线空间下对像素坐标进行偏移，再使用该坐标进行屏幕采样，从而模拟折射效果。

水波是由一张噪声纹理生成的，随着时间不断变化，再用菲涅耳系数进行混合。
菲涅耳系数：
fresnel=pow(1-max(0,v.n),4)
v是视角方向,n是法线方向，夹角越小说明面越面向镜头，也就越亮。

先成立方体纹理，具体操作如下：
传送门：https://blog.csdn.net/ww1351646544/article/details/88389655
再准备一张水波图片与水波纹理的法线贴图。

解释在代码中:

Shader "Unity Shaders Book/Chapter 15/Water Wave" {
	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" {}
		//水波X偏移速度
		_WaveXSpeed ("Wave Horizontal Speed", Range(-0.1, 0.1)) = 0.01
		//水波Y偏移速度
		_WaveYSpeed ("Wave Vertical Speed", Range(-0.1, 0.1)) = 0.01
		//方向
		_Distortion ("Distortion", Range(0, 100)) = 10
	}
	SubShader {
		Tags { "Queue"="Transparent" "RenderType"="Opaque" }
		
		//抓取屏幕纹理并存在_RefractionTex中
		GrabPass { "_RefractionTex" }
		
		Pass {
			Tags { "LightMode"="ForwardBase" }
			
			CGPROGRAM
			
			#include "UnityCG.cginc"
			#include "Lighting.cginc"
			
			#pragma multi_compile_fwdbase
			
			#pragma vertex vert
			#pragma fragment frag
			
			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;
			
			struct a2v {
				float4 vertex : POSITION;
				float3 normal : NORMAL;
				float4 tangent : TANGENT; 
				float4 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);
				
				//按坐标为纹理采样位置和缩放
				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;
			}
			
			fixed4 frag(v2f i) : SV_Target {
				//世界坐标位置
				float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
				//顶点位置转视角空间
				fixed3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));
				//速度：xy分量与时间相乘以达到随时间移动的效果
				float2 speed = _Time.y * float2(_WaveXSpeed, _WaveYSpeed);
				
				//取切线空间中的法线(图片RenderType要改为Normal)
				//取法线纹理并与速度偏移相加
				fixed3 bump1 = UnpackNormal(tex2D(_WaveMap, i.uv.zw + speed)).rgb;
				fixed3 bump2 = UnpackNormal(tex2D(_WaveMap, i.uv.zw - speed)).rgb;
				fixed3 bump = normalize(bump1 + bump2);
				
				//偏移乘以偏移的方向得到最后的偏移量
				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)));
				//主图加速度制作偏移效果
				fixed4 texColor = tex2D(_MainTex, i.uv.xy + speed);
				//光线反射
				fixed3 reflDir = reflect(-viewDir, bump);
				//反射颜射
				fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb * _Color.rgb;
				
				//菲涅尔系数
				fixed fresnel = pow(1 - saturate(dot(viewDir, bump)), 4);
				fixed3 finalColor = reflCol * fresnel + refrCol * (1 - fresnel);
				
				return fixed4(finalColor, 1);
			}
			
			ENDCG
		}
	}
	// Do not cast shadow
	FallBack Off
}