水效果
《刺客信条：奥德赛》海滩：
学到了一种比较好的水效果实现，记录一下。看到上图是不是很激动？不耗意思，没这么吊，学到的只是它的简化版。
是不是感到很失望，其实还能再好很多，只是时间紧没时间去磨去调参数，每晚2点多睡要命。
水效果可谓是渲染中的一大特色，表现风格上既有真实感水体渲染，也有卡通风格的水体渲染。技术细节上既有高水平的基于快速傅里叶变换的FFT，也有简单的单纯顶点动画表现。其中囊括了比较多的技术点，所以以后会以这里为起点，把学到的相关技术点都集成起来，看看未来我能实现多好的水效果，这里是起点，不是终点。
水体表现分析：
本水体主要实现的表现在：
- 散射：基本是从浅水区的青绿色到深水区的海蓝色。
- 水体的基本光照模型，有高光和漫反射。
- 水体的折射和反射现象。
- 水体的菲涅尔效果。
- 海水的动态效果
- 海水和物体接触的边缘中海浪的效果。
水的基本表现特点：
1. 水体光照模型（漫反射、高光反射）
这里采用blinn-phong光照模型。
先贴出来标准光照模型的代码模板，以这里为起点：
Shader "zxz/MyLowLeveWater" {
Properties {
_Color ("Color Tint", Color) = (1, 1, 1, 1)
_MainTex ("Main Tex", 2D) = "white" {}
_BumpMap ("Normal Map", 2D) = "bump" {}
_Specular ("Specular Color", Color) = (1, 1, 1, 1)
_Gloss ("Gloss", Range(1, 256)) = 20
}
SubShader {
Tags { "Queue"="Transparent" "RenderType"="Opaque" }
GrabPass { "_GrabPass" }
Pass {
Tags { "LightMode"="ForwardBase" }
CGPROGRAM
#pragma multi_compile_fwdbase
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
#include "Lighting.cginc"
#include "AutoLight.cginc"
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _BumpMap;
float4 _BumpMap_ST;
fixed4 _Specular;
float _Gloss;
sampler2D _GrabPass;
float4 _GrabPass_TexelSize;
struct a2v {
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 tangent : TANGENT;
float4 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float4 uv : TEXCOORD0;
float4 TtoW0 : TEXCOORD1;
float4 TtoW1 : TEXCOORD2;
float4 TtoW2 : TEXCOORD3;
};
v2f vert(a2v v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;
TANGENT_SPACE_ROTATION;
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 lightDir = normalize(UnityWorldSpaceLightDir(worldPos));
fixed3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));
fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));
bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));
fixed3 albedo = tex2D(_MainTex, i.uv.xy).rgb * _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(bump, lightDir));
fixed3 halfDir = normalize(lightDir + viewDir);
fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(bump, halfDir)), _Gloss);
UNITY_LIGHT_ATTENUATION(atten, i, worldPos);
fixed3 finalColor = ambient + (diffuse + specular) * atten;
fixed finalColor_a = 0;
return fixed4(finalColor,1);
}
ENDCG
}
}
// Do not cast shadow
FallBack Off
}
如上，所有的一切都从这里开始。。。
- 去掉FallBack，以及和阴影相关的代码。水体不需要投射阴影，去掉接受阴影（我觉得以后还是需要接受阴影的，这一版暂时去掉）。
- 添加抓屏代码。
- 注意不开启透明。（跌坑里，才爬出来。）
2. 海水吸收光线的（散射?）现象
这个阶段的核心是求出水体的albedo。
其中albedo反照率贴图，在普通的着色器中通过读图得来：
fixed3 albedo = tex2D(_MainTex, i.uv.xy).rgb * _Color.rgb;
而在这里不行，因为水体的颜色是动态的。
还好的是水体的颜色和透明度都依赖深度一个参数就能计算出。
海水吸收光线的透射现象，会给根据海水的深度为参数变化。海水的深度通过获取深度图得知。
1.设置水体基础颜色：
_WaterShallowColr("浅水区颜色", Color) = (1,1,1,1)
_WaterDeepColr("深水区颜色", Color) = (1,1,1,1)
2.获取深度图：
在相机上执行：（没挂这个也获取到了。估计是某个版本优化过了。不必挂这个？）
gameObject.GetComponent<Camera>().depthTextureMode |= DepthTextureMode.Depth;
深度图：深度纹理中每个像素所记录的深度值是从0 到1 非线性分布的。精度通常是 24 位或16 位，这主要取决于所使用的深度缓冲区。当读取深度纹理时，我们可以得到一个0-1范围内的高精度值。如果你需要获取到达相机的距离或者其他线性关系的值，那么你需要手动计算它。
声明_CameraDepthTexture。sampler2D_float 比平常的sampler2D精度更高。看你项目需求是否需要高精度。
sampler2D _CameraDepthTexture;
//顶点着色器中：
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
o.scrPos = ComputeScreenPos(o.pos);//返回屏幕位置
COMPUTE_EYEDEPTH(o.scrPos.z);//计算顶点摄像机空间的深度：距离裁剪平面的距离，线性变化；
//-------------------------------
//-------------------------------
//片元着色器：
//根据深度参数求出水的 albedo
half depth = LinearEyeDepth(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(i.scrPos)).r);
float linearDepth = Linear01Depth(depth);
half deltaDepth = depth - i.scrPos.z;
3.根据深度参数调制颜色
fixed4 c = lerp(_WaterShallowColr, _WaterDeepColr, min(_DepthRange, deltaDepth)/ _DepthRange);
_DepthRange：深度调节参数。
实现以下效果，根据深度参数，从岸边的浅水区颜色向深海的深水区颜色过渡：
伪透明度：（_TranAmount为面板参数）
half finalColor_a = min(_TranAmount, deltaDepth) / _TranAmount;
4.代码部分原理解读：
half deltaDepth = depth - i.scrPos.z;
现在我们将我们转化过的深度图深度值（线性分布）与顶点深度相减，原理如下图：
3. 海水波动表现
正常动画表现 + 噪声图。
海水动画通过对法线贴图进行时间轴上的扰动实现的，而法线贴图实质上是一张噪声图。这样双重叠加，凸显了随机性。
float4 bumpOffset1 = tex2D(_NormalTex, float2(realtime, 0) + i.uv.zw);
float4 bumpOffset2 = tex2D(_NormalTex, float2(realtime, 0) + float2(1 - i.uv.w,i.uv.z));
float4 offsetColor = normalize(bumpOffset1 + bumpOffset2);
float2 offset = UnpackNormal(offsetColor).xy * _Refract;
float4 bumpColor1 = tex2D(_NormalTex, float2(realtime, 0) + i.uv.zw + offset);
float4 bumpColor2 = tex2D(_NormalTex, float2(realtime, 0) + float2(1 - i.uv.w, i.uv.z) + offset);
float3 normal = UnpackNormal(normalize(bumpColor1 + bumpColor2)).xyz;
fixed3 WorldNormal = normalize(half3(dot(i.TtoW0.xyz, normal), dot(i.TtoW1.xyz, normal), dot(i.TtoW2.xyz, normal)));
fixed3 reflDir = reflect(-viewDir, WorldNormal);
这里连续采样，我不确定是否因为显存的多级缓存机制，其实内存带宽消耗没那么大。懂的大佬可以说下。
4. 海岸波浪泡沫表现
海岸波浪根据海水深度和贴图纹理计算出。
//波浪
half waveB = 1 - min(_WaveRangeA, deltaDepth) / _WaveRangeA;
fixed4 noiserColor = tex2D(_NoiseTex, i.uv.zw);
fixed4 waveColor = tex2D(_WaveTex, float2(waveB + _WaveRange * sin(_Time.x * _WaveSpeed + noiserColor.r), 1) + offset);
waveColor.rgb *= (1 - (sin(_Time.x * _WaveSpeed + noiserColor.r) + 1) / 2) * noiserColor.r;
fixed4 waveColor2 = tex2D(_WaveTex, float2(waveB + _WaveRange * sin(_Time.x * _WaveSpeed + _WaveDelta + noiserColor.r), 1) + offset);
waveColor2.rgb *= (1 - (sin(_Time.x * _WaveSpeed + _WaveDelta + noiserColor.r) + 1) / 2) * noiserColor.r;
fixed3 finalWaveColor = (waveColor.rgb + waveColor2.rgb) * waveB;
//水体纯色 + 波浪
albedo += finalWaveColor;
5. 光线的折射和反射，菲涅尔表现。
采用抓屏后根据法线扰动的技术实现。
//反射(这一步是水体颜色对IBL环境光的吸收)
fixed3 reflCol = texCUBE(_Cubemap,reflDir).rgb * albedo.rgb;
//折射 切线空间
offset = normal.xy * _Distortion * _GrabPass_TexelSize.xy;
i.grabScrPos.xy = offset * i.grabScrPos.z + i.grabScrPos.xy;
fixed3 refrCol = tex2D(_GrabPass, i.grabScrPos.xy / i.grabScrPos.w).rgb;
//菲涅尔，菲涅尔表现根据菲涅尔近似公式求出。
fixed fresnel = pow(1 - saturate(dot(viewDir,WorldNormal)), 5);
fresnel = saturate(fresnel + _FresnelAdd) * _FresnelScale;
//融合
fixed3 refrAndRefl = lerp(refrCol,reflCol,saturate(fresnel)) * _RefrAndReflIntensity;
6.最后，各个表现的融合
fixed3 diffuse = albedo * max(0, dot(WorldNormal, lightDir)) * _DiffuseIntensity;
fixed3 specular = _SpecularColor.rgb * pow(max(0, dot(WorldNormal, halfDir)), _Specular)*_Gloss * _SpecularIntensity;
UNITY_LIGHT_ATTENUATION(atten, i, worldPos);
fixed3 finalColor = refrAndRefl + (diffuse + specular) * _LightColor0.rgb * atten;
fixed color_a = saturate(min(_TranAmount, deltaDepth) / _TranAmount);
finalColor = lerp(refrCol,finalColor,saturate(color_a));
return fixed4(finalColor,1);
透明相关设置，直接看图就明白了：
最后相加后，发现直接曝光了，太亮了，加了几个百分比参数，调节三大效果：漫反射光照效果，高光效果，IBL效果，简单粗暴。
代码一团糟，面板布局，精度转换，代码优化，等待… 细节都没修整。搞好了贴出来。
7. 缺点（今后改进方向）
- 环境映射很Low，急着搞阴影，暂时先这么凑合着。尝试过Box Projection Cube Map，通过重新修正反射采样方向优化，结果很糟糕；也抄了PBR里面的间接镜面光照，效果一样，估计是和前面同一块BUG导致的，不知道问题出在哪里，先暂停。后续升级计划是：Box Projection Cube Map、Planar Reflection平面反射、SSR。[1]
- 水体波动方式很Low，是随机运动，后续可以参考[2]，改进很多。这块应该比较难。（实现海面波浪起伏效果，船行驶过后的波浪效果，总之就是水面和其他物体：船、瀑布、脚印、人体）
- 白色的海岸水浪未添加噪声，太连贯了。海浪泡沫效果也未实现。
- 海水和海岸连接的地方，未实现干燥沙子和湿沙子效果。
- 受限于水平，综合计算这块统筹很垃圾，推导不出来类似PBR能量守恒的公式，只能加了三个百分比参数，手动调。导致面板参数过多，各种凑合，没有数学的美感，很难受。
8. BUG
TODO：透射效果有问题
https://blog.csdn.net/weixin_45979158/article/details/103817139
2499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
