渲染

编程入门行业动态更新时间:2024-10-18 03:31:40

渲染

水效果

水体表现分析：
水的基本表现特点：
- 1. 水体光照模型（漫反射、高光反射）
- 2. 海水吸收光线的（散射?）现象
- 3. 海水波动表现
- 4. 海岸波浪泡沫表现
- 5. 光线的折射和反射，菲涅尔表现。
- 6.最后，各个表现的融合
- 7. 缺点（今后改进方向）
- 8. BUG
参考资料：

《刺客信条：奥德赛》海滩：

学到了一种比较好的水效果实现，记录一下。看到上图是不是很激动？不耗意思，没这么吊，学到的只是它的简化版。

是不是感到很失望，其实还能再好很多，只是时间紧没时间去磨去调参数，每晚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 shadowFallBack 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能量守恒的公式，只能加了三个百分比参数，手动调。导致面板参数过多，各种凑合，没有数学的美感，很难受。