1. 项目概述从“一片蓝”到“一片海”的质变在Unity里做一片海这事儿听起来挺简单不就是铺个蓝色平面加点波浪动画吗我刚开始也这么想直到真正上手才发现从“一片蓝”到“一片海”中间隔着十万八千个技术细节。用户看到的可能是波澜壮阔、光影粼粼的视觉奇观而我们开发者面对的则是一连串的数学公式、渲染管线优化和美术参数的反复拉扯。这个“Unity海面效果”项目核心目标就是拆解这个复杂的视觉系统把它还原成一个个可理解、可控制、可实现的独立模块。为什么海面效果值得单独拿出来深究因为它几乎是实时渲染领域的“终极考题”之一。它综合了流体模拟、复杂光照、实时反射折射、LOD细节层次管理等多个高难度课题。无论是制作开放世界游戏的海域还是模拟器、数字孪生中的水域环境一个逼真且性能可控的海面都是提升沉浸感的关键。网上能找到的教程要么过于简单一个正弦波走天下要么直接丢给你一个庞大的资产包知其然不知其所以然。这篇内容我就想结合自己踩过的坑把海面效果从原理到构成的“黑盒”打开让你不仅能做出效果更能明白每一个参数背后的物理意义和渲染逻辑真正做到举一反三。2. 海面效果的核心原理不止是波浪海面的视觉复杂性源于其动态的几何形状与光线的复杂交互。我们不能把它当成一个简单的、贴了动态纹理的模型。它的核心原理可以分解为三个相互关联的层面几何形状的生成、光照与材质的计算以及后期效果的叠加。2.1 几何形状叠加的艺术海面的几何形状是动态变化的其核心是波谱理论的实时应用。我们不可能在CPU或顶点着色器里实时解算完整的流体力学方程如Navier-Stokes因此游戏行业普遍采用一种高效且效果不错的方案Gerstner波叠加。Gerstner波公式的精妙之处在于它不仅能改变顶点的高度Y轴还能同步改变顶点的水平位置XZ轴。这使得波峰更陡峭、波谷更平坦更接近真实海浪的形态。一个标准的Gerstner波函数会控制波的振幅、波长、传播方向和速度。而真实的海面是由数十个甚至上百个不同参数振幅、波长、方向、初相位的Gerstner波叠加而成的。这种叠加产生了看似随机、实则符合自然规律的复杂波面。注意直接使用大量正弦波叠加虽然计算简单但会产生过于“圆润”的波浪缺少真实海浪的尖锐波峰这是Gerstner波方案要解决的核心问题之一。在Shader中实现时我们通常在顶点着色器中进行波叠加计算。为了性能我们不会真的计算上百个波而是精选4-8个具有代表性波长从长波到短波的波进行叠加长波决定海面的大体起伏短波负责表面的细节波纹。剩下的更高频细节则交给法线贴图来模拟。2.2 光照与材质视觉真实感的来源有了起伏的几何形状下一步是让它“看起来像水”。这完全依赖于光照模型和材质属性的精确设置。海面材质是一个典型的非标准PBR基于物理的渲染材质。高光反射Specular平静的海面像镜子这是菲涅尔效应Fresnel Effect在起主导作用。在视线与水面夹角较小掠射角时反射率急剧增加这就是为什么我们总能看见远处海面上有一条明亮的高光带。在Shader中我们通常使用Schlick近似公式来计算菲涅尔系数并将其与一个基础反射颜色通常是天空盒或环境贴图混合。漫反射与水下散射Diffuse Subsurface Scattering海水不是完全不透明的。光线会穿透表层在水体中散射和吸收形成我们看到的蓝色或绿色。对于实时海面我们通常用一个基于深度的颜色渐变来近似模拟这种效果——浅水区颜色明亮如浅蓝、绿色深水区颜色深邃。更高级的模拟会加入简单的次表面散射SSS模型让薄水区域如浪尖透出一些背光。折射Refraction这是实现海水透明感和水下扭曲效果的关键。通常的做法是先渲染场景到一张纹理如抓取屏幕深度和颜色然后在海面Shader中根据水面法线和视线方向偏移这张纹理的UV坐标来采样“水下”的画面模拟光线弯曲的效果。这个偏移量需要精心控制太小没效果太大会显得虚假。法线Normal法线贴图在这里扮演双重角色。一是提供高频的波浪细节弥补几何波浪的不足二是驱动高光反射的细节变化让海面波光粼粼。通常我们会使用两张法线贴图以不同的速度和方向滚动叠加后产生复杂的、永不重复的波纹细节。2.3 泡沫与浪花动态细节的点睛之笔静态或规律的海面是缺乏生气的。泡沫Foam和浪花Spray是赋予海面动态灵魂的元素。它们的实现通常分为几个层次贴图泡沫基于海面几何的坡度或高度差生成泡沫贴图。例如当两个波峰相遇坡度剧变或波浪破碎顶点速度超过阈值时在相应区域通过Shader混合一张泡沫纹理。这属于屏幕空间或顶点/片元着色器级别的效果。粒子系统浪花对于飞溅的浪花、撞击礁石产生的喷雾必须使用GPU粒子系统。我们需要在海面网格的特定位置如船头、高速移动的顶点处发射粒子并赋予其符合物理的初速度和生命周期。Unity的VFX Graph或Shader Graph结合粒子系统是完成这项工作的利器。交互泡沫当物体如船、角色与海面交互时需要在交互位置动态生成泡沫轨迹。这通常通过渲染到一张世界空间的泡沫贴图Render Texture来实现物体移动时在贴图上“绘制”白色轨迹海面Shader再采样这张贴图来显示泡沫。3. 海面效果的构成元素拆解理解了原理我们就可以像搭积木一样构建自己的海面系统。一个完整的、可用于生产环境的海面通常由以下核心元素构成3.1 网格系统与LOD管理海面是一个无限延伸的平面但我们不可能渲染一个无限大的网格。标准做法是创建一个以摄像机为中心、随着摄像机移动的动态网格。平铺网格Tiled Grid将海面划分为多个相同大小的网格块Tile只渲染摄像机周围一定范围内的Tile。远处的Tile可以降低密度或直接剔除。投影网格Projected Grid一种更高级的技术将网格顶点直接投影到海面曲面上能在近处提供高细节在远处自动降低顶点密度实现平滑的LOD过渡且没有明显的Pop-in突然出现现象。这是许多3A级海面效果的首选方案。LOD策略必须根据距离设置不同的网格密度和波浪计算复杂度。例如距离摄像机500单位以内的网格使用全精度波浪计算和高分辨率法线500-1000单位使用简化波浪计算和低分辨率法线1000单位以外可能只渲染一个简单的平面加上环境反射。3.2 Shader海面渲染的灵魂海面Shader是一个复杂的、多通道的着色器。以下是其关键模块波浪计算模块在顶点着色器中实现Gerstner波或其他波浪模型的叠加计算。输入时间、波浪参数数组输出变换后的顶点位置和法线。光照计算模块在片元着色器中整合菲涅尔反射、环境光、直接光如方向光模拟太阳、折射计算。需要采样天空盒、屏幕抓取纹理等。法线混合模块将几何计算得到的法线与两张滚动法线贴图进行混合生成最终用于光照计算的表面法线。泡沫与深度模块根据深度图计算水岸交界、浅水颜色并根据坡度、速度等参数混合泡沫贴图。性能开关通过Shader变体Variants或关键字Keywords控制功能开关如是否开启折射、是否使用高质量菲涅尔、是否开启泡沫等以适应不同性能的平台。3.3 脚本与数据驱动所有上述效果都需要通过C#脚本进行动态控制和参数混合以实现不同天气、不同海域的效果变化。波浪参数控制编写一个WaveSpectrum类用于管理一组Gerstner波的参数振幅、波长、方向、速度。可以通过脚本动态调整这些参数来模拟从风平浪静到暴风骤雨的变化。环境交互脚本需要收集交互信息如船的位置、速度并将其传递给Shader通过全局Shader属性如Shader.SetGlobalVector或粒子系统以生成交互泡沫和浪花。动态网格管理脚本负责根据摄像机位置动态生成、回收或更新海面网格Tile的位置和LOD级别。性能监控与自适应高级的海面系统会包含性能监控在帧率下降时自动降低波浪复杂度、关闭折射等昂贵效果。3.4 辅助系统与后期处理海面不是孤立的它需要与周围环境融为一体。水下效果当摄像机进入水下时需要启用后处理效果包括颜色偏移偏蓝绿、模糊、焦散Caustics投影、光线衰减等。焦散效果可以通过在海底投射动态的光影纹理来模拟。天空与反射海面的反射质量极度依赖天空盒。一个高质量的、HDR格式的天空盒至关重要。对于动态物体如船、飞鸟在水面的反射可能需要使用平面反射Planar Reflection技术但这非常消耗性能需谨慎使用。后处理集成海面效果应与整体的后处理栈Post-processing Stack兼容特别是与Bloom辉光效果结合可以让海面的高光带更加真实耀眼。4. 从零搭建一个基础海面效果的实现步骤理论说再多不如动手做一遍。下面我以一个基于Shader Graph和脚本控制的基础海面为例拆解关键实现步骤。这里假设你使用URP通用渲染管线因为其可视化编辑更友好。4.1 第一步创建动态网格与基础材质我们不使用Unity自带的Water系统从更底层开始控制。生成网格创建一个空GameObject命名为“Ocean”。为其添加一个MeshFilter和MeshRenderer组件。写一个简单的脚本OceanMeshGenerator.cs在Start或Awake方法中动态生成一个N x N的平面网格例如100x100顶点。将这个脚本挂载到Ocean对象上。创建Shader Graph在URP中创建一个新的Shader Graph命名为“Ocean_Surface”。这是我们所有视觉效果的载体。基础材质用刚创建的Shader Graph创建一个材质球命名为“Mat_Ocean”并赋给Ocean对象的MeshRenderer。4.2 第二步在Shader Graph中实现Gerstner波这是最核心的一步我们在Shader Graph的Vertex阶段操作。获取顶点数据使用Position节点获取模型空间顶点位置。我们需要其x和z分量作为输入。构建波函数创建一个子图Subgraph或函数命名为“SingleGerstnerWave”。输入参数顶点xz坐标(Vector2)、时间(Time)、波方向(Vector2, 归一化)、波长(Float)、振幅(Float)、波速(Float)。计算波数k 2 * PI / 波长。计算相位phase k * dot(波方向, 顶点xz坐标) - 波速 * 时间。计算Gerstner偏移x偏移 波方向.x * (振幅 / k) * cos(相位)z偏移 波方向.y * (振幅 / k) * cos(相位)y高度 振幅 * sin(相位)输出为一个Vector3(x偏移, y高度, z偏移)。多波叠加在主图中创建多个“SingleGerstnerWave”节点赋予它们不同的参数例如一个长波、两个中波、一个短波。将它们的输出Vector3全部相加。应用偏移将叠加后的总偏移Vector3与原始的模型空间顶点Position相加得到新的顶点位置。通过Position节点输出。实操心得波速(波速)的计算通常与波长相关一个常见的经验公式是波速 sqrt(9.8 * 波长 / (2 * PI))模拟重力波。你可以让脚本计算好传给Shader也可以直接在Shader里算。4.3 第三步构建光照与材质在Fragment片元阶段我们处理颜色和光照。法线计算几何法线Gerstner波的一个优点是能解析计算法线。在“SingleGerstnerWave”子图中可以增加法线输出的计算对x偏移和y高度求偏导并同样进行多波叠加得到世界空间下的几何法线。细节法线采样两张法线贴图分别以不同的速度和方向进行UV滚动使用Time节点和Tiling Offset节点然后将两张法线通过Blend Normals节点混合。最后将混合后的细节法线与几何法线再次混合。菲涅尔反射使用View Direction节点和上面计算出的Normal节点。使用Fresnel Effect节点输入Power参数控制边缘硬度。输出一个0-1的系数fresnel。fresnel值越大视角越平反射越强。反射颜色使用Scene Color节点可能需要先配置URP的Renderer Feature以抓取屏幕或Skybox采样节点结合反射向量用Reflection Vector节点计算来获取反射颜色。简单起见初期可以直接用天空盒颜色。折射与水色使用Scene Depth节点获取当前像素的深度。计算水下深度并用这个深度值在Color节点定义的渐变Gradient上采样得到基础水色。为了模拟折射可以用细节法线的xy分量对Scene Color的UV进行一个微小的偏移再与水色混合。最终混合将反射颜色与水色/折射颜色根据fresnel系数进行线性插值Lerp。公式大致为最终颜色 lerp(水色, 反射颜色, fresnel)。然后再加上高光Specular计算通常使用简单的Blinn-Phong模型或直接使用URP的PBR光照节点。4.4 第四步添加泡沫与交互泡沫贴图准备一张黑白的泡沫噪声贴图。在Shader Graph中根据顶点世界位置的y值变化率近似坡度或顶点在Shader中的运动速度可以通过对顶点位置求时间导数得到来采样这张泡沫图。将采样结果与主颜色进行叠加Additive Blend。C#脚本控制创建OceanManager.cs脚本挂载在场景管理器上。定义可序列化的波浪参数结构体或数组方便在Inspector中调整。在Update中将这些参数通过Shader.SetGlobalVectorArray或材质属性块MaterialPropertyBlock传递给海面材质。可以加入风力的概念动态调整波浪的方向和强度。4.5 第五步性能优化与调试LOD简化目前我们的网格是静态的。优化方法是编写脚本根据摄像机距离动态生成不同细分程度的网格并为每个LOD级别创建简化了波浪计算的Shader变体例如远距离只计算1-2个主波。Shader变体在Shader Graph中利用Keyword节点。创建如_USE_REFRACTION_ON,_USE_FOAM_ON等关键字在脚本中根据设备性能或质量设置启用或禁用它们避免不必要的计算。GPU Instancing如果场景中有多个使用相同海面材质的物体虽然不常见确保在Shader Graph中启用GPU Instancing并合理组织材质属性。5. 常见问题、排查技巧与进阶方向即使按照步骤操作你也一定会遇到各种奇怪的问题。下面是我总结的一些“坑”和解决方法。5.1 常见问题速查表问题现象可能原因排查与解决思路海面闪烁或剧烈抖动Z-fighting海面网格与地形或其他水面网格深度值过于接近。1. 轻微抬高或降低海面网格的Y轴位置。2. 在Shader中对深度值增加一个微小的偏移Depth Offset节点。3. 确保地形和水面使用不同的渲染队列Render Queue。波浪看起来不自然像规则的“鸡蛋托”使用的波浪模型过于简单如纯正弦波或波浪参数方向、波长设置得过于规律。1. 切换到Gerstner波模型。2. 增加叠加的波浪数量4-8个。3. 为每个波的波长、方向、初相位引入一定的随机性避免同步。边缘地平线有硬边或接缝动态网格Tile的边缘顶点计算不一致或LOD切换时出现Pop-in。1. 确保网格Tile的生成算法在边界处共享顶点数据或使用投影网格自动解决接缝。2. 在LOD切换区域使用几何淡入淡出Geometry Dithering或Alpha混合过渡。反射内容错乱或缺失反射采样错误可能是反射向量计算有误或天空盒/场景纹理未正确设置。1. 在Shader中可视化输出反射向量作为颜色检查其方向是否正确。2. 检查URP渲染器资产是否正确配置了天空盒材质。3. 对于平面反射检查反射摄像机的裁剪平面和渲染层设置。泡沫出现在不该出现的地方或完全不出现泡沫生成的条件阈值设置不当。1. 将坡度或速度的计算结果在Shader中先输出为颜色进行调试观察其分布是否合理。2. 调整泡沫采样时的阈值和强度参数通常需要一个平滑步骤Smoothstep来控制。移动摄像机时海面“游动”或抖动波浪计算依赖于世界坐标但动态网格的顶点世界坐标随摄像机移动而跳变。使用基于世界原点稳定的平铺坐标进行计算。例如将顶点世界坐标减去摄像机位置再进行波浪计算确保波浪图案在世界中稳定而不是跟随网格移动。性能开销巨大帧率低下波浪计算过于复杂或片元着色器计算量太大如多重采样、复杂折射。1. 实施严格的LOD系统减少远处顶点的波浪计算量。2. 简化片元着色器关闭或降低折射质量使用更简单的菲涅尔近似。3. 使用Shader LOD为远距离对象使用简化版Shader。5.2 进阶优化与扩展方向当你实现了基础效果后可以考虑以下方向进行深化FFT海面快速傅里叶变换这是电影级离线和部分高端实时应用使用的技术。它通过频域生成高度场能产生统计学上更准确、频谱更丰富的海浪。在Unity中可以通过Compute Shader实现FFT性能要求较高但效果也最好。动态潮汐与交互让波浪与场景中的物体船、角色、岛屿进行物理交互。这可以通过在GPU上运行简化的波动方程或使用高度场查询和力反馈来实现。更真实的泡沫模拟将泡沫模拟为可以扩散、聚集、消散的粒子或流体而不仅仅是贴图。可以结合Unity的粒子系统或VFX Graph以及一张用于存储泡沫密度的Render Texture。光谱化波浪参数不要手动设置每一个波而是使用真实的海浪频谱如Phillips谱、JONSWAP谱来生成一组波浪参数这样能根据风速、风向等物理参数自动生成匹配的海面状态。海面效果的制作是一个深度与广度并存的领域它要求开发者横跨图形学、数学、美术和程序优化。从理解原理开始逐步搭建每一个模块不断调试和优化最终才能让那片虚拟的海洋“活”起来。这个过程充满挑战但当看到自己创造的海面在夕阳下泛起金色波光时那种成就感是无与伦比的。记住参数没有绝对的正确只有视觉上的和谐与性能上的平衡多观察真实世界的海洋你的“感觉”会是最好的调试工具。