为什么你的水面效果总是像一块塑料布为什么别人的游戏里水面能随角色移动泛起涟漪能倒映出动态的天空而你的水面却静止、虚假缺乏灵魂这背后缺失的往往不是复杂的物理模拟而是一套对水面Shader核心技法从原理到实战的透彻理解。本文将从ShaderFX联合创作者的实战视角出发彻底拆解一个高质量交互式水面效果的全套实现技法。我们不只讲“如何写代码”更要讲清楚“为什么这样写”以及“如何写得更好”。你将了解到一个令人信服的水面效果是如何通过噪声、法线、菲涅尔效应、深度、反射和折射等关键技术的组合从简单的波纹一步步构建成能与玩家互动的动态场景核心的。无论你是Unity、Unreal Engine还是其他图形引擎的开发者这里提供的思路和代码都具有普适的参考价值。1. 这篇文章真正要解决的问题从“看起来像”到“感觉真实”在图形开发中实现一个“看起来像”水面的效果并不难一个蓝色的平面加上一些滚动纹理就能做到。但真正的挑战在于实现一个“感觉真实”的水面。这种真实感来源于多个层次的叠加动态的细节静止的水面是不自然的。真实的水面有持续、无序的微小波动高频细节也有缓慢、大范围的起伏低频运动。对环境的响应水面不是孤立的。它应该倒映天空和周围景物反射也应该透出水下的物体或底部折射。更重要的是当物体如角色、船只、雨滴接触水面时应产生即时的、物理上合理的涟漪。视觉的物理正确性观察角度不同水面的外观也不同菲涅尔效应。水的颜色会随着深度变化。波浪的顶部和底部应有明暗区别法线光照。很多开发者卡在第一步他们叠加了多层噪声纹理来模拟波纹但效果生硬或者实现了反射但性能开销巨大且边缘锯齿严重。更棘手的是交互式涟漪网上代码片段很多但集成到动态水面上时涟漪要么瞬间消失要么相互叠加产生奇怪的视觉 artifact。本文将系统性地解决这些问题。我们将构建一个模块化的水面Shader从基础波纹生成开始逐步集成环境交互、光照模型和实时交互系统。最终你将获得一个可扩展的、性能可控的、视觉效果专业的交互式水面解决方案并深刻理解其中每一步的技术选型与权衡。2. 核心概念构建水面Shader的六大技术支柱在深入代码之前我们必须统一认知。一个完整的交互式水面Shader通常建立在以下几个核心概念之上1. 顶点位移与法线生成这是水面动起来的根基。我们通过在Shader的顶点着色器中对网格顶点的y轴高度进行扰动来模拟波浪。常用的方法是使用正弦波、Gerstner波或者更常见且效果丰富的——基于噪声纹理Noise Texture的采样。顶点位置改变后其对应的法线向量也必须重新计算否则光照会出错。法线通常可以通过对位移函数求偏导获得或直接使用预制的法线贴图叠加动态计算的法线。2. 多层噪声混合单一频率的波浪非常假。真实感来源于多尺度细节的叠加。我们会使用至少两层通常更多不同频率、速度和幅度的噪声采样进行混合。一层模拟大的、缓慢的涌浪另一层模拟小的、快速的波纹。混合时需要精心控制权重避免出现规律性的重复图案。3. 反射与折射这是水面与环境融合的关键。 *反射通常通过采集环境贴图Cubemap或使用平面反射Planar Reflection技术实现。平面反射效果更准确但性能代价高需要额外渲染一次场景环境贴图性能好但无法反射动态物体。 *折射可以通过采集屏幕后处理纹理GrabPass或使用深度纹理重建水下世界坐标来实现。简单做法是扰动屏幕UV来模拟光线弯曲。4. 菲涅尔效应描述观察角度与反射/折射光强比例的关系。当垂直看向水面时更容易看到水底折射主导当掠射角度观察时则看到更多倒影反射主导。在Shader中我们使用视角向量与水面法线的点积来计算菲涅尔因子并用它来混合反射和折射颜色。5. 深度与边缘泡沫水体的视觉厚度感由深度决定。我们通过比较水面像素的深度和场景深度缓冲中的深度值得到水深。浅水区颜色更亮可能透出水底沙石深水区颜色更暗、更饱和。在水体与岸边或其他物体相交的边缘通过深度差可以生成泡沫线极大增强真实感。6. 交互式涟漪系统这是让水面“活”起来响应游戏逻辑的点睛之笔。其核心思想是在游戏逻辑中如C#脚本检测物体与水面的碰撞在碰撞点生成一个“涟漪源”。将这个源的位置、强度和半径等信息传递到Shader中。在Shader中每个像素计算其到各个涟漪源的距离根据距离施加一个波形扰动通常是圆形扩散的波。多个涟漪需要平滑叠加。理解了这六大支柱我们就有了清晰的施工蓝图。接下来我们从零开始搭建。3. 环境准备与前置条件本文的示例代码将以Unity引擎和HLSL/ShaderLab语法为主但其原理完全适用于Unreal Engine材质蓝图/HLSL、Three.jsGLSL或其他图形API。选择Unity是因为其ShaderLab框架清晰便于演示从属性定义到最终渲染的完整流程。所需环境Unity版本2020.3 LTS 或更新版本确保包含URP/HDRP管线但本文核心代码不依赖特定渲染管线Built-in管线也可运行。渲染管线为获得最佳效果和现代功能如深度纹理自动获取建议使用通用渲染管线URP。本文代码会兼顾Built-in RP的兼容性说明。Shader编写工具Visual Studio、VS Code或Rider安装Shaderlab和HLSL插件以便高亮。基础资源一张噪声纹理Noise Texture一张用于模拟细节的法线贴图Normal Map。可以在Unity的Standard Assets或网上免费资源库中找到。关键设置URP下创建URP Asset如果尚未创建Assets - Create - Rendering - URP Asset (with Universal Renderer)。将URP Asset赋给项目Graphics设置。在URP Asset的Renderer列表中找到你的Renderer确保其Depth Texture和Opaque Texture选项是开启的默认通常开启。这是我们实现深度边缘泡沫和屏幕空间折射的基础。4. 第一步创建基础水面网格与Shader框架首先我们在场景中创建一个简单的平面GameObject - 3D Object - Plane作为水面基础。将其Scale调大比如(10, 1, 10)。然后创建一个新的Unlit Shader因为光照我们将自己控制命名为WaterShader。// 文件Assets/Shaders/WaterShader.shader Shader Custom/WaterShader { Properties { // 我们将在这里逐步添加属性 _MainTex (Base Color (RGB), 2D) white {} _Color (Water Color, Color) (0.1, 0.3, 0.5, 1.0) } SubShader { Tags { RenderTypeTransparent QueueTransparent } LOD 100 // 为了进行折射我们可能需要抓取屏幕内容 GrabPass { _GrabTexture } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include UnityCG.cginc struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; // 后续会添加更多数据如世界坐标、视角向量等 float4 worldPos : TEXCOORD1; }; sampler2D _MainTex; float4 _MainTex_ST; fixed4 _Color; v2f vert (appdata v) { v2f o; o.vertex UnityObjectToClipPos(v.vertex); o.uv TRANSFORM_TEX(v.uv, _MainTex); o.worldPos mul(unity_ObjectToWorld, v.vertex); // 计算世界坐标 return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col tex2D(_MainTex, i.uv) * _Color; return col; } ENDCG } } FallBack Diffuse }这是一个最基础的Shader框架。目前它只是一个简单的着色器。我们创建了一个材质球将其Shader选为Custom/WaterShader并拖给场景中的平面。此时你只能看到一个纯色或有纹理的平面。关键点解析Tags { RenderTypeTransparent QueueTransparent }我们将水面定义为透明物体以便处理反射折射的混合。GrabPass { _GrabTexture }在Built-in管线中这行代码会在渲染该物体前将当前屏幕内容抓取到一张名为_GrabTexture的纹理中用于后续的折射扭曲。在URP中有更高效的方式_CameraOpaqueTexture我们后面会调整。v2f结构体顶点着色器到片元着色器的数据传递桥梁。我们预埋了worldPos为后续计算做准备。5. 核心技法拆解一基于噪声的顶点动画与法线计算静态的水面是死的。我们首先让顶点动起来。1. 添加噪声属性与采样在Properties块和CGPROGRAM内部的变量声明部分添加// Properties 内添加 _NoiseTex (Noise Texture, 2D) white {} _WaveSpeed (Wave Speed, Float) 0.5 _WaveAmp (Wave Amplitude, Float) 0.1 _WaveFreq (Wave Frequency, Float) 1.0 // CGPROGRAM 内部变量声明 sampler2D _NoiseTex; float4 _NoiseTex_ST; float _WaveSpeed; float _WaveAmp; float _WaveFreq;2. 修改顶点着色器我们使用噪声纹理的两层采样不同缩放和速度来制造多尺度波动。v2f vert (appdata v) { v2f o; // 对原始顶点坐标进行动画扰动 float4 worldPos mul(unity_ObjectToWorld, v.vertex); float2 noiseUV worldPos.xz * 0.1; // 第一层噪声大尺度 noiseUV _Time.y * _WaveSpeed * 0.1; // 采样噪声值域映射到[-1, 1] float noise tex2Dlod(_NoiseTex, float4(noiseUV, 0, 0)).r * 2 - 1; // 应用位移到本地顶点更简单或世界顶点 // 这里选择在世界空间计算位移再转换回本地空间进行顶点变换简化示例 // 更常见的做法是直接扰动输入的模型顶点 float4 displacedVertex v.vertex; displacedVertex.y noise * _WaveAmp; // 第二层高频细节可选在片元着色器中用法线贴图表现更高效 // float2 noiseUV2 worldPos.xz * 0.5 _Time.y * _WaveSpeed; // float noise2 tex2Dlod(_NoiseTex, float4(noiseUV2, 0, 0)).r * 2 - 1; // displacedVertex.y noise2 * _WaveAmp * 0.3; o.vertex UnityObjectToClipPos(displacedVertex); o.uv TRANSFORM_TEX(v.uv, _MainTex); o.worldPos mul(unity_ObjectToWorld, displacedVertex); // 使用扰动后的顶点计算世界坐标 return o; }现在运行水面应该有了缓慢的起伏。但如果你旋转视角会发现光照是错的因为法线没有更新。3. 计算动态法线法线可以通过计算位移函数的导数来近似。对于基于纹理的位移一个实用技巧是使用中心差分法在Shader中计算。 我们在顶点着色器中计算世界空间下的法线或切线空间法线并传递给片元着色器。但更常见的做法是在片元着色器中通过对噪声纹理进行多次采样当前点、右边点、上边点来估算该片元所在表面的斜率从而得到法线。这种方法精度更高适合片元着色器。首先在v2f结构体中添加法线和切线相关变量struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; float4 worldPos : TEXCOORD1; float3 worldNormal : TEXCOORD2; // 世界空间法线 float3 worldTangent : TEXCOORD3; // 世界空间切线可选用于精确计算 float3 worldBinormal : TEXCOORD4; // 世界空间副切线 };在顶点着色器中我们需要计算这些向量。一个简化版本是直接使用模型自带的法线但动画后不准确。更准确的方法需要传递模型的切线并在顶点着色器中构建TBN矩阵。为了简化我们将在片元着色器中基于噪声直接计算法线扰动这更符合“细节法线”的做法。4. 片元着色器中的细节法线合成我们准备一张水的法线贴图并用世界坐标和时间为UV进行滚动采样模拟高频细节。// Properties 添加 _NormalMap (Normal Map, 2D) bump {} _NormalScale (Normal Scale, Range(0, 2)) 1.0 _NormalSpeed (Normal Speed, Float) 0.2 // 变量声明 sampler2D _NormalMap; float4 _NormalMap_ST; float _NormalScale; float _NormalSpeed; // 在 frag 函数中 fixed4 frag (v2f i) : SV_Target { // 计算用于采样的UV使其滚动 float2 normalUV1 i.worldPos.xz * 0.1 _Time.y * _NormalSpeed * float2(0.2, 0.3); float2 normalUV2 i.worldPos.xz * 0.05 - _Time.y * _NormalSpeed * float2(0.1, -0.2); // 解包法线贴图从[0,1]映射到[-1,1] float3 normalTex1 UnpackNormal(tex2D(_NormalMap, normalUV1)); float3 normalTex2 UnpackNormal(tex2D(_NormalMap, normalUV2)); // 混合两层细节法线 float3 detailNormal normalize(float3(normalTex1.xy normalTex2.xy, normalTex1.z * normalTex2.z)); // 将细节法线从切线空间转换到世界空间这里简化假设水面是平的切线为(1,0,0)副切线为(0,0,1) float3 worldNormal detailNormal; // 更严谨的做法需要从顶点传入TBN矩阵 // ... 后续将使用 worldNormal 进行光照计算 }至此我们有了动态的顶点波浪和丰富的表面法线细节。水面已经“活”了起来。6. 核心技法拆解二菲涅尔效应与反射/折射合成这是决定水面视觉质感的关键一步。我们将计算菲涅尔因子并用它来混合反射颜色和折射颜色。1. 准备反射与折射源反射使用环境立方体贴图Cubemap。Unity中可以通过UNITY_SAMPLE_TEXCUBE采样unity_SpecCube0来获取天空盒反射。对于平面反射需要额外的渲染步骤本文为简化使用Cubemap。折射在Built-in管线我们使用GrabPass得到的_GrabTexture。在URP管线我们使用_CameraOpaqueTexture。修改Shader以支持两种管线// 在CGPROGRAM上方根据管线定义宏 #ifdef UNITY_URP #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareOpaqueTexture.hlsl #define SAMPLE_GRAB_TEXTURE(name, uv) SampleSceneColor(uv) #else // Built-in sampler2D _GrabTexture; float4 _GrabTexture_ST; #define SAMPLE_GRAB_TEXTURE(name, uv) tex2D(name, uv) #endif // Properties 添加 _ReflectionStrength (Reflection Strength, Range(0, 1)) 0.8 _RefractionStrength (Refraction Strength, Range(0, 1)) 0.5 _FresnelPower (Fresnel Power, Float) 5.02. 修改片元着色器计算菲涅尔并混合fixed4 frag (v2f i) : SV_Target { // 1. 计算世界空间下的视角方向 float3 viewDir normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz); // 2. 获取细节法线上一节已计算 float3 worldNormal /* ... 从上一节获取计算好的世界空间法线 ... */; // 3. 计算菲涅尔因子 (Schlick近似) float fresnelBias 0.04; // 基础反射率对于水大约是0.02-0.05 float fresnel max(fresnelBias, 1.0 - dot(viewDir, worldNormal)); fresnel pow(fresnel, _FresnelPower); // 指数控制边缘过渡锐利度 // 4. 采样反射环境Cubemap float3 reflectDir reflect(-viewDir, worldNormal); float4 reflectionColor UNITY_SAMPLE_TEXCUBE(unity_SpecCube0, reflectDir); reflectionColor.rgb DecodeHDR(reflectionColor, unity_SpecCube0_HDR).rgb; // 解码HDR // 5. 采样折射屏幕抓取 // 计算屏幕UV float4 screenPos ComputeScreenPos(i.vertex); float2 screenUV screenPos.xy / screenPos.w; // 根据法线扰动屏幕UV来模拟折射 float2 refractionOffset worldNormal.xz * _RefractionStrength * 0.05; screenUV refractionOffset; float4 refractionColor SAMPLE_GRAB_TEXTURE(_GrabTexture, screenUV); // 6. 混合反射与折射 float3 waterColor lerp(refractionColor.rgb, reflectionColor.rgb, fresnel); // 也可以再乘上一个基础水色 waterColor * _Color.rgb; return float4(waterColor, 0.8); // 输出带透明度的颜色 }现在你的水面应该已经具备了基本的视觉特征边缘反射强中心透射多并且有因法线扰动而产生的扭曲折射效果。7. 核心技法拆解三深度与边缘泡沫没有深度感的水面像一层漂浮的油膜。我们需要根据水深来调制颜色并在水陆交界处生成泡沫。1. 获取深度信息在URP中深度纹理是内置提供的。在Built-in中需要设置Camera的depthTextureMode并声明_CameraDepthTexture。// 在CGPROGRAM变量声明部分 #ifdef UNITY_URP // URP中通过函数获取深度 #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareDepthTexture.hlsl #define SAMPLE_DEPTH_TEXTURE(uv) SampleSceneDepth(uv) #else // Built-in sampler2D _CameraDepthTexture; #define SAMPLE_DEPTH_TEXTURE(uv) tex2D(_CameraDepthTexture, uv).r #endif // Properties 添加 _DepthColorShallow (Shallow Water Color, Color) (0.2, 0.6, 0.8, 1) _DepthColorDeep (Deep Water Color, Color) (0.0, 0.1, 0.3, 1) _DepthMaxDistance (Depth Max Distance, Float) 10.0 _FoamIntensity (Foam Intensity, Range(0, 5)) 1.0 _FoamThreshold (Foam Threshold, Float) 0.42. 在片元着色器中计算深度与泡沫fixed4 frag (v2f i) : SV_Target { // ... 之前的代码计算 viewDir, worldNormal, fresnel, reflectionColor, refractionColor ... // 1. 计算当前片元的线性深度和场景深度 float4 screenPos ComputeScreenPos(i.vertex); float2 screenUV screenPos.xy / screenPos.w; float sceneDepthLinear LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(screenUV)); float surfaceDepthLinear LinearEyeDepth(screenPos.z); // 水面自身的深度 // 2. 计算水深 float waterDepth sceneDepthLinear - surfaceDepthLinear; waterDepth max(0, waterDepth); // 确保非负 // 3. 根据水深插值颜色 float depthFactor saturate(waterDepth / _DepthMaxDistance); float3 depthColor lerp(_DepthColorShallow.rgb, _DepthColorDeep.rgb, depthFactor); // 4. 计算边缘泡沫 // 泡沫出现在深度差即水深突然变化的地方我们用深度差的导数来模拟 // 简化用当前像素深度与周围像素深度的差值来近似 float2 foamUVOffset float2(0.001, 0.001); // 一个小的偏移量 float depthRight LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(screenUV float2(foamUVOffset.x, 0))); float depthUp LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(screenUV float2(0, foamUVOffset.y))); float depthDiff abs(sceneDepthLinear - depthRight) abs(sceneDepthLinear - depthUp); float foam saturate(depthDiff * _FoamIntensity - _FoamThreshold); // 可以再用噪声扰动一下泡沫使其更自然 float2 foamNoiseUV i.worldPos.xz * 0.5 _Time.y; float foamNoise tex2D(_NoiseTex, foamNoiseUV).r; foam * foamNoise; float3 foamColor float3(1.0, 1.0, 1.0); // 白色泡沫 // 5. 合成最终颜色基础水色 泡沫 float3 finalWaterColor lerp(waterColor, foamColor, foam); // 简单叠加 // 更真实的做法泡沫区域减弱反射/折射增加高光 return float4(finalWaterColor, 0.8); }加入深度和泡沫后水面立刻有了体积感和与场景物体的自然交互岸边会出现白色的泡沫线。8. 核心技法拆解四交互式涟漪系统这是让水面从“场景装饰”变为“游戏机制”的关键。我们需要在CPUC#脚本和GPUShader之间建立通信。1. C#脚本涟漪管理器创建一个名为WaterRippleManager.cs的脚本负责收集场景中的交互点并将数据传递给Shader。// 文件Assets/Scripts/WaterRippleManager.cs using System.Collections.Generic; using UnityEngine; public class WaterRippleManager : MonoBehaviour { public Material waterMaterial; // 关联的水面材质 public int maxRipples 10; // 最大同时存在的涟漪数 private struct RippleData { public Vector3 position; public float strength; public float radius; public float startTime; } private ListRippleData activeRipples new ListRippleData(); void Update() { // 每帧更新移除过期的涟漪 activeRipples.RemoveAll(r (Time.time - r.startTime) (r.radius * 0.5f)); // 简单基于半径的持续时间 // 准备传递给Shader的数组 Vector4[] ripplePositions new Vector4[maxRipples]; float[] rippleStrengths new float[maxRipples]; float[] rippleRadiuses new float[maxRipples]; for (int i 0; i maxRipples; i) { if (i activeRipples.Count) { RippleData r activeRipples[i]; ripplePositions[i] new Vector4(r.position.x, r.position.y, r.position.z, 1); rippleStrengths[i] r.strength; rippleRadiuses[i] r.radius; } else { // 用无效数据填充剩余位置 ripplePositions[i] Vector4.zero; rippleStrengths[i] 0; rippleRadiuses[i] 0; } } // 传递给Shader waterMaterial.SetInt(_RippleCount, activeRipples.Count); waterMaterial.SetVectorArray(_RipplePositions, ripplePositions); waterMaterial.SetFloatArray(_RippleStrengths, rippleStrengths); waterMaterial.SetFloatArray(_RippleRadiuses, rippleRadiuses); } // 外部调用此方法来生成一个涟漪 public void CreateRipple(Vector3 worldPos, float strength 1.0f, float radius 2.0f) { if (activeRipples.Count maxRipples) { // 可以替换最旧的涟漪或忽略新的 activeRipples.RemoveAt(0); } RippleData newRipple new RippleData { position worldPos, strength strength, radius radius, startTime Time.time }; activeRipples.Add(newRipple); } // 示例检测鼠标点击生成涟漪 void OnMouseDown() { Ray ray Camera.main.ScreenPointToRay(Input.mousePosition); RaycastHit hit; if (Physics.Raycast(ray, out hit)) { if (hit.collider.gameObject this.gameObject) // 点击的是水面 { CreateRipple(hit.point, 1.0f, 3.0f); } } } }将此脚本挂载到你的水面GameObject上并将对应的材质球拖入waterMaterial字段。2. Shader接收并应用涟漪数据在Shader的Properties和变量声明中添加对应数组。// Properties 内添加注意数组在Properties中无法直接显示但可以传递 // 我们通过脚本设置这里可以留空或注释 // _RipplePositions (Ripple Positions, Vector) (0,0,0,0) // _RippleStrengths (Ripple Strengths, Float) 0 // _RippleRadiuses (Ripple Radiuses, Float) 0 // CGPROGRAM 内部变量声明 int _RippleCount; float4 _RipplePositions[10]; // 与C#中maxRipples对应 float _RippleStrengths[10]; float _RippleRadiuses[10];在顶点着色器中计算每个顶点受到的所有涟漪的叠加位移。v2f vert (appdata v) { v2f o; float4 worldPos mul(unity_ObjectToWorld, v.vertex); float3 originalWorldPos worldPos.xyz; // 基础噪声位移之前的代码 float baseDisplacement /* ... 计算噪声位移 ... */; worldPos.y baseDisplacement; // 叠加涟漪位移 float rippleDisplacement 0.0; for (int i 0; i _RippleCount; i) { float4 ripple _RipplePositions[i]; float strength _RippleStrengths[i]; float radius _RippleRadiuses[i]; float dist distance(worldPos.xz, ripple.xz); // 水平距离 if (dist radius) { // 计算一个衰减的波形例如正弦波或高斯波 float falloff 1.0 - saturate(dist / radius); // 使用衰减的正弦波模拟扩散 float wave sin(dist * 10.0 - _Time.y * 20.0) * falloff * falloff; rippleDisplacement wave * strength * 0.1; // 强度系数 } } worldPos.y rippleDisplacement; // 将扰动后的世界坐标转换回裁剪空间 float4 displacedVertex mul(unity_WorldToObject, worldPos); // 转回物体空间 o.vertex UnityObjectToClipPos(displacedVertex); o.worldPos worldPos; // 传递扰动后的世界坐标 // ... 计算其他变量 ... return o; }现在运行场景点击水面你应该能看到以点击点为中心扩散开来的圆形涟漪。多个涟漪会平滑叠加。9. 性能优化与最佳实践一个功能强大的Shader也必须是一个高效的Shader。以下是针对交互式水面Shader的优化建议1. 计算精度选择在移动平台或性能敏感场景将float替换为half甚至对颜色使用fixed。复杂的循环如涟漪叠加要严格控制迭代次数_RippleCount不宜过大如5-10个。2. 纹理采样优化将多层噪声和法线贴图合并到一张纹理的不同通道如RGBA通道存储不同频率的噪声减少采样次数。使用tex2Dlod在顶点着色器中进行低精度采样代替在片元着色器中的高频采样将计算从逐像素转移到逐顶点。3. 渲染状态优化谨慎使用GrabPass它在Built-in管线中会导致全屏绘制调用非常昂贵。在URP中优先使用_CameraOpaqueTexture。如果不需要真正的透明混合例如水下部分不可见可以考虑使用AlphaTest或深度预pass来减少overdraw。为水面网格使用合适的LOD细节层次远距离使用简化版本的Shader或甚至用平面代替。4. 交互系统优化C#脚本中的Update里每帧传递数组到Shader是性能热点。可以考虑使用ComputeBuffer将涟漪数据以结构化缓冲的形式传递给GPU效率更高。只在涟漪数据发生变化时新增或移除涟漪更新Shader属性。将涟漪逻辑完全移到Compute Shader中在GPU上模拟波的传播但这更复杂。5. 美术可控性将所有重要的视觉参数如颜色、强度、速度、尺度暴露为Shader的Properties方便美术人员在材质面板上调节无需修改代码。提供多个质量等级如High/Medium/Low通过Shader变体或参数预设来切换不同复杂度的计算。10. 常见问题与排查思路问题现象可能原因排查方式解决方案水面全黑或颜色异常1. 法线计算错误导致光照/菲涅尔出错。2. 反射/折射纹理采样失败。3. 深度纹理未正确启用。1. 在片元着色器返回float4(worldNormal, 1)查看法线。2. 分别返回反射色和折射色检查哪个出错。3. 检查Camera设置和Shader中深度纹理声明。1. 检查法线贴图是否导入为Normal map检查TBN矩阵计算。2. URP中检查_CameraOpaqueTexture是否可用Built-in中检查GrabPass和_CameraDepthTexture。3. URP中确保Renderer的Depth Texture开启。涟漪没有出现或位置不对1. C#脚本未成功传递数据给Shader。2. Shader中数组大小不匹配。3. 世界坐标空间不一致。1. 在Shader中输出_RippleCount或第一个涟漪位置到颜色进行调试。2. 检查C#中数组长度与Shader声明是否一致。3. 确认C#传递的是世界坐标Shader中计算距离时使用worldPos.xz。1. 确保材质引用正确属性名匹配。2. 确保maxRipples常量与Shader数组大小一致。3. 统一使用世界空间进行计算。水面边缘有硬边或闪烁1. 深度比较的精度问题Z-fighting。2. 透明度混合顺序问题。1. 观察深度值检查水面与地面物体的距离。2. 调整Shader的Queue和RenderType或使用Offset指令。1. 增加水面与底部物体的距离或在深度比较时加入一个小的偏移量bias。2. 确保水面在透明队列中正确排序或使用深度预写入。移动端帧率过低1. 片元着色器计算过于复杂。2. 纹理采样次数过多。3.GrabPass或平面反射导致额外渲染。1. 使用Unity的Frame Debugger或GPU Profiler定位瓶颈。2. 统计Shader中的tex2D指令次数。1. 简化菲涅尔计算降低噪声层数用顶点动画替代部分片元计算。2. 合并纹理使用低分辨率版本。3. 在移动端禁用GrabPass使用简单的颜色折射或静态折射贴图禁用平面反射使用天空盒反射。反射内容错误或扭曲1. 反射向量计算错误。2. 使用的Cubemap不是当前场景的天空盒。1. 输出reflectDir向量进行可视化。2. 检查unity_SpecCube0的内容。1. 检查viewDir和worldNormal是否归一化方向是否正确。2. 确保场景设置了正确的天空盒材质。如需动态反射需实现平面反射技术。从简单的顶点动画到复杂的交互系统构建一个逼真的水面Shader是一个层层递进的过程。本文拆解了噪声波纹、法线细节、菲涅尔混合、深度泡沫和实时涟漪这五大核心模块。关键在于理解每个模块的输入、处理和输出以及它们如何串联起来影响最终的像素颜色。真正的掌握来自于实践和调参。建议你按照本文步骤在Unity中亲手实现一遍并尝试调节每一个Properties参数观察其对最终效果的影响。之后你可以挑战更高级的特性比如基于FFT快速傅里叶变换的真实海洋频谱模拟、焦散Caustics效果、与流体模拟系统的结合等。将这份Shader代码保存为你的素材库它不仅能用于游戏的水面经过调整同样可以用于魔法效果、能量护盾、熔岩表面等任何需要动态、透明、具有环境响应和交互性的表面渲染。图形学的魅力正在于这些基础原理的灵活组合与创造性应用。 从噪声到交互：高质量水面Shader核心技法全解析
为什么你的水面效果总是像一块塑料布为什么别人的游戏里水面能随角色移动泛起涟漪能倒映出动态的天空而你的水面却静止、虚假缺乏灵魂这背后缺失的往往不是复杂的物理模拟而是一套对水面Shader核心技法从原理到实战的透彻理解。本文将从ShaderFX联合创作者的实战视角出发彻底拆解一个高质量交互式水面效果的全套实现技法。我们不只讲“如何写代码”更要讲清楚“为什么这样写”以及“如何写得更好”。你将了解到一个令人信服的水面效果是如何通过噪声、法线、菲涅尔效应、深度、反射和折射等关键技术的组合从简单的波纹一步步构建成能与玩家互动的动态场景核心的。无论你是Unity、Unreal Engine还是其他图形引擎的开发者这里提供的思路和代码都具有普适的参考价值。1. 这篇文章真正要解决的问题从“看起来像”到“感觉真实”在图形开发中实现一个“看起来像”水面的效果并不难一个蓝色的平面加上一些滚动纹理就能做到。但真正的挑战在于实现一个“感觉真实”的水面。这种真实感来源于多个层次的叠加动态的细节静止的水面是不自然的。真实的水面有持续、无序的微小波动高频细节也有缓慢、大范围的起伏低频运动。对环境的响应水面不是孤立的。它应该倒映天空和周围景物反射也应该透出水下的物体或底部折射。更重要的是当物体如角色、船只、雨滴接触水面时应产生即时的、物理上合理的涟漪。视觉的物理正确性观察角度不同水面的外观也不同菲涅尔效应。水的颜色会随着深度变化。波浪的顶部和底部应有明暗区别法线光照。很多开发者卡在第一步他们叠加了多层噪声纹理来模拟波纹但效果生硬或者实现了反射但性能开销巨大且边缘锯齿严重。更棘手的是交互式涟漪网上代码片段很多但集成到动态水面上时涟漪要么瞬间消失要么相互叠加产生奇怪的视觉 artifact。本文将系统性地解决这些问题。我们将构建一个模块化的水面Shader从基础波纹生成开始逐步集成环境交互、光照模型和实时交互系统。最终你将获得一个可扩展的、性能可控的、视觉效果专业的交互式水面解决方案并深刻理解其中每一步的技术选型与权衡。2. 核心概念构建水面Shader的六大技术支柱在深入代码之前我们必须统一认知。一个完整的交互式水面Shader通常建立在以下几个核心概念之上1. 顶点位移与法线生成这是水面动起来的根基。我们通过在Shader的顶点着色器中对网格顶点的y轴高度进行扰动来模拟波浪。常用的方法是使用正弦波、Gerstner波或者更常见且效果丰富的——基于噪声纹理Noise Texture的采样。顶点位置改变后其对应的法线向量也必须重新计算否则光照会出错。法线通常可以通过对位移函数求偏导获得或直接使用预制的法线贴图叠加动态计算的法线。2. 多层噪声混合单一频率的波浪非常假。真实感来源于多尺度细节的叠加。我们会使用至少两层通常更多不同频率、速度和幅度的噪声采样进行混合。一层模拟大的、缓慢的涌浪另一层模拟小的、快速的波纹。混合时需要精心控制权重避免出现规律性的重复图案。3. 反射与折射这是水面与环境融合的关键。 *反射通常通过采集环境贴图Cubemap或使用平面反射Planar Reflection技术实现。平面反射效果更准确但性能代价高需要额外渲染一次场景环境贴图性能好但无法反射动态物体。 *折射可以通过采集屏幕后处理纹理GrabPass或使用深度纹理重建水下世界坐标来实现。简单做法是扰动屏幕UV来模拟光线弯曲。4. 菲涅尔效应描述观察角度与反射/折射光强比例的关系。当垂直看向水面时更容易看到水底折射主导当掠射角度观察时则看到更多倒影反射主导。在Shader中我们使用视角向量与水面法线的点积来计算菲涅尔因子并用它来混合反射和折射颜色。5. 深度与边缘泡沫水体的视觉厚度感由深度决定。我们通过比较水面像素的深度和场景深度缓冲中的深度值得到水深。浅水区颜色更亮可能透出水底沙石深水区颜色更暗、更饱和。在水体与岸边或其他物体相交的边缘通过深度差可以生成泡沫线极大增强真实感。6. 交互式涟漪系统这是让水面“活”起来响应游戏逻辑的点睛之笔。其核心思想是在游戏逻辑中如C#脚本检测物体与水面的碰撞在碰撞点生成一个“涟漪源”。将这个源的位置、强度和半径等信息传递到Shader中。在Shader中每个像素计算其到各个涟漪源的距离根据距离施加一个波形扰动通常是圆形扩散的波。多个涟漪需要平滑叠加。理解了这六大支柱我们就有了清晰的施工蓝图。接下来我们从零开始搭建。3. 环境准备与前置条件本文的示例代码将以Unity引擎和HLSL/ShaderLab语法为主但其原理完全适用于Unreal Engine材质蓝图/HLSL、Three.jsGLSL或其他图形API。选择Unity是因为其ShaderLab框架清晰便于演示从属性定义到最终渲染的完整流程。所需环境Unity版本2020.3 LTS 或更新版本确保包含URP/HDRP管线但本文核心代码不依赖特定渲染管线Built-in管线也可运行。渲染管线为获得最佳效果和现代功能如深度纹理自动获取建议使用通用渲染管线URP。本文代码会兼顾Built-in RP的兼容性说明。Shader编写工具Visual Studio、VS Code或Rider安装Shaderlab和HLSL插件以便高亮。基础资源一张噪声纹理Noise Texture一张用于模拟细节的法线贴图Normal Map。可以在Unity的Standard Assets或网上免费资源库中找到。关键设置URP下创建URP Asset如果尚未创建Assets - Create - Rendering - URP Asset (with Universal Renderer)。将URP Asset赋给项目Graphics设置。在URP Asset的Renderer列表中找到你的Renderer确保其Depth Texture和Opaque Texture选项是开启的默认通常开启。这是我们实现深度边缘泡沫和屏幕空间折射的基础。4. 第一步创建基础水面网格与Shader框架首先我们在场景中创建一个简单的平面GameObject - 3D Object - Plane作为水面基础。将其Scale调大比如(10, 1, 10)。然后创建一个新的Unlit Shader因为光照我们将自己控制命名为WaterShader。// 文件Assets/Shaders/WaterShader.shader Shader Custom/WaterShader { Properties { // 我们将在这里逐步添加属性 _MainTex (Base Color (RGB), 2D) white {} _Color (Water Color, Color) (0.1, 0.3, 0.5, 1.0) } SubShader { Tags { RenderTypeTransparent QueueTransparent } LOD 100 // 为了进行折射我们可能需要抓取屏幕内容 GrabPass { _GrabTexture } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include UnityCG.cginc struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; // 后续会添加更多数据如世界坐标、视角向量等 float4 worldPos : TEXCOORD1; }; sampler2D _MainTex; float4 _MainTex_ST; fixed4 _Color; v2f vert (appdata v) { v2f o; o.vertex UnityObjectToClipPos(v.vertex); o.uv TRANSFORM_TEX(v.uv, _MainTex); o.worldPos mul(unity_ObjectToWorld, v.vertex); // 计算世界坐标 return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col tex2D(_MainTex, i.uv) * _Color; return col; } ENDCG } } FallBack Diffuse }这是一个最基础的Shader框架。目前它只是一个简单的着色器。我们创建了一个材质球将其Shader选为Custom/WaterShader并拖给场景中的平面。此时你只能看到一个纯色或有纹理的平面。关键点解析Tags { RenderTypeTransparent QueueTransparent }我们将水面定义为透明物体以便处理反射折射的混合。GrabPass { _GrabTexture }在Built-in管线中这行代码会在渲染该物体前将当前屏幕内容抓取到一张名为_GrabTexture的纹理中用于后续的折射扭曲。在URP中有更高效的方式_CameraOpaqueTexture我们后面会调整。v2f结构体顶点着色器到片元着色器的数据传递桥梁。我们预埋了worldPos为后续计算做准备。5. 核心技法拆解一基于噪声的顶点动画与法线计算静态的水面是死的。我们首先让顶点动起来。1. 添加噪声属性与采样在Properties块和CGPROGRAM内部的变量声明部分添加// Properties 内添加 _NoiseTex (Noise Texture, 2D) white {} _WaveSpeed (Wave Speed, Float) 0.5 _WaveAmp (Wave Amplitude, Float) 0.1 _WaveFreq (Wave Frequency, Float) 1.0 // CGPROGRAM 内部变量声明 sampler2D _NoiseTex; float4 _NoiseTex_ST; float _WaveSpeed; float _WaveAmp; float _WaveFreq;2. 修改顶点着色器我们使用噪声纹理的两层采样不同缩放和速度来制造多尺度波动。v2f vert (appdata v) { v2f o; // 对原始顶点坐标进行动画扰动 float4 worldPos mul(unity_ObjectToWorld, v.vertex); float2 noiseUV worldPos.xz * 0.1; // 第一层噪声大尺度 noiseUV _Time.y * _WaveSpeed * 0.1; // 采样噪声值域映射到[-1, 1] float noise tex2Dlod(_NoiseTex, float4(noiseUV, 0, 0)).r * 2 - 1; // 应用位移到本地顶点更简单或世界顶点 // 这里选择在世界空间计算位移再转换回本地空间进行顶点变换简化示例 // 更常见的做法是直接扰动输入的模型顶点 float4 displacedVertex v.vertex; displacedVertex.y noise * _WaveAmp; // 第二层高频细节可选在片元着色器中用法线贴图表现更高效 // float2 noiseUV2 worldPos.xz * 0.5 _Time.y * _WaveSpeed; // float noise2 tex2Dlod(_NoiseTex, float4(noiseUV2, 0, 0)).r * 2 - 1; // displacedVertex.y noise2 * _WaveAmp * 0.3; o.vertex UnityObjectToClipPos(displacedVertex); o.uv TRANSFORM_TEX(v.uv, _MainTex); o.worldPos mul(unity_ObjectToWorld, displacedVertex); // 使用扰动后的顶点计算世界坐标 return o; }现在运行水面应该有了缓慢的起伏。但如果你旋转视角会发现光照是错的因为法线没有更新。3. 计算动态法线法线可以通过计算位移函数的导数来近似。对于基于纹理的位移一个实用技巧是使用中心差分法在Shader中计算。 我们在顶点着色器中计算世界空间下的法线或切线空间法线并传递给片元着色器。但更常见的做法是在片元着色器中通过对噪声纹理进行多次采样当前点、右边点、上边点来估算该片元所在表面的斜率从而得到法线。这种方法精度更高适合片元着色器。首先在v2f结构体中添加法线和切线相关变量struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; float4 worldPos : TEXCOORD1; float3 worldNormal : TEXCOORD2; // 世界空间法线 float3 worldTangent : TEXCOORD3; // 世界空间切线可选用于精确计算 float3 worldBinormal : TEXCOORD4; // 世界空间副切线 };在顶点着色器中我们需要计算这些向量。一个简化版本是直接使用模型自带的法线但动画后不准确。更准确的方法需要传递模型的切线并在顶点着色器中构建TBN矩阵。为了简化我们将在片元着色器中基于噪声直接计算法线扰动这更符合“细节法线”的做法。4. 片元着色器中的细节法线合成我们准备一张水的法线贴图并用世界坐标和时间为UV进行滚动采样模拟高频细节。// Properties 添加 _NormalMap (Normal Map, 2D) bump {} _NormalScale (Normal Scale, Range(0, 2)) 1.0 _NormalSpeed (Normal Speed, Float) 0.2 // 变量声明 sampler2D _NormalMap; float4 _NormalMap_ST; float _NormalScale; float _NormalSpeed; // 在 frag 函数中 fixed4 frag (v2f i) : SV_Target { // 计算用于采样的UV使其滚动 float2 normalUV1 i.worldPos.xz * 0.1 _Time.y * _NormalSpeed * float2(0.2, 0.3); float2 normalUV2 i.worldPos.xz * 0.05 - _Time.y * _NormalSpeed * float2(0.1, -0.2); // 解包法线贴图从[0,1]映射到[-1,1] float3 normalTex1 UnpackNormal(tex2D(_NormalMap, normalUV1)); float3 normalTex2 UnpackNormal(tex2D(_NormalMap, normalUV2)); // 混合两层细节法线 float3 detailNormal normalize(float3(normalTex1.xy normalTex2.xy, normalTex1.z * normalTex2.z)); // 将细节法线从切线空间转换到世界空间这里简化假设水面是平的切线为(1,0,0)副切线为(0,0,1) float3 worldNormal detailNormal; // 更严谨的做法需要从顶点传入TBN矩阵 // ... 后续将使用 worldNormal 进行光照计算 }至此我们有了动态的顶点波浪和丰富的表面法线细节。水面已经“活”了起来。6. 核心技法拆解二菲涅尔效应与反射/折射合成这是决定水面视觉质感的关键一步。我们将计算菲涅尔因子并用它来混合反射颜色和折射颜色。1. 准备反射与折射源反射使用环境立方体贴图Cubemap。Unity中可以通过UNITY_SAMPLE_TEXCUBE采样unity_SpecCube0来获取天空盒反射。对于平面反射需要额外的渲染步骤本文为简化使用Cubemap。折射在Built-in管线我们使用GrabPass得到的_GrabTexture。在URP管线我们使用_CameraOpaqueTexture。修改Shader以支持两种管线// 在CGPROGRAM上方根据管线定义宏 #ifdef UNITY_URP #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareOpaqueTexture.hlsl #define SAMPLE_GRAB_TEXTURE(name, uv) SampleSceneColor(uv) #else // Built-in sampler2D _GrabTexture; float4 _GrabTexture_ST; #define SAMPLE_GRAB_TEXTURE(name, uv) tex2D(name, uv) #endif // Properties 添加 _ReflectionStrength (Reflection Strength, Range(0, 1)) 0.8 _RefractionStrength (Refraction Strength, Range(0, 1)) 0.5 _FresnelPower (Fresnel Power, Float) 5.02. 修改片元着色器计算菲涅尔并混合fixed4 frag (v2f i) : SV_Target { // 1. 计算世界空间下的视角方向 float3 viewDir normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz); // 2. 获取细节法线上一节已计算 float3 worldNormal /* ... 从上一节获取计算好的世界空间法线 ... */; // 3. 计算菲涅尔因子 (Schlick近似) float fresnelBias 0.04; // 基础反射率对于水大约是0.02-0.05 float fresnel max(fresnelBias, 1.0 - dot(viewDir, worldNormal)); fresnel pow(fresnel, _FresnelPower); // 指数控制边缘过渡锐利度 // 4. 采样反射环境Cubemap float3 reflectDir reflect(-viewDir, worldNormal); float4 reflectionColor UNITY_SAMPLE_TEXCUBE(unity_SpecCube0, reflectDir); reflectionColor.rgb DecodeHDR(reflectionColor, unity_SpecCube0_HDR).rgb; // 解码HDR // 5. 采样折射屏幕抓取 // 计算屏幕UV float4 screenPos ComputeScreenPos(i.vertex); float2 screenUV screenPos.xy / screenPos.w; // 根据法线扰动屏幕UV来模拟折射 float2 refractionOffset worldNormal.xz * _RefractionStrength * 0.05; screenUV refractionOffset; float4 refractionColor SAMPLE_GRAB_TEXTURE(_GrabTexture, screenUV); // 6. 混合反射与折射 float3 waterColor lerp(refractionColor.rgb, reflectionColor.rgb, fresnel); // 也可以再乘上一个基础水色 waterColor * _Color.rgb; return float4(waterColor, 0.8); // 输出带透明度的颜色 }现在你的水面应该已经具备了基本的视觉特征边缘反射强中心透射多并且有因法线扰动而产生的扭曲折射效果。7. 核心技法拆解三深度与边缘泡沫没有深度感的水面像一层漂浮的油膜。我们需要根据水深来调制颜色并在水陆交界处生成泡沫。1. 获取深度信息在URP中深度纹理是内置提供的。在Built-in中需要设置Camera的depthTextureMode并声明_CameraDepthTexture。// 在CGPROGRAM变量声明部分 #ifdef UNITY_URP // URP中通过函数获取深度 #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareDepthTexture.hlsl #define SAMPLE_DEPTH_TEXTURE(uv) SampleSceneDepth(uv) #else // Built-in sampler2D _CameraDepthTexture; #define SAMPLE_DEPTH_TEXTURE(uv) tex2D(_CameraDepthTexture, uv).r #endif // Properties 添加 _DepthColorShallow (Shallow Water Color, Color) (0.2, 0.6, 0.8, 1) _DepthColorDeep (Deep Water Color, Color) (0.0, 0.1, 0.3, 1) _DepthMaxDistance (Depth Max Distance, Float) 10.0 _FoamIntensity (Foam Intensity, Range(0, 5)) 1.0 _FoamThreshold (Foam Threshold, Float) 0.42. 在片元着色器中计算深度与泡沫fixed4 frag (v2f i) : SV_Target { // ... 之前的代码计算 viewDir, worldNormal, fresnel, reflectionColor, refractionColor ... // 1. 计算当前片元的线性深度和场景深度 float4 screenPos ComputeScreenPos(i.vertex); float2 screenUV screenPos.xy / screenPos.w; float sceneDepthLinear LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(screenUV)); float surfaceDepthLinear LinearEyeDepth(screenPos.z); // 水面自身的深度 // 2. 计算水深 float waterDepth sceneDepthLinear - surfaceDepthLinear; waterDepth max(0, waterDepth); // 确保非负 // 3. 根据水深插值颜色 float depthFactor saturate(waterDepth / _DepthMaxDistance); float3 depthColor lerp(_DepthColorShallow.rgb, _DepthColorDeep.rgb, depthFactor); // 4. 计算边缘泡沫 // 泡沫出现在深度差即水深突然变化的地方我们用深度差的导数来模拟 // 简化用当前像素深度与周围像素深度的差值来近似 float2 foamUVOffset float2(0.001, 0.001); // 一个小的偏移量 float depthRight LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(screenUV float2(foamUVOffset.x, 0))); float depthUp LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(screenUV float2(0, foamUVOffset.y))); float depthDiff abs(sceneDepthLinear - depthRight) abs(sceneDepthLinear - depthUp); float foam saturate(depthDiff * _FoamIntensity - _FoamThreshold); // 可以再用噪声扰动一下泡沫使其更自然 float2 foamNoiseUV i.worldPos.xz * 0.5 _Time.y; float foamNoise tex2D(_NoiseTex, foamNoiseUV).r; foam * foamNoise; float3 foamColor float3(1.0, 1.0, 1.0); // 白色泡沫 // 5. 合成最终颜色基础水色 泡沫 float3 finalWaterColor lerp(waterColor, foamColor, foam); // 简单叠加 // 更真实的做法泡沫区域减弱反射/折射增加高光 return float4(finalWaterColor, 0.8); }加入深度和泡沫后水面立刻有了体积感和与场景物体的自然交互岸边会出现白色的泡沫线。8. 核心技法拆解四交互式涟漪系统这是让水面从“场景装饰”变为“游戏机制”的关键。我们需要在CPUC#脚本和GPUShader之间建立通信。1. C#脚本涟漪管理器创建一个名为WaterRippleManager.cs的脚本负责收集场景中的交互点并将数据传递给Shader。// 文件Assets/Scripts/WaterRippleManager.cs using System.Collections.Generic; using UnityEngine; public class WaterRippleManager : MonoBehaviour { public Material waterMaterial; // 关联的水面材质 public int maxRipples 10; // 最大同时存在的涟漪数 private struct RippleData { public Vector3 position; public float strength; public float radius; public float startTime; } private ListRippleData activeRipples new ListRippleData(); void Update() { // 每帧更新移除过期的涟漪 activeRipples.RemoveAll(r (Time.time - r.startTime) (r.radius * 0.5f)); // 简单基于半径的持续时间 // 准备传递给Shader的数组 Vector4[] ripplePositions new Vector4[maxRipples]; float[] rippleStrengths new float[maxRipples]; float[] rippleRadiuses new float[maxRipples]; for (int i 0; i maxRipples; i) { if (i activeRipples.Count) { RippleData r activeRipples[i]; ripplePositions[i] new Vector4(r.position.x, r.position.y, r.position.z, 1); rippleStrengths[i] r.strength; rippleRadiuses[i] r.radius; } else { // 用无效数据填充剩余位置 ripplePositions[i] Vector4.zero; rippleStrengths[i] 0; rippleRadiuses[i] 0; } } // 传递给Shader waterMaterial.SetInt(_RippleCount, activeRipples.Count); waterMaterial.SetVectorArray(_RipplePositions, ripplePositions); waterMaterial.SetFloatArray(_RippleStrengths, rippleStrengths); waterMaterial.SetFloatArray(_RippleRadiuses, rippleRadiuses); } // 外部调用此方法来生成一个涟漪 public void CreateRipple(Vector3 worldPos, float strength 1.0f, float radius 2.0f) { if (activeRipples.Count maxRipples) { // 可以替换最旧的涟漪或忽略新的 activeRipples.RemoveAt(0); } RippleData newRipple new RippleData { position worldPos, strength strength, radius radius, startTime Time.time }; activeRipples.Add(newRipple); } // 示例检测鼠标点击生成涟漪 void OnMouseDown() { Ray ray Camera.main.ScreenPointToRay(Input.mousePosition); RaycastHit hit; if (Physics.Raycast(ray, out hit)) { if (hit.collider.gameObject this.gameObject) // 点击的是水面 { CreateRipple(hit.point, 1.0f, 3.0f); } } } }将此脚本挂载到你的水面GameObject上并将对应的材质球拖入waterMaterial字段。2. Shader接收并应用涟漪数据在Shader的Properties和变量声明中添加对应数组。// Properties 内添加注意数组在Properties中无法直接显示但可以传递 // 我们通过脚本设置这里可以留空或注释 // _RipplePositions (Ripple Positions, Vector) (0,0,0,0) // _RippleStrengths (Ripple Strengths, Float) 0 // _RippleRadiuses (Ripple Radiuses, Float) 0 // CGPROGRAM 内部变量声明 int _RippleCount; float4 _RipplePositions[10]; // 与C#中maxRipples对应 float _RippleStrengths[10]; float _RippleRadiuses[10];在顶点着色器中计算每个顶点受到的所有涟漪的叠加位移。v2f vert (appdata v) { v2f o; float4 worldPos mul(unity_ObjectToWorld, v.vertex); float3 originalWorldPos worldPos.xyz; // 基础噪声位移之前的代码 float baseDisplacement /* ... 计算噪声位移 ... */; worldPos.y baseDisplacement; // 叠加涟漪位移 float rippleDisplacement 0.0; for (int i 0; i _RippleCount; i) { float4 ripple _RipplePositions[i]; float strength _RippleStrengths[i]; float radius _RippleRadiuses[i]; float dist distance(worldPos.xz, ripple.xz); // 水平距离 if (dist radius) { // 计算一个衰减的波形例如正弦波或高斯波 float falloff 1.0 - saturate(dist / radius); // 使用衰减的正弦波模拟扩散 float wave sin(dist * 10.0 - _Time.y * 20.0) * falloff * falloff; rippleDisplacement wave * strength * 0.1; // 强度系数 } } worldPos.y rippleDisplacement; // 将扰动后的世界坐标转换回裁剪空间 float4 displacedVertex mul(unity_WorldToObject, worldPos); // 转回物体空间 o.vertex UnityObjectToClipPos(displacedVertex); o.worldPos worldPos; // 传递扰动后的世界坐标 // ... 计算其他变量 ... return o; }现在运行场景点击水面你应该能看到以点击点为中心扩散开来的圆形涟漪。多个涟漪会平滑叠加。9. 性能优化与最佳实践一个功能强大的Shader也必须是一个高效的Shader。以下是针对交互式水面Shader的优化建议1. 计算精度选择在移动平台或性能敏感场景将float替换为half甚至对颜色使用fixed。复杂的循环如涟漪叠加要严格控制迭代次数_RippleCount不宜过大如5-10个。2. 纹理采样优化将多层噪声和法线贴图合并到一张纹理的不同通道如RGBA通道存储不同频率的噪声减少采样次数。使用tex2Dlod在顶点着色器中进行低精度采样代替在片元着色器中的高频采样将计算从逐像素转移到逐顶点。3. 渲染状态优化谨慎使用GrabPass它在Built-in管线中会导致全屏绘制调用非常昂贵。在URP中优先使用_CameraOpaqueTexture。如果不需要真正的透明混合例如水下部分不可见可以考虑使用AlphaTest或深度预pass来减少overdraw。为水面网格使用合适的LOD细节层次远距离使用简化版本的Shader或甚至用平面代替。4. 交互系统优化C#脚本中的Update里每帧传递数组到Shader是性能热点。可以考虑使用ComputeBuffer将涟漪数据以结构化缓冲的形式传递给GPU效率更高。只在涟漪数据发生变化时新增或移除涟漪更新Shader属性。将涟漪逻辑完全移到Compute Shader中在GPU上模拟波的传播但这更复杂。5. 美术可控性将所有重要的视觉参数如颜色、强度、速度、尺度暴露为Shader的Properties方便美术人员在材质面板上调节无需修改代码。提供多个质量等级如High/Medium/Low通过Shader变体或参数预设来切换不同复杂度的计算。10. 常见问题与排查思路问题现象可能原因排查方式解决方案水面全黑或颜色异常1. 法线计算错误导致光照/菲涅尔出错。2. 反射/折射纹理采样失败。3. 深度纹理未正确启用。1. 在片元着色器返回float4(worldNormal, 1)查看法线。2. 分别返回反射色和折射色检查哪个出错。3. 检查Camera设置和Shader中深度纹理声明。1. 检查法线贴图是否导入为Normal map检查TBN矩阵计算。2. URP中检查_CameraOpaqueTexture是否可用Built-in中检查GrabPass和_CameraDepthTexture。3. URP中确保Renderer的Depth Texture开启。涟漪没有出现或位置不对1. C#脚本未成功传递数据给Shader。2. Shader中数组大小不匹配。3. 世界坐标空间不一致。1. 在Shader中输出_RippleCount或第一个涟漪位置到颜色进行调试。2. 检查C#中数组长度与Shader声明是否一致。3. 确认C#传递的是世界坐标Shader中计算距离时使用worldPos.xz。1. 确保材质引用正确属性名匹配。2. 确保maxRipples常量与Shader数组大小一致。3. 统一使用世界空间进行计算。水面边缘有硬边或闪烁1. 深度比较的精度问题Z-fighting。2. 透明度混合顺序问题。1. 观察深度值检查水面与地面物体的距离。2. 调整Shader的Queue和RenderType或使用Offset指令。1. 增加水面与底部物体的距离或在深度比较时加入一个小的偏移量bias。2. 确保水面在透明队列中正确排序或使用深度预写入。移动端帧率过低1. 片元着色器计算过于复杂。2. 纹理采样次数过多。3.GrabPass或平面反射导致额外渲染。1. 使用Unity的Frame Debugger或GPU Profiler定位瓶颈。2. 统计Shader中的tex2D指令次数。1. 简化菲涅尔计算降低噪声层数用顶点动画替代部分片元计算。2. 合并纹理使用低分辨率版本。3. 在移动端禁用GrabPass使用简单的颜色折射或静态折射贴图禁用平面反射使用天空盒反射。反射内容错误或扭曲1. 反射向量计算错误。2. 使用的Cubemap不是当前场景的天空盒。1. 输出reflectDir向量进行可视化。2. 检查unity_SpecCube0的内容。1. 检查viewDir和worldNormal是否归一化方向是否正确。2. 确保场景设置了正确的天空盒材质。如需动态反射需实现平面反射技术。从简单的顶点动画到复杂的交互系统构建一个逼真的水面Shader是一个层层递进的过程。本文拆解了噪声波纹、法线细节、菲涅尔混合、深度泡沫和实时涟漪这五大核心模块。关键在于理解每个模块的输入、处理和输出以及它们如何串联起来影响最终的像素颜色。真正的掌握来自于实践和调参。建议你按照本文步骤在Unity中亲手实现一遍并尝试调节每一个Properties参数观察其对最终效果的影响。之后你可以挑战更高级的特性比如基于FFT快速傅里叶变换的真实海洋频谱模拟、焦散Caustics效果、与流体模拟系统的结合等。将这份Shader代码保存为你的素材库它不仅能用于游戏的水面经过调整同样可以用于魔法效果、能量护盾、熔岩表面等任何需要动态、透明、具有环境响应和交互性的表面渲染。图形学的魅力正在于这些基础原理的灵活组合与创造性应用。