我最近把一套基于GPU FFT的海洋模拟项目源码完整啃了一遍从频谱生成、逆变换到顶点着色器里的法线重建一路跟下来踩了不少坑也把整条技术链路理清楚了。这篇文章就是那套源码的完整解析笔记。不管你是刚开始接触海洋模拟、想找一份能看懂的代码还是已经写了一些水面效果、想搞清楚FFT和Gerstner波到底差别在哪这份解析都能提供一条比较顺畅的阅读路径。我会按源码结构、核心算法、参数选择、实操复现和问题排查几个角度来讲尽量做到拿到代码就能对着看。1. 先搞清楚要解析什么海洋模拟的两条主流技术路线1.1 FFT频谱法 vs Gerstner波哪种更适合源码学习海洋模拟的实现路线说白了两条一是Gerstner波用一个或多个正弦波叠加出波浪位移优点是计算简单、适合移动端和小场景二是FFT频谱法从海洋学频谱出发生成整片海面的高度场再用逆傅里叶变换把频域信号转成时域波形优点是可以模拟出非常接近真实海面的细节缺点是需要做频谱缓存和FFT计算工程复杂度明显高出一截。我在解析这套源码时发现它的主渲染管线用的是FFT方案但也保留了一个Gerstner波的简化分支作为低配回退。这个“双路线共存”的架构其实非常适合源码学习你可以在一个项目里同时对比两种思路的代码组织方式理解它们各自解决什么问题。从工程角度看Gerstner波方案的核心是wave()函数通常是几层正弦波叠加参数好调、效果直观FFT方案的核心则是频谱生成→逆FFT→法线重建这条流水线。两条路线不冲突反而互补。我建议初学者先看Gerstner分支把波浪的基本直觉建立起来再进FFT主分支否则容易直接懵在频谱那一堆公式里。1.2 解析对象一套典型的GPU FFT海洋模拟项目为了把这次解析讲明白我以一套在开源社区里结构比较典型、采用GPU FFT的海洋模拟项目为例。整体模块划分如下初始化模块负责创建频谱纹理、加载shader、生成海面网格、初始化FFT计算资源。频谱生成模块在CPU侧或ComputeShader里计算Phillips频谱生成初始波高频谱h0(k)存成纹理。FFT变换模块按时间步做逆傅里叶变换从频谱得到每个顶点的波高和法线输出到渲染纹理。网格与LOD模块按相机位置生成带LOD的海面网格配合顶点纹理采样实现无缝衔接。着色器模块海面材质shader负责从波高纹理采样、重建法线、计算光照、泡沫、反射和雾效。这套源码最大的优点是模块边界清晰每个文件负责的事情很单纯。我拿到代码之后第一步做的事不是急着看细节而是把文件目录打印出来按依赖关系画了一份脑内结构图。源码解析最忌讳一上来就从main()或Update()硬啃很容易被细节带跑。1.3 读源码之前先把数学基础补上开始看FFT海洋模拟源码前有几个数学概念必须心里有数不然后面全是在看天书波数谱描述不同波数波长倒数上波能量的分布。海洋学里有现成的模型比如Phillips谱、JONSWAP谱。复数和共轭频谱是复数域的信号包含了振幅和相位信息。我们最终要的波高是实数所以频谱必须满足共轭对称性逆变换之后虚部才会趋近于零。逆傅里叶变换把频域信号恢复成时域/空间域信号。在海洋模拟里就是拿频谱算波高。切空间法线重建有了波高场法线要通过相邻像素高度差来估算本质上是求梯度。我自己第一次接触FFT海洋模拟时就是跳过了这些基础直接看逆变换代码结果花了一整天都搞不清H0和H的关系。后来老老实实把Phillips谱的公式抄了一遍才通了。源码解析的核心不是逐行翻译而是把每个公式和它在代码里的映射关系对上。2. 源码结构与核心模块拆解2.1 从启动到渲染项目入口与初始化流程这套源码的入口在MonoBehaviour的Awake()和Start()里主要做了这么几件事创建海面网格对象挂载MeshFilter和MeshRenderer。初始化FFT相关纹理h0Texture初始频谱、waveHeightTexture波高、normalTexture法线、displacementTexture位移。编译并缓存所有需要用的Shader。注册相机渲染事件在OnPreRender或CommandBuffer里更新波形。这里有个容易漏掉的点**初始频谱是静态的只需要生成一次但每次渲染都要基于它做逆FFT得到当前时刻的波高。**所以代码里通常会区分“初始化阶段”和“更新阶段”。我看源码时发现它的频谱生成不是每帧都跑而是放到Awake里跑一次更新阶段只调FFT这就是优化的关键思路。网格生成方面源码默认用的是平面网格 顶点高度扰动策略。网格分辨率和视距范围直接决定了顶点采样波高纹理的精度。它的网格不是一次性生成一整块而是以相机为中心、按远近距离分层每一层使用不同的顶点密度。这一点在底层代码里体现为多个Mesh实例渲染时通过摄像头位置动态调整偏移。2.2 海面网格的生成逻辑为什么用LOD而不是整块如果只用一张高分辨率平面网格跑FFT海面顶点的数量会爆炸。以1000x1000面数的平面为例渲染一次就是100万顶点在移动设备上直接卡死。所以源码里用了同心LOD环的方案靠近相机的区域网格密度高顶点间隔小波浪细节完整。远离相机的区域网格密度逐步降低顶点间隔变大只保留低频大波浪的轮廓。不同LOD层之间的过渡依赖一个渐变系数做顶点位置的线性插值避免出现明显的接缝。看源码时重点关注LODLevel和RingCount这两个配置项。我实际测试下来四层LOD加近处512x512的网格精度整体效果和性能是最稳的组合再往上提密度收益很低GPU带宽反而先撑不住。这也解释了为什么那些面向PC的海洋Demo普遍把FFT纹理分辨率停在512或1024而不是执着于2048。2.3 频谱生成与FFT变换从频域到时域的跳跃频谱生成是整套源码里公式最密集的部分。项目用的模型是常见的Phillips频谱因为实现简单、参数直观代码里也只有短短十几行。核心思路是根据风方向和风速构造h0(k)h0(k) (xi_r i * xi_i) * sqrt(P(k) / 2)其中xi_r和xi_i是两个服从标准正态分布的随机数P(k)是Phillips谱的能量分布。源码里在初始化时生成一张纹理把h0(k)的实部和虚部分别存到RG通道。这样UV采样时每个纹素就对应频域里的一个波数向量。有了h0(k)之后每个时间步按公式计算当前频谱h(k,t) h0(k) * exp(i * omega(k) * t) conj(h0(-k)) * exp(-i * omega(k) * t)这个公式写起来简单但代码里有两个细节非常容易踩坑。第一索引为负的波数-k对应的是纹理坐标取反不能直接拿负索引去采样纹理。源码里的做法是预先算一张pingpong坐标纹理保存(-u, -v)对应的UV坐标运行时直接查询。第二omega(k)由色散关系给出也就是重力波角频率和波数的关系omega(k) sqrt(g * |k|)如果深水/浅水参数没有处理好波浪传播速度会看起来完全不对。源码默认按深水处理只考虑g * k这点在调参时需要留意。整个FFT变换过程用ComputeShader实现分两次Pass先对行做逆FFT再对列做逆FFT。这种经典的分离式FFT实现我在源码里看到了很多优化痕迹比如蝶形运算的旋转因子预计算、共享内存缓存、Bank Conflict规避等。对于学习目的不需要逐行抠shader细节先理解“行变换→转置→列变换”这个流程即可。3. 核心技术实现与参数推算3.1 Phillips频谱的C#实现与参数选择频谱生成部分源码用C#在初始化阶段算好h0纹理。核心代码如下我做了一些精简和注释Color[] texData new Color[texWidth * texHeight]; for (int y 0; y texHeight; y) { for (int x 0; x texWidth; x) { // 把像素坐标映射到波数空间范围[-N/2, N/2] float kx 2.0f * Mathf.PI * (x - texWidth * 0.5f) / oceanSize; float kz 2.0f * Mathf.PI * (y - texHeight * 0.5f) / oceanSize; Vector2 k new Vector2(kx, kz); float kLen k.magnitude; if (kLen 0.0001f) continue; // 零波数没有意义 // 风向投影 float kDotW Vector2.Dot(k.normalized, windDirection.normalized); float kDotWSq kDotW * kDotW; // Phillips谱核心项 float phillips amplitude * Mathf.Exp(-1.0f / (kLen * L * L)) / (kLen * kLen * kLen * kLen) * kDotWSq; // 过滤与风向反向的波 if (kDotW 0.0f) phillips * windAlign; // 高斯随机数两个独立分量 float xiR Gaussian(); float xiI Gaussian(); float amp Mathf.Sqrt(phillips * 0.5f); texData[y * texWidth x] new Color(xiR * amp, xiI * amp, 0.0f, 0.0f); } }这里必须说两个关键参数L windSpeed * windSpeed / gravity这个值决定了频谱的峰值位置。风越大L越大频谱峰值落在更长波长的波上海面看起来浪更粗。调试时想快速得到“大风大浪”效果把windSpeed从5调到15就能明显看出区别。amplitude是整体波浪强度的缩放系数。它不是随便调的音量旋钮因为它直接参与频谱能量计算改大之后整个海面的波高都会变大连带影响后面的法线强度和泡沫覆盖范围。我实际跑下来最喜欢的参数组合是windSpeed 8、windAlign 0.7、amplitude 0.5、纹理尺寸512。这个组合在性能和视觉之间比较均衡浪高约在1到3米近景细节足够法线扰动也明显泡沫只在浪尖出现不会糊成一片。如果你打开别人项目发现海面“波光粼粼但浪不明显”多半是amplitude太小或者L太大。反过来“全是巨浪但细节全无”就要检查L是不是太小以及FFT纹理分辨率是不是太低、高频波被截断了。调试频谱参数时我习惯先用一个静止相机从正上方看波形这样能快速判断波长分布是否合理比从斜上方看更容易暴露问题。3.2 逆FFT与波高、法线的GPU计算当h(k,t)算完之后剩下的工作就是把频谱逆变换成波高场。ComputeShader里会用前一节提到的分离式FFT跑两遍。我把WaveHeightUpdate的调度逻辑简化成这样[numthreads(8, 8, 1)] void CS_UpdateSpectrum (uint3 id : SV_DispatchThreadID) { uint2 uv id.xy; float2 k GetWaveVector(uv); float w sqrt(g * length(k)); // 角频率 float2 h0 h0Tex[uv].xy; float2 h0Conj h0Tex[GetNegativeUV(uv)].xy; // 共轭采样 float2 h0ConjFlipped float2(h0Conj.x, -h0Conj.y); float2 expPos float2(cos(w * time), sin(w * time)); float2 expNeg float2(cos(-w * time), sin(-w * time)); // 当前频谱 h0 * exp(iwt) conj(h0(-k)) * exp(-iwt) float2 spectrum MulComplex(h0, expPos) MulComplex(h0ConjFlipped, expNeg); spectrumTex[uv] float4(spectrum, 0.0, 0.0); }这段逻辑的数学本质很简单每个波数上的频谱按自己的频率独立震荡。但注意这里有个隐性条件GetNegativeUV必须要采样和当前纹素关于原点对称的位置如果采样错了波形会变成一堆杂乱无章的噪点。这也是源码里我最想提醒初学者注意的地方。逆FFT完成之后波高数据在纹理的R通道里。要算法线代码里没走“从波高差分求梯度”的老路而是直接在频域里用梯度定理算好法线偏移再一起做逆FFT。具体做法是把频谱乘上对应的k分量权重得到一个额外的梯度频谱逆变换后就能同时得到波高的X、Y梯度。这个技巧在源码里体现为对spectrum做复数乘法并输出到纹理的GB通道。这样一次FFT调度同时产生了波高和梯度省了一半GPU开销。从shader侧读法线时核心代码大概是float2 slope float2( tex2Dlod(normalTex, float4(uv, 0, 0)).x, tex2Dlod(normalTex, float4(uv, 0, 0)).y ); float3 normal float3(-slope.x, 1.0, -slope.y); normal normalize(normal);这个slope是从频域梯度逆变换直接得到的比相邻像素差分更平滑或者说它天然包含了全频段的波浪信息而不是只反映几个像素内的局部变化。这也是FFT方案视觉上比单纯Gerstner波更细腻的原因之一。3.3 着色器中的细节泡沫、反射与雾效叠加波高和法线有了后面就是纯粹的着色器技巧了。项目shader里我个人觉得最有学习价值的是三块泡沫遮罩、天空反射、雾效融合。泡沫的计算不是独立噪声叠加而是基于波高的“尖峰检测”。核心思路是波高大于一定阈值且坡度陡峭的地方更容易产生白沫。shader里用了一个简化的经验公式float foamAmount saturate((waveHeight - foamThreshold) * foamScale); foamAmount * saturate(slopeLength * slopeImpact); foamAmount * _FoamMask;第一项选出浪尖第二项强化在坡度大的区域因为浪尖处波峰隆起、两侧消化最快第三项用噪声纹理打破泡沫边缘的规则感。三个因子一乘泡沫会自然出现在浪头而不是铺满整个海面。调试泡沫时先把foamMask设成纯白快速验证前两个因子的动态范围最后再贴噪声。反射部分用的是最简单的采样天空盒 菲涅尔插值。海面法线偏移会改变反射方向菲涅尔项决定近处反射强、远处反射弱。很多新手以为反射越强越真实其实海水在侧面视角接近全反射在头顶视角反而能看到水下颜色。shader里通常用pow(1.0 - NdotV, 5.0)来近似菲涅尔效应然后按权重混合反射色和水体散射色。雾效融合很简单但少了它会显得海面和背景完全是两个世界。代码里用线性雾或指数雾把海面颜色往远处地平线颜色靠float fogFactor 1.0 - exp(-fogDensity * distanceToCamera); color lerp(color, horizonColor, fogFactor);这里我有个调参经验fogDensity不要调成一个常数最好让它随风向和波浪强度轻微变化。风大浪高时海气交互更剧烈远处能见度偏低雾感增强风平浪静时雾薄一些。这个细节不仔细看源码根本发现不了但加上之后整个海面会“活”很多。3.4 光照模型与海水颜色模拟海水颜色的核心不在“蓝色”本身而在于水下散射和吸收对不同波长光的差异化处理。源码用的不是简单的lerp(deepColor, shallowColor, depth)而是把光的衰减拆成红绿蓝三个通道分别乘以不同的系数。这在shader里体现为float3 waterAbsorption float3(0.95, 0.45, 0.25); // 近似吸收系数 float3 scatter float3(0.005, 0.02, 0.04); float3 underLight sunColor * exp(-extinction * depth) ambientScatter;红色光衰减最快所以在水下深处看起来偏青蓝绿色次之蓝色衰减最慢。这些颜色系数我建议直接参考实测水体数据而不是肉眼在显示器上调。我试过从“看起来不错”的角度去调海水颜色结果换一个场景光照就完全翻车。后来老老实实把系数掰回物理范围再在颜色空间里做后期校正效果好得多。另外太阳高光在海洋渲染里非常重要。shader里用的Blinn-Phong或GGX高光项会让波浪背风面出现一条条细碎的光斑。这里要注意法线频率FFT生成的法线细节非常丰富高光的glossiness尽量调低一点否则满屏都是白花花的高光噪点反而假。4. 实操从零复现一个可运行的简化版本4.1 搭建最小框架网格 顶点波浪如果直接全套跑FFT管线对新手来说学习曲线太陡。我建议分两步走先写一个Gerstner波的简化版本搭好网格和shader框架确认整个渲染链路通顺之后再把FFT模块替换进去。最小框架需要的组件如下表所示组件作用参考配置平面网格海面载体256x256分辨率50x50米范围MeshRenderer 材质渲染海面挂自定义Unlit/Standard ShaderCamera渲染视角带Depth Texture后面反射要用C#控制脚本更新Uniform参数传递时间、风速、风向给Shader复现时网格分辨率不用高波形细节暂时由shader里的正弦波函数提供。这样即使没有FFT纹理海面也有动态效果。确认网格顶点能正常被顶点着色器位移再考虑升级。4.2 把Gerstner波写进着色器Gerstner波写入顶点着色器是很多海洋Demo的地基。经典公式像这样float3 GerstnerWave(float2 pos, float2 dir, float steepness, float wavelength, float time) { float k 2.0 * PI / wavelength; float c sqrt(9.8 / k); float f k * (dot(dir, pos) - c * time); float a steepness / k; float3 result; result.x dir.x * a * cos(f); result.y a * sin(f); result.z dir.z * a * cos(f); return result; }这个函数的核心是波传播方向dir上做水平位移竖直方向做正弦运动。陡度系数steepness控制浪尖的尖锐程度值越大波峰越陡但超过1会自交看着像破面。叠加三到四个不同波长、方向、速度的波海浪就有基本形态了。法线不能直接拿未扰动网格的默认法线而是要对GerstnerWave做解析求导得到坡度的理论值。如果图省事用差分法也行但顶点密度低的时候会有明显锯齿感。4.3 调试技巧与效果调优参数表我在调试Gerstner波时习惯把时间暂停然后逐层观察单层波的效果。每加一层波之前先把之前几层注释掉确保当前层没有参数异常。很多人一上来就堆六层波结果波形一团糊根本分不清是哪层的参数出了问题。下面是几个常用参数的速查表参数作用快速调整建议波长决定波浪大小大到5米以上小到0.5米以下都要混着配陡度浪尖尖锐程度0.2~0.4最稳定大于0.6小心自交方向波浪传播方向各层方向差异大水面更乱更自然速度波浪传播速度深水速度约sqrt(g/k)手动设容易失真波数波长决定波长越大波数越小顺带说一句用Gerstner波做近海水面是完全够用的很多游戏的海面就是三四个Gerstner波叠加的结果。FFT的优势更多体现在开阔海域的细节丰富度和真实波浪频谱特征上工程复杂度也相应更高。这两个方案的取舍其实就是效果和性能/复杂度的权衡。5. 踩坑记录与排查思路5.1 频谱锯齿和重复问题第一次跑通FFT管线后我看到的不是平静的海面而是一堆规则排列的横条纹。排查之后发现根因是频谱纹理的wrap mode没设置对。波数-k对应的采样点会落在纹理边缘之外如果wrap mode是Clamp边缘会无限重复同一个数值生成灾难性的条纹。解决办法是把频谱纹理的wrap mode设为Repeat或者干脆在生成h0时直接把边缘纹素清掉。另一个常见问题是波浪看起来有明显的“网格感”一条条波浪跟格子似的。这是因为频谱里对角线方向的高频波没有被正确压制。Phillips谱本身有一个kDotW项当波方向垂直于风向时能量应该极低但如果你把windAlign调到1.0就会强制把所有非顺风波全部清零波向过于集中网格感就来了。设到0.5~0.8之间保留少量垂直方向波海面会更自然。5.2 法线不平滑或者是闪烁法线闪烁常见于纹素尺寸和波浪波长不匹配的场景。波长比纹素细的高频波在采样时会出现走样导致法线方向在帧与帧之间跳动。源码里的解法是在做FFT时对高频频谱乘一个低通滤波器把频率高于Nyquist极限的波直接抹掉。我自己检查代码时如果没有这个滤波环节GPU的离散采样会把这些高频波折叠回低频表现为海面出现不存在的“幽灵波浪”。遇到闪烁先做两件事第一把相机拉远一点看整体如果闪烁集中在小范围波纹大概率是高频谱叠混第二临时把频谱纹理分辨率降到128如果闪烁消失说明分辨率不够、高频分量太多应该加滤波而不是加分辨率。5.3 性能瓶颈Draw Call与GPU带宽GPU FFT海洋模拟的瓶颈通常不在compute shader的计算量上而在纹理读写带宽。每帧要更新的频谱纹理、波高纹理、位移纹理加起来动不动就是512x512x4通道x多个实例带宽压力很大。源码里的性能优化点我总结了四个用RGFloat格式存h0频谱而不是默认的RGBAFloat省一半带宽。波高、法线、位移合并进同一张纹理的RGBA通道一次采样拿全。LOD远处的网格顶点不需要采样高频纹理shader里按距离降低采样次数。频谱更新和FFT只需要在相机可见时执行切到别的界面时可以暂停。实测下来iPhone级别的设备跑512分辨率FFT加四层LOD帧耗能控制在4到6毫秒基本可玩。如果还要加反射探针和实时阴影建议把FFT分辨率降到256或者把更新频率降到每两帧一次。5.4 常见问题速查表现象可能原因排查方向海面全是条纹频谱纹理wrap mode错误检查Clamp/Repeat设置波形重复感强风向过滤过强调低windAlign法线闪烁高频叠混加低通滤波或降分辨率波浪整体飘移色散关系用错确认深水公式sqrt(g*k)泡沫满屏白色foamScale和阈值不匹配提高阈值、降低scale海面发黑法线或光照方向反了检查法线y轴朝向远处和近处明显断裂LOD过渡没做渐变检查插值系数范围最后分享一点源码阅读的体会海洋模拟项目的源码解析本质上是在“三维渲染”和“数字信号处理”两个领域之间搭桥。很多人觉得FFT海洋模拟难是被公式吓住了其实把代码拆开看每一步都有非常明确的目的频谱生成是准备食材FFT是炒菜法线重建是摆盘。源码里那些看似奇怪的矩阵索引、-k坐标翻转、共轭计算都是在为“离散世界”服务理解了这层再回头读UGUI源码或Vue3源码那种动辄上百万行的项目也能快速定位关键路径。我个人的经验是拿到任何源码先不看实现细节花一个小时把数据流图在心里过一遍再下手读具体函数效率至少翻倍。这套海洋模拟项目我啃了两周前三天基本都在画数据流图后面读代码就越读越快希望能给你一条更顺的路径。