最难渲染的自然现象之一实时渲染系列水是游戏中最难渲染的自然现象之一。它同时涉及几何变形、光学效应和流体动力学。但拆开来看每一步都不复杂。一、水面渲染的核心要素一个令人信服的水面需要这几个视觉特征特征实现手段波浪起伏顶点位移Gerstner 波 / FFT表面细节法线贴图扰动反射平面反射 / SSR / 环境贴图折射屏幕空间折射 深度着色反射与折射的比例菲涅尔效应水下雾化基于深度的颜色衰减泡沫/浪花基于曲率或深度的白色叠加焦散投影纹理 / 光线追踪二、波形生成方法一正弦波叠加最简单// 多个正弦波叠加floatwaveHeight(vec2 pos,floattime){floath0.0;h0.5*sin(pos.x*0.3time*1.2);h0.3*sin(pos.y*0.5time*0.8);h0.1*sin((pos.xpos.y)*1.0time*2.0);returnh;}问题正弦波的波峰和波谷一样圆润不像真实海浪波峰尖、波谷平。方法二Gerstner 波游戏主流Gerstner 波不仅让顶点上下移动还让顶点水平移动产生真实的尖峰效果// Gerstner 波顶点同时水平和垂直位移vec3gerstnerWave(vec2 pos,floattime,vec2 dir,floatamplitude,floatfrequency,floatsteepness){floatphasefrequency*dot(dir,pos)time;floatQsteepness/(frequency*amplitude);// 控制尖锐度vec3 offset;offset.xQ*amplitude*dir.x*cos(phase);offset.zQ*amplitude*dir.y*cos(phase);offset.yamplitude*sin(phase);returnoffset;}// 叠加多个不同方向、频率的 Gerstner 波vec3 totalOffsetvec3(0);totalOffsetgerstnerWave(pos,t,vec2(1,0),0.5,0.8,0.6);totalOffsetgerstnerWave(pos,t,vec2(0.7,0.7),0.3,1.2,0.5);totalOffsetgerstnerWave(pos,t,vec2(-0.3,0.9),0.2,2.0,0.4);方法三FFT 海洋3A 级基于 Tessendorf 的论文用海洋频谱Phillips Spectrum在频域生成波浪再通过 FFT 变换到空间域。Phillips 频谱 → 随机相位 → IFFT → 高度场 法线 位移优点物理正确视觉效果极佳。缺点计算量大通常在 Compute Shader 中实现。三、法线贴图小尺度细节大波浪用顶点位移小波纹用法线贴图。两张法线贴图以不同速度和方向滚动叠加产生复杂的水面细节// 双层法线贴图滚动vec2 uv1worldPos.xz*0.1time*vec2(0.02,0.01);vec2 uv2worldPos.xz*0.05time*vec2(-0.01,0.02);vec3 n1texture(normalMap1,uv1).xyz*2.0-1.0;vec3 n2texture(normalMap2,uv2).xyz*2.0-1.0;// 混合两层法线UDN blendingvec3 Nnormalize(vec3(n1.xyn2.xy,n1.z*n2.z));进阶Flow Map 可以控制水流方向让河流沿着河道流动而不是均匀滚动。四、菲涅尔效应反射与折射的比例这是水面看起来真实的最关键因素。物理规律正对水面看垂直入射→ 主要看到水下折射为主斜着看水面掠射角→ 主要看到反射// Schlick 近似菲涅尔floatfresnel(vec3 V,vec3 N){floatF00.02;// 水的基础反射率floatcosThetamax(dot(V,N),0.0);returnF0(1.0-F0)*pow(1.0-cosTheta,5.0);}// 最终颜色 反射和折射的混合floatFfresnel(viewDir,normal);vec3 colormix(refractionColor,reflectionColor,F);很多看起来不对的水面问题就出在没有菲涅尔。加上菲涅尔效果立刻提升一个档次。五、反射方法一平面反射最准确把相机关于水面做镜像再渲染一遍场景得到反射贴图。镜像相机 → 裁剪水面以下 → 渲染到 FBO → 作为反射贴图采样缺点要多渲染一遍场景开销翻倍。方法二屏幕空间反射SSR在屏幕空间做光线步进沿反射方向搜索已有像素。优点不需要额外渲染。缺点只能反射屏幕上可见的东西。方法三环境贴图最便宜用 Cubemap 提供远处的反射。适合天空和远景近处物体反射不准确。实际游戏通常混合使用近处用 SSR远处用环境贴图特殊场景用平面反射。六、折射与水下效果// 屏幕空间折射vec2 screenUVgl_FragCoord.xy/screenSize;vec2 distortionnormal.xz*refractionStrength;vec3 refrColortexture(sceneColorTex,screenUVdistortion).rgb;// 基于深度的水下雾化floatwaterDepthtexture(depthTex,screenUV).r-gl_FragCoord.z;vec3 deepColorvec3(0.0,0.05,0.1);// 深水颜色floatdepthFactor1.0-exp(-waterDepth*0.5);refrColormix(refrColor,deepColor,depthFactor);效果水浅的地方能看到水底水深的地方逐渐变成深蓝/深绿色。七、泡沫与浪花泡沫通常出现在波峰处Gerstner 波的 Jacobian 行列式 0 时水面与物体交界处基于深度差岸边基于水深// 基于深度的岸边泡沫floatshoreDepthtexture(depthTex,screenUV).r-fragDepth;floatfoam1.0-smoothstep(0.0,foamWidth,shoreDepth);foam*texture(foamNoise,uv*4.0time*0.1).r;// 叠加到最终颜色colormix(color,vec3(1.0),foam*0.8);八、完整的水面着色器框架// water.frag - 完整水面片段着色器框架voidmain(){// 1. 法线从法线贴图获取扰动后的法线vec3 NgetWaterNormal(worldPos,time);// 2. 菲涅尔决定反射/折射比例floatFfresnelSchlick(viewDir,N);// 3. 反射vec3 reflDirreflect(-viewDir,N);vec3 reflectionsampleReflection(reflDir,screenUV,N);// 4. 折射 水下雾化vec3 refractionsampleRefraction(screenUV,N,waterDepth);// 5. 混合vec3 colormix(refraction,reflection,F);// 6. 高光colorsunSpecular(N,viewDir,lightDir);// 7. 泡沫colorapplyFoam(color,worldPos,waterDepth,time);fragColorvec4(color,1.0);}九、性能优化技术说明LOD远处水面降低网格密度和法线细节半分辨率反射反射贴图用一半分辨率渲染TessellationGPU 动态细分近处密远处疏Compute ShaderFFT 海洋在 CS 中计算不占顶点管线时间复用反射/折射隔帧更新十、不同游戏的水面方案级别方案适用场景低端法线贴图 菲涅尔 环境贴图手游、独立游戏中端Gerstner 波 SSR 深度雾主流 PC/主机游戏高端FFT 海洋 平面反射 体积光 焦散3A 大作水面渲染没有银弹。核心是理解每个视觉特征背后的物理原理然后根据性能预算选择合适的近似方案。菲涅尔 法线扰动是性价比最高的组合。
最难渲染的自然现象之一实时渲染系列水是游戏中最难渲染的自然现象之一。它同时涉及几何变形、光学效应和流体动力学。但拆开来看每一步都不复杂。一、水面渲染的核心要素一个令人信服的水面需要这几个视觉特征特征实现手段波浪起伏顶点位移Gerstner 波 / FFT表面细节法线贴图扰动反射平面反射 / SSR / 环境贴图折射屏幕空间折射 深度着色反射与折射的比例菲涅尔效应水下雾化基于深度的颜色衰减泡沫/浪花基于曲率或深度的白色叠加焦散投影纹理 / 光线追踪二、波形生成方法一正弦波叠加最简单// 多个正弦波叠加floatwaveHeight(vec2 pos,floattime){floath0.0;h0.5*sin(pos.x*0.3time*1.2);h0.3*sin(pos.y*0.5time*0.8);h0.1*sin((pos.xpos.y)*1.0time*2.0);returnh;}问题正弦波的波峰和波谷一样圆润不像真实海浪波峰尖、波谷平。方法二Gerstner 波游戏主流Gerstner 波不仅让顶点上下移动还让顶点水平移动产生真实的尖峰效果// Gerstner 波顶点同时水平和垂直位移vec3gerstnerWave(vec2 pos,floattime,vec2 dir,floatamplitude,floatfrequency,floatsteepness){floatphasefrequency*dot(dir,pos)time;floatQsteepness/(frequency*amplitude);// 控制尖锐度vec3 offset;offset.xQ*amplitude*dir.x*cos(phase);offset.zQ*amplitude*dir.y*cos(phase);offset.yamplitude*sin(phase);returnoffset;}// 叠加多个不同方向、频率的 Gerstner 波vec3 totalOffsetvec3(0);totalOffsetgerstnerWave(pos,t,vec2(1,0),0.5,0.8,0.6);totalOffsetgerstnerWave(pos,t,vec2(0.7,0.7),0.3,1.2,0.5);totalOffsetgerstnerWave(pos,t,vec2(-0.3,0.9),0.2,2.0,0.4);方法三FFT 海洋3A 级基于 Tessendorf 的论文用海洋频谱Phillips Spectrum在频域生成波浪再通过 FFT 变换到空间域。Phillips 频谱 → 随机相位 → IFFT → 高度场 法线 位移优点物理正确视觉效果极佳。缺点计算量大通常在 Compute Shader 中实现。三、法线贴图小尺度细节大波浪用顶点位移小波纹用法线贴图。两张法线贴图以不同速度和方向滚动叠加产生复杂的水面细节// 双层法线贴图滚动vec2 uv1worldPos.xz*0.1time*vec2(0.02,0.01);vec2 uv2worldPos.xz*0.05time*vec2(-0.01,0.02);vec3 n1texture(normalMap1,uv1).xyz*2.0-1.0;vec3 n2texture(normalMap2,uv2).xyz*2.0-1.0;// 混合两层法线UDN blendingvec3 Nnormalize(vec3(n1.xyn2.xy,n1.z*n2.z));进阶Flow Map 可以控制水流方向让河流沿着河道流动而不是均匀滚动。四、菲涅尔效应反射与折射的比例这是水面看起来真实的最关键因素。物理规律正对水面看垂直入射→ 主要看到水下折射为主斜着看水面掠射角→ 主要看到反射// Schlick 近似菲涅尔floatfresnel(vec3 V,vec3 N){floatF00.02;// 水的基础反射率floatcosThetamax(dot(V,N),0.0);returnF0(1.0-F0)*pow(1.0-cosTheta,5.0);}// 最终颜色 反射和折射的混合floatFfresnel(viewDir,normal);vec3 colormix(refractionColor,reflectionColor,F);很多看起来不对的水面问题就出在没有菲涅尔。加上菲涅尔效果立刻提升一个档次。五、反射方法一平面反射最准确把相机关于水面做镜像再渲染一遍场景得到反射贴图。镜像相机 → 裁剪水面以下 → 渲染到 FBO → 作为反射贴图采样缺点要多渲染一遍场景开销翻倍。方法二屏幕空间反射SSR在屏幕空间做光线步进沿反射方向搜索已有像素。优点不需要额外渲染。缺点只能反射屏幕上可见的东西。方法三环境贴图最便宜用 Cubemap 提供远处的反射。适合天空和远景近处物体反射不准确。实际游戏通常混合使用近处用 SSR远处用环境贴图特殊场景用平面反射。六、折射与水下效果// 屏幕空间折射vec2 screenUVgl_FragCoord.xy/screenSize;vec2 distortionnormal.xz*refractionStrength;vec3 refrColortexture(sceneColorTex,screenUVdistortion).rgb;// 基于深度的水下雾化floatwaterDepthtexture(depthTex,screenUV).r-gl_FragCoord.z;vec3 deepColorvec3(0.0,0.05,0.1);// 深水颜色floatdepthFactor1.0-exp(-waterDepth*0.5);refrColormix(refrColor,deepColor,depthFactor);效果水浅的地方能看到水底水深的地方逐渐变成深蓝/深绿色。七、泡沫与浪花泡沫通常出现在波峰处Gerstner 波的 Jacobian 行列式 0 时水面与物体交界处基于深度差岸边基于水深// 基于深度的岸边泡沫floatshoreDepthtexture(depthTex,screenUV).r-fragDepth;floatfoam1.0-smoothstep(0.0,foamWidth,shoreDepth);foam*texture(foamNoise,uv*4.0time*0.1).r;// 叠加到最终颜色colormix(color,vec3(1.0),foam*0.8);八、完整的水面着色器框架// water.frag - 完整水面片段着色器框架voidmain(){// 1. 法线从法线贴图获取扰动后的法线vec3 NgetWaterNormal(worldPos,time);// 2. 菲涅尔决定反射/折射比例floatFfresnelSchlick(viewDir,N);// 3. 反射vec3 reflDirreflect(-viewDir,N);vec3 reflectionsampleReflection(reflDir,screenUV,N);// 4. 折射 水下雾化vec3 refractionsampleRefraction(screenUV,N,waterDepth);// 5. 混合vec3 colormix(refraction,reflection,F);// 6. 高光colorsunSpecular(N,viewDir,lightDir);// 7. 泡沫colorapplyFoam(color,worldPos,waterDepth,time);fragColorvec4(color,1.0);}九、性能优化技术说明LOD远处水面降低网格密度和法线细节半分辨率反射反射贴图用一半分辨率渲染TessellationGPU 动态细分近处密远处疏Compute ShaderFFT 海洋在 CS 中计算不占顶点管线时间复用反射/折射隔帧更新十、不同游戏的水面方案级别方案适用场景低端法线贴图 菲涅尔 环境贴图手游、独立游戏中端Gerstner 波 SSR 深度雾主流 PC/主机游戏高端FFT 海洋 平面反射 体积光 焦散3A 大作水面渲染没有银弹。核心是理解每个视觉特征背后的物理原理然后根据性能预算选择合适的近似方案。菲涅尔 法线扰动是性价比最高的组合。
![GO [ 泛型 ]](http://pic.xiahunao.cn/yaotu/GO [ 泛型 ])
完全指南：模板、分解与版本管理)
