1. 项目概述从“有水”到“有灵魂的水”在Unity里做水体渲染尤其是URP管线下的很多朋友可能都卡在“看起来像水”这个阶段。你照着教程调了基础颜色、加了法线贴图甚至做了简单的菲涅尔效果水面是有了但总觉得“死气沉沉”像一块蓝色的塑料布。问题出在哪核心往往在于高光的真实感和表面的动态细节。一个平静如镜、高光生硬的水面和一个波光粼粼、涟漪阵阵的水面带给玩家的沉浸感是天差地别的。这个项目要解决的就是如何将经典的Blinn-Phong高光模型与基于顶点偏移的动态波浪系统深度融合在Unity URP中打造出既有物理正确性、又有丰富动态细节的进阶水体。Blinn-Phong能提供比Lambert更柔和、更符合真实世界观察的高光而动态波浪则赋予了水面“呼吸”和“生命”。这不仅仅是两个技术的简单叠加更涉及到法线信息的动态融合、光照计算的适配以及性能开销的平衡。如果你想让你的游戏场景中的湖泊、河流或大海不再是一潭死水而是能随风而动、因光而熠的生动画卷那么这套融合技法正是你需要的工具箱。2. 核心思路拆解为什么是Blinn-Phong与顶点波浪在动手写Shader之前我们必须先想清楚技术选型背后的逻辑。为什么不用更流行的PBR为什么选择顶点波浪而非贴图流动2.1 高光模型的选择Blinn-Phong的实用主义在实时渲染特别是移动端或对性能有要求的项目中完全基于物理的渲染PBR虽然效果出色但其计算开销特别是BRDF的复杂计算和多张纹理采样可能成为瓶颈。对于水体这种大面积、且视觉重点在于表面反射和折射的特殊材质我们有时需要一种更轻量、更可控的方案。Blinn-Phong模型就是一个经典的、非物理的但视觉效果很好的选择。它与更基础的Phong模型核心区别在于半角向量Half Vector的使用。Phong模型计算反射向量R与视线向量V的点积。这需要先计算反射方向计算量稍大且高光区域在掠射角观察时容易断裂或不自然。Blinn-Phong模型计算法线N与半角向量H的点积。半角向量H是光线方向L和视线方向V的中间向量H normalize(L V)。这种方式计算更简单并且产生的高光区域更大、更柔和更接近真实物体表面微平面散射光线的效果尤其是在低光泽度时。对于水体表面其微观结构是复杂且不断变化的Blinn-Phong产生的这种“软”高光更能模拟阳光在水面波光上形成的片状、闪烁的效果而不是一个生硬的光斑。它为我们提供了一个通过_Gloss光泽度和_SpecularColor高光颜色两个参数就能灵活控制水面“耀斑”强度和范围的直观方法。2.2 动态波浪的实现顶点位移的得与失让水动起来主流方法有法线贴图滚动、顶点着色器位移、曲面细分位移贴图、Compute Shader计算等。对于追求中等效果和较好性能平衡的URP项目在顶点着色器中叠加多个正弦/余弦波是一个非常经典且高效的策略。它的优势很明显完全动态无需纹理波浪的形态由数学公式实时计算不受纹理分辨率限制可以做出非常大尺度的、平滑的波浪。性能可控计算开销与顶点数直接相关且公式简单。通过控制波浪数量通常2-4个和频率可以在低配设备上良好运行。易于与交互结合因为波浪是代码计算的很容易根据玩家位置、技能释放等事件动态添加新的波源实现石头落水、船尾浪等交互效果。当然它的缺点也需要正视顶点依赖波浪细节取决于模型网格的顶点密度。一个低精度的水面网格无法表现小涟漪。波浪样式局限正弦波虽然基础但通过叠加不同参数振幅、频率、方向也能模拟出复杂的海面不过要模拟非常特定的波浪形态如靠近岸边的碎浪会比较困难。我们的思路就是用顶点波浪塑造水体的大体形态和基础运动用Blinn-Phong计算基于此动态形态的高光同时辅以一张细节法线贴图滚动采样来补充顶点波浪缺失的高频细节。这样我们就得到了一个层次丰富、动静结合的水体表面。3. 核心Shader实现详解下面我们一步步拆解一个URP Lit Shader的改写过程融入上述两大核心技法。我们将基于URP的Lit着色器模板进行修改这是最规范的方式。3.1 数据结构准备在Attributes和Varyings中传递波浪数据首先我们需要在顶点着色器的输入和输出结构中添加必要的信息。// 在原有的Attributes结构体旁或直接在Properties中定义后传递 struct Attributes { float4 positionOS : POSITION; float3 normalOS : NORMAL; float4 tangentOS : TANGENT; float2 texcoord : TEXCOORD0; // 为了波浪计算我们通常需要世界坐标。也可以在这里传递或在顶点着色器计算。 }; struct Varyings { float2 uv : TEXCOORD0; float3 positionWS : TEXCOORD1; // 世界空间顶点位置用于波浪和光照计算 float3 normalWS : TEXCOORD2; // 世界空间法线 float3 viewDirWS : TEXCOORD3; // 世界空间视线方向 float4 positionCS : SV_POSITION; // 裁剪空间位置 };这里的关键是positionWS。我们将在顶点着色器中计算波浪位移并输出变换后的世界坐标供片元着色器计算光照使用。normalWS也需要相应更新因为顶点位移后法线方向已经改变。3.2 顶点波浪函数设计叠加多个Gerstner波一个标准的、可配置的波浪函数是核心。我们采用改进的Gerstner波函数它能使波峰更尖波谷更平缓更接近真实海浪。// 定义一个波浪参数结构体方便管理和调整 struct WaveParameters { float amplitude; // 振幅波峰到静止水面的高度 float frequency; // 频率单位距离内的波数与波长成反比 float speed; // 速度波向前传播的速度 float2 direction;// 方向波浪传播的归一化二维向量 (x, z) float steepness; // 陡峭度控制波峰的尖锐程度 (0~1) }; // 核心波浪位移函数 float3 GerstnerWave(float3 vertexWorldPos, WaveParameters wave, inout float3 tangent, inout float3 binormal) { float w 2 * PI * wave.frequency; float phase wave.speed * w; float angle w * dot(wave.direction, vertexWorldPos.xz) _Time.y * phase; float cosA cos(angle); float sinA sin(angle); // 计算顶点在XZ平面的偏移Gerstner波的特点 float2 offsetXY wave.steepness * wave.amplitude * wave.direction * cosA; // 计算Y轴高度的偏移 float offsetY wave.amplitude * sinA; // 更新切线和副法线用于计算新的法线 float wa w * wave.amplitude; tangent float3( -wave.direction.x * wave.direction.x * wave.steepness * wa * sinA, wave.direction.x * wa * cosA, -wave.direction.x * wave.direction.y * wave.steepness * wa * sinA ); binormal float3( -wave.direction.x * wave.direction.y * wave.steepness * wa * sinA, wave.direction.y * wa * cosA, -wave.direction.y * wave.direction.y * wave.steepness * wa * sinA ); return float3(offsetXY.x, offsetY, offsetXY.y); }在顶点着色器中我们叠加多个这样的波Varyings vert(Attributes input) { Varyings output (Varyings)0; // 1. 将顶点和法线转换到世界空间初始状态 VertexPositionInputs vertexInput GetVertexPositionInputs(input.positionOS.xyz); VertexNormalInputs normalInput GetVertexNormalInputs(input.normalOS, input.tangentOS); float3 positionWS vertexInput.positionWS; float3 normalWS normalInput.normalWS; float3 tangentWS normalInput.tangentWS; float3 binormalWS normalInput.bitangentWS; // 也就是副法线 // 2. 应用多个波浪位移 WaveParameters wave1 {_Amplitude1, _Frequency1, _Speed1, normalize(float2(1.0, 0.5)), _Steepness1}; WaveParameters wave2 {_Amplitude2, _Frequency2, _Speed2, normalize(float2(-0.7, 0.3)), _Steepness2}; // 可以定义更多波... float3 waveOffset float3(0, 0, 0); waveOffset GerstnerWave(positionWS, wave1, tangentWS, binormalWS); waveOffset GerstnerWave(positionWS, wave2, tangentWS, binormalWS); positionWS waveOffset; // 3. 计算波浪位移后的新法线 // 法线 切线 (Tangent) 与 副法线 (Bitangent) 的叉积 normalWS normalize(cross(binormalWS, tangentWS)); // 4. 填充输出结构 output.positionWS positionWS; output.normalWS normalWS; output.viewDirWS GetWorldSpaceNormalizeViewDir(positionWS); // URP内置函数 output.uv TRANSFORM_TEX(input.texcoord, _BaseMap); output.positionCS TransformWorldToHClip(positionWS); return output; }注意这里我们直接修改了世界空间的位置和法线。GetVertexPositionInputs和GetVertexNormalInputs是URP ShaderLibrary提供的函数能正确处理各种空间变换。在计算新法线时我们利用了Gerstner波函数中已更新的切线和副法线进行叉乘这是计算动态法线最准确的方法之一。3.3 片元着色器融合动态法线与Blinn-Phong高光顶点着色器输出了动态计算后的世界位置和法线。在片元着色器中我们要用它来进行光照计算。half4 frag(Varyings input) : SV_Target { // 1. 采样基础颜色、法线贴图等 half4 baseColor SAMPLE_TEXTURE2D(_BaseMap, sampler_BaseMap, input.uv) * _BaseColor; half3 detailNormalTS UnpackNormal(SAMPLE_TEXTURE2D(_BumpMap, sampler_BumpMap, input.uv _Time.y * _BumpSpeed)); // 2. 构建TBN矩阵将细节法线从切线空间转到世界空间 float3 normalWS input.normalWS; // 来自顶点着色器的动态法线 // 注意这里的tangentWS和bitangentWS也需要从顶点着色器传递下来或者用宏重新计算。 // 简单起见我们假设顶点着色器已传递需在Varyings中添加。 float3x3 TBN float3x3(input.tangentWS, input.bitangentWS, normalWS); float3 detailNormalWS normalize(mul(detailNormalTS.xyz, TBN)); // 3. 混合顶点法线和细节法线 // 通常用lerp或者根据斜率、深度等因子进行混合。这里简单线性混合。 float3 finalNormalWS normalize(lerp(normalWS, detailNormalWS, _BumpStrength)); // 4. 准备光照计算所需向量 float3 viewDirWS normalize(input.viewDirWS); Light mainLight GetMainLight(); // 获取主光源如方向光 float3 lightDirWS normalize(mainLight.direction); float3 halfDirWS normalize(lightDirWS viewDirWS); // 关键Blinn-Phong的半角向量 // 5. 计算漫反射 (Lambert) float NdotL saturate(dot(finalNormalWS, lightDirWS)); half3 diffuse mainLight.color * NdotL * baseColor.rgb; // 6. 计算高光 (Blinn-Phong) float NdotH saturate(dot(finalNormalWS, halfDirWS)); float specularPower exp2(_Gloss * 10 1); // 将0-1的Gloss映射到较大的幂指数 float specularTerm pow(NdotH, specularPower); // 加入菲涅尔近似使掠射角高光更强 float fresnel pow(1.0 - saturate(dot(viewDirWS, finalNormalWS)), _FresnelPower); specularTerm * fresnel; half3 specular mainLight.color * _SpecularColor.rgb * specularTerm * _SpecularIntensity; // 7. 组合最终颜色简化版未考虑环境光、阴影等 half3 finalColor diffuse specular; // 8. 应用URP的雾效和后期处理输入 // finalColor MixFog(finalColor, input.fogFactor); return half4(finalColor, baseColor.a); }这段代码清晰地展示了流程采样基础纹理和细节法线贴图 - 将细节法线转换到世界空间 - 与顶点计算出的动态法线混合 - 使用混合后的最终法线计算Blinn-Phong高光。其中_Gloss控制高光斑的大小幂指数_SpecularIntensity控制整体强度_FresnelPower控制菲涅尔效应的强弱这些参数都能让你灵活地调整水面的视觉表现。4. 参数调优与视觉打磨Shader写好了但出来的效果可能不尽如人意。这时参数调优就是魔法发生的地方。下面是一个参数调优的参考表格描述了每个参数对视觉的影响及调整思路。参数类别参数名典型值范围视觉影响调优技巧波浪形态_Amplitude(振幅)0.05 - 0.5波峰高度。值越大浪越高。远景用大波长中振幅近景可加小波长小振幅做涟漪。避免过大导致模型穿帮。_Frequency(频率)0.5 - 2.0波长密度。值越大波越密集。高低频波浪叠加如1.0和0.2能产生更自然的海面频谱。_Speed(速度)0.5 - 2.0波浪移动快慢。与频率正相关高频波速度可稍快。用_Time.y * _Speed控制动画。_Direction(方向)归一化向量波浪传播方向。使用两个方向略有差异的波叠加模拟复杂洋流。_Steepness(陡峭度)0.0 - 0.8波峰尖锐度。0为正弦波值越大峰越尖、谷越平。0.3-0.6能产生较好的海浪感过大可能导致顶点聚集产生褶皱。高光表现_Gloss(光泽度)0.7 - 0.95高光区域大小。值越大光斑越小、越集中。水体表面微观粗糙光泽度不宜过高如0.85。风浪大时可适当降低。_SpecularColor(高光色)RGB (常偏白/蓝)高光颜色。可采样天空盒颜色实现环境反射。或设为浅蓝色(0.8,0.9,1.0)模拟水体散射。_SpecularIntensity(强度)0.5 - 2.0高光亮度。白天可强1.5夜晚或阴天需弱0.5。可与主光强度关联。_FresnelPower(菲涅尔幂)3.0 - 5.0掠射角高光增强程度。值越大效应越明显。设为4.0是很好的起点。观察水面边缘的闪烁是否自然。细节融合_BumpStrength(法线强度)0.1 - 0.5细节法线贴图的影响强度。过强会与顶点波浪冲突产生“油污”感。0.2-0.3通常足够。_BumpSpeed(法线流速)float2 (0.05, 0.05)细节法线贴图滚动速度。用两个不同速度和大小的UV偏移叠加模拟多层次流动。实操心得调参时务必在游戏运行的最终环境下进行包括后处理、光照设置。一个常见的技巧是创建几个不同的波浪参数预设如“平静湖泊”、“轻风河流”、“汹涌海洋”通过脚本在运行时根据场景区域切换实现水体类型的多样化。5. 性能优化与进阶技巧一个好看的水体如果导致帧率骤降就失去了意义。以下是针对此方案的优化点和进阶思路。5.1 性能优化要点控制波浪数量在顶点着色器中每多一个波就多一组正弦/余弦计算和向量运算。对于移动端2个波是安全的3个波需测试4个波可能压力较大。可以通过Shader变体或材质属性开关为不同画质等级配置不同数量的波。简化波浪函数在远处或非焦点区域可以使用简化版的波浪函数例如只计算Y轴位移忽略XZ位移和对切/副法线的复杂更新甚至回退到简单的正弦波叠加。LOD细节层次为水体模型设置LOD Group。距离摄像机远时使用顶点数更少的模型并对应使用计算量更少的Shader变体减少波浪数量、关闭细节法线混合。GPU Instancing确保Shader支持GPU Instancing。如果场景中有多个使用相同材质的水体网格这能极大减少Draw Call。纹理优化细节法线贴图使用压缩格式如BC5/DXT5nm尺寸不宜过大512x512或256x256通常足够。确保Mipmap生成正确避免远处闪烁。5.2 进阶效果融合深度交互与泡沫采样场景深度纹理计算水面像素与水下地面的深度差。在浅水区可以让水色变淡并混合一张泡沫贴图在波浪的波峰处通过顶点波浪的Y轴导数或法线朝上的程度来判断波峰。折射与焦散使用GrabPass或URP的_CameraOpaqueTexture抓取屏幕背景根据水面法线进行扰动模拟折射。结合深度信息可以在水底投射简单的焦散光斑。波浪交互在C#脚本中维护一个波源列表位置、强度、半径、衰减。在Shader中遍历所有有效波源可限制数量计算当前顶点到每个波源的距离叠加一个圆形扩散的波浪位移。这能实现物体入水、船行浪等动态效果。与URP渲染特性集成确保你的Shader能正确接收投影需要_MainLightShadowParams并能与URP的后处理如Color Grading, Bloom良好配合。高光部分特别适合触发Bloom效果让波光更加璀璨。6. 常见问题与排查实录即使按照步骤操作你也可能会遇到一些“坑”。这里记录了几个典型问题及其解决方法。问题现象可能原因排查与解决思路水面闪烁或剧烈抖动1. 波浪频率(_Frequency)过高。2. 顶点着色器中位置计算精度不足。3. 没有使用_Time.y而用了_Time.x导致时间跳跃。降低频率值。确保顶点位置计算使用float精度在CG/HLSL中顶点着色器内用float片元着色器内可用half。统一使用_Time.y自游戏开始的时间秒。高光边缘生硬或有锯齿1. Blinn-Phong的幂指数(specularPower)过高。2. 法线贴图或动态法线精度不够导致NdotH变化不平滑。降低_Gloss值使高光区域变大变柔和。检查法线贴图是否正确解压UnpackNormal确保动态法线计算后已normalize。波浪看起来不自然像整齐的条纹1. 使用的波浪方向太单一或频率成倍数关系。2. 缺少低频大波浪或高频小涟漪的叠加。使用无理数比例的频率如1.0和1.618。叠加至少一个方向不同如相差30-60度的波。增加一个振幅很小、频率很高的波作为细节。水面与岸边交界处有裂缝或悬浮1. 水体网格的边界顶点没有与岸边地形完美贴合。2. 波浪位移导致边界顶点上抬脱离地形。确保水体网格的边界顶点在建模时就与地形轮廓匹配。在Shader中对靠近岸边的顶点可通过顶点色或UV通道标记进行波浪强度衰减直至为0。在移动端上帧率很低1. 波浪计算过于复杂或波浪数量过多。2. 片元着色器计算太重如多次纹理采样、复杂光照模型。使用Shader变体为移动端提供简化版波浪函数如只算Y位移。检查是否在片元着色器进行了不必要的循环或分支。使用性能分析工具定位瓶颈。透明排序错误水面遮挡关系混乱URP中透明物体的渲染顺序问题。在Shader中明确设置QueueTransparent和RenderTypeTransparent。考虑使用Offset指令微调深度。对于复杂水体可能需分割为不透明水下部分和透明水面反射/折射两个Pass来渲染。调试Shader时一个非常有效的方法是可视化中间变量。例如你可以临时将finalNormalWS、specularTerm或波浪位移的Y分量输出为颜色来直观地观察它们的分布和范围是否正确这能快速定位问题是出在波浪计算、法线变换还是光照环节。最后记住没有“放之四海而皆准”的水体参数。一片热带潟湖的平静水面和北大西洋的狂风巨浪其参数组合截然不同。最好的老师是观察现实世界中的水体或者参考优秀的游戏作品不断调试和迭代直到找到最适合你项目艺术风格的那一组“魔法数字”。