Unity Shader系列文章：Unity Shader目录-初级篇
Unity Shader系列文章：Unity Shader目录-中级篇
效果：
包含菲涅耳反射的水面波动效果。在左图中，视角方向和水面法线的夹角越大，反射效果越强。在右图中，视角方向和水面法线的夹角越大，折射效果越强
水面波纹材质纹理
噪声纹理
水波效果使用的噪声纹理。左图：噪声纹理的灰度图。右图：由左图生成的法线纹理(噪声纹理类型需设置为Normal map)
原理：
在模拟实时水面的过程中，使用噪声纹理。此时，噪声纹理会用作一个高度图，以不断修改水面的法线方向。为了模拟水不断流动的效果，使用和时间相关的变量来对噪声纹理进行采样，当得到法线信息后，再进行正常的反射＋折射计算，得到最后的水面波动效果。
反射折射实现：
使用一张立方体纹理 (Cubemap) 作为环境纹理（创建环境映射的立方体纹理），模拟反射。为了模拟折射效果，使用GrabPass 来获取当前屏幕的渲染纹理，并使用切线空间下的法线方向对像素的屏幕坐标进行偏移，再使用该坐标对渲染纹理进行屏幕采样，从而模拟近似的折射效果。
混合反射和折射颜色，使用菲涅耳系数来动态决定混合系数，来计算
涅耳系数公式：
其中，和
分别对应了视角方向和法线方向。它们之间的夹角越小， fresnel 值越小，反射越弱，折射越强。
Shader代码：
// 水波效果
Shader "Custom/WaterWave"
{
Properties
{
_Color ("Color", Color) = (1, 1, 1, 1)
_MainTex ("Texture", 2D) = "white" { }// 水面波纹材质纹理
_WaveMap ("Wave Map", 2D) = "bump" { }// 法线纹理 (由噪声纹理生成)
_Cubemap ("Cube Map", Cube) = "_Skybox" { }// 模拟反射的立方体纹理
_WaveXSpeed ("Wave X Speed", Range(-0.1, 0.1)) = 0.001
_WaveYSpeed ("Wave Y Speed", Range(-0.1, 0.1)) = 0.001
_Distortion ("Distortion", Range(0, 100)) = 50 // 控制模拟折射时图像的扭曲程度
}
SubShader
{
// 渲染队列设为Transparent，确保此物体渲染时，其他所有不透明物体已经渲染了
Tags { "RenderType" = "Opaque" "Queue" = "Transparent" }
// 定义抓取图像的Pass，此Pass会将屏幕图像存入_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;
// _MainTex纹理的缩放和偏移系数
float4 _MainTex_ST;
sampler2D _WaveMap;
// _WaveMap纹理的缩放和偏移系数
float4 _WaveMap_ST;
samplerCUBE _Cubemap;
fixed _WaveXSpeed;
fixed _WaveYSpeed;
float _Distortion;
sampler2D _RefractionTex;
// _RefractionTex的纹素大小，例如521x512大小的纹理，值约为0.001953，即1/512
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 = mul(UNITY_MATRIX_MVP, v.vertex);
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;
// 计算该顶点对应的从切线空间变换到世界空间的变换矩阵，并把每一行存储在TtoW0，TtoW1，TtoW2的xyz分量中
// 这里使用的数学方法是，得到切线空间下的3个坐标轴(x副法线，y切线，z法线)在世界空间下的表示，再依次按列组成变换矩阵即可
// 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
{
// 取出存在w分量里，世界空间下顶点坐标
float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
// 世界观察向量
fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));
float2 speed = _Time.y * float2(_WaveXSpeed, _WaveYSpeed);
// 对法线纹理进行两次采样，模拟两层交叉的水面波动效果
// 若法线纹理Texture Type未设置成Normal map，
// 要从像素映射回法线，即[0, 1]转化到[-1, 1]
// bump.xy = ( tex2D(_BumpMap, i.uv.zw).xy * 2 - 1);
// 如果设置了Normal map类型，Unity会根据平台使用不同的压缩方法，
// _BumpMap.rbg值不是对应的切线空间的xyz值了，要用Unity内置函数UnpackNormal
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;
// 把偏移量和屏幕坐标的z分量相乘，为了模拟深度越大，折射度越大的效果
// 若不需要此效果，可直接把偏移量叠加到屏幕坐标上
i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;
// i.scrPos.xy / i.scrPos.w，对scrPos进行透视除法
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(-worldViewDir, bump);
// 对反射纹理采样，并和主纹理颜色相乘得到反射颜色
fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb * _Color.rgb;
// 计算菲尼尔系数，公式：fresnel = pow(1-max(0, v·n),4)
// 视角方向和法线方向之间的夹角越小，fresnel值越小，反射越弱，折射越强。
fixed fresnel = pow(1 - saturate(dot(worldViewDir, bump)), 4);
fixed3 finalColor = reflCol * fresnel + refrCol * (1 - fresnel);
return fixed4(finalColor, 1);
}
ENDCG
}
}
FallBack Off
}
网友评论