Unity水体渲染实战：从Gerstner波到屏幕空间反射的完整实现

1. 项目概述：从零开始，构建一个真实可信的Unity水体

在游戏开发中，水体渲染一直是一个既迷人又充满挑战的领域。无论是宁静的湖泊、潺潺的溪流，还是汹涌的海洋，一个高质量的水体效果能极大地提升场景的氛围感和沉浸感。然而，很多开发者初次接触Shader时，面对水体渲染中复杂的物理现象——如折射、反射、波浪、焦散等——往往会感到无从下手。

这篇文章，我将从一个从业者的角度，分享如何从零开始，在Unity中实现一套兼顾效果与性能的水体渲染方案。我不会只停留在理论层面，而是会结合我实际项目中的经验，拆解每一个核心环节的实现细节、参数调优的“手感”，以及那些文档里不会写的“坑”和应对技巧。我们的目标不是复现一个物理绝对精确的海洋模拟，而是打造一个在游戏实时渲染环境下，视觉上令人信服、性能上可以接受的水体。

我们将从最基础的透明与流动效果开始，逐步叠加反射、折射、波浪、颜色变化、泡沫等特性，最终形成一个完整的Shader。整个过程，我会使用URP管线进行讲解，但核心思路同样适用于Built-in管线。无论你是Shader新手，还是希望优化现有水体效果的开发者，这篇文章都能为你提供一条清晰的路径和可直接参考的代码。

2. 核心思路与方案选型：平衡艺术效果与实时性能

在动手写代码之前，我们必须先想清楚：我们要做一个什么样的水？是手游里的小池塘，还是PC端3A大作里的广阔海洋？不同的目标决定了完全不同的技术路径和性能预算。

2.1 效果层级划分：明确你的需求

根据项目需求，我们可以将水体效果大致分为三个层级：

1. 基础层级（移动端/风格化）：核心是“看起来像水”。实现透明、基础的法线贴图流动、简单的菲涅尔反射和屏幕空间折射。这个层级性能开销极低，一个简单的片元着色器加上几张纹理就能实现，适合手机游戏或风格化场景。
2. 标准层级（主流PC/主机）：在基础层级上，增加动态波浪（如Gerstner波）、平面反射或屏幕空间反射、基于深度的颜色衰减、简单的边缘泡沫。这是目前大多数单机或网游采用的标准方案，在效果和性能间取得了很好的平衡。
3. 高级层级（影视级/特定需求）：追求物理正确性。可能包含完整的FFT（快速傅里叶变换）波浪模拟、精确的次表面散射（SSS）、实时焦散、与物体的动态交互（如船体划开的波浪、角色涉水涟漪）。这个层级的性能开销巨大，通常需要结合Compute Shader、GPU粒子等高级特性，仅在特定场景或高端硬件上使用。

对于本教程，我们将聚焦于“标准层级”，这是最具普适性和学习价值的。我们会实现一个视觉效果丰富、代码结构清晰、且能在主流硬件上流畅运行的水体Shader。

2.2 关键技术方案选型

确定了目标层级后，我们需要为每个视觉特征选择具体的实现方案。选型的核心原则是：用性价比最高的方法，实现最显著的视觉提升。

• 透明与混合：毫无疑问，使用Alpha混合（Blend SrcAlpha OneMinusSrcAlpha）。这是实现透明效果的标准方式。需要注意的是，透明物体的渲染顺序问题，我们后面会详细讨论如何规避。
• 波浪与流动：
  • 基础流动：使用两张法线贴图，以不同的速度和方向进行UV动画，然后混合。这是模拟水面细节波纹最高效的方法。
  • 主体波浪：采用Gerstner波。相比简单的正弦波，Gerstner波能产生更尖锐的波峰和更宽阔的波谷，视觉效果更接近真实的海浪，且计算量仍在可接受范围内。我们将它在顶点着色器中实现，以驱动网格顶点的位移。
• 反射：放弃消耗巨大的实时平面反射（需要额外渲染一次场景）。我们将采用屏幕空间反射（SSR）或反射探针（Reflection Probe）的混合方案。在URP中，我们可以利用屏幕空间数据尝试进行光线步进（SSR），如果失败，则回退到采样预先烘焙好的反射探针立方体贴图。这样既能获得动态的反射细节，又保证了性能。
• 折射：使用屏幕空间折射。在URP中，我们可以采样_CameraOpaqueTexture（即不透明物体的渲染结果），然后用法线对采样UV进行扰动，来模拟水下物体的扭曲效果。这是实时渲染中实现折射最主流和高效的方法。
• 颜色与深度：基于视线穿过水体的深度（通过深度图差值计算），使用指数衰减函数来混合水的浅水区颜色和深水区颜色。同时，利用菲涅尔效应，混合远处水面的颜色（通常更受天空盒影响）。
• 泡沫：分为浪尖泡沫和岸边泡沫。
  • 浪尖泡沫：基于波浪的高度（Y值）生成。当顶点高度超过某个阈值时，混合一张泡沫纹理。可以通过噪声图来打破泡沫形状的规则性。
  • 岸边泡沫：基于水面与地形的相交深度生成。在浅水区，通过深度值生成遮罩，再结合噪声图和UV动画，模拟泡沫在岸边聚集的效果。
• 焦散：作为高级效果的补充，我们将实现一个简化版的焦散。在水底地形上，通过投影的方式，采样一张焦散纹理，并使其随着水面法线扰动而“流动”。这是一种视觉欺骗（Screen-Space Decal），但效果足够以假乱真。

实操心得：方案不是越高级越好在早期原型阶段，我常常陷入“技术完美主义”的陷阱，试图实现所有看到过的炫酷效果。结果就是Shader极其复杂，运行效率低下，且难以调试。后来我学乖了：先实现核心的80%效果（透明、流动、基础反射折射），确保它跑起来且帧率达标。剩下的20%（如精细的泡沫、焦散）作为可选项，根据项目性能预算动态添加或降级。记住，玩家不会拿着显微镜看你的水，但一定会对卡顿印象深刻。

3. 构建Shader框架与基础属性

让我们开始动手。首先，在Unity中创建一个Unlit Shader Graph，或者直接编写HLSL代码。我更喜欢后者，因为它能给我更精细的控制和更清晰的理解。这里我将以HLSL代码为例进行讲解。

首先，我们定义Shader的基本属性和结构。

Shader “Custom/StarterWater” { Properties { // 基础颜色 _ShallowColor (“Shallow Color”, Color) = (0.0, 0.5, 0.8, 0.8) _DeepColor (“Deep Color”, Color) = (0.0, 0.1, 0.3, 1.0) _DepthFactor (“Depth Factor”, Range(0, 5)) = 1.0 // 法线与流动 _NormalMapA (“Normal Map A”, 2D) = “bump” {} _NormalMapB (“Normal Map B”, 2D) = “bump” {} _NormalTiling (“Normal Tiling”, Float) = 1.0 _NormalSpeedA (“Normal Speed A”, Float) = 0.05 _NormalSpeedB (“Normal Speed B”, Float) = 0.1 _NormalStrength (“Normal Strength”, Range(0, 2)) = 0.5 // 反射 _ReflectionStrength (“Reflection Strength”, Range(0, 1)) = 0.5 _Smoothness (“Smoothness”, Range(0, 1)) = 0.9 _ReflectionDistortion (“Reflection Distortion”, Range(0, 0.1)) = 0.02 // 折射 _RefractionStrength (“Refraction Strength”, Range(0, 1)) = 0.8 _RefractionDistortion (“Refraction Distortion”, Range(0, 0.1)) = 0.05 // 菲涅尔 _FresnelPower (“Fresnel Power”, Range(0.1, 10)) = 5.0 _FresnelColor (“Fresnel (Far) Color”, Color) = (0.8, 0.9, 1.0, 1.0) // 波浪 (Gerstner) _WaveAmplitude (“Wave Amplitude”, Float) = 0.3 _WaveLength (“Wave Length”, Float) = 5.0 _WaveSpeed (“Wave Speed”, Float) = 1.0 _WaveDirection (“Wave Direction (XY)”, Vector) = (1, 0, 0, 0) // 泡沫 _FoamTexture (“Foam Texture”, 2D) = “white” {} _FoamTiling (“Foam Tiling”, Float) = 5.0 _FoamSpeed (“Foam Speed”, Float) = 0.2 _FoamThreshold (“Foam Height Threshold”, Range(0, 2)) = 0.8 _FoamDepthThreshold (“Foam Depth Threshold”, Range(0, 1)) = 0.3 } SubShader { Tags { “RenderType” = “Transparent” “Queue” = “Transparent” “RenderPipeline” = “UniversalPipeline” } // 第一个Pass：渲染不透明部分（如水底、背面）的深度，用于后续折射计算 Pass { Name “DepthPrePass” Tags { “LightMode” = “DepthOnly” } ColorMask 0 // 不写入颜色，只写深度 ZWrite On Cull Off // … 深度写入Shader代码 … } // 第二个Pass：主渲染Pass Pass { Name “ForwardLit” Tags { “LightMode” = “UniversalForward” } Blend SrcAlpha OneMinusSrcAlpha ZWrite Off // 透明物体通常关闭深度写入，但需要小心排序问题 Cull Off HLSLPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile _ _MAIN_LIGHT_SHADOWS _MAIN_LIGHT_SHADOWS_CASCADE #pragma multi_compile _ _ADDITIONAL_LIGHTS #pragma multi_compile_fog // 包含URP核心库 #include “Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl” #include “Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl” #include “Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareDepthTexture.hlsl” #include “Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareOpaqueTexture.hlsl” // 定义属性变量 // … (将Properties中的变量在此用CBUFFER声明) … struct Attributes { float4 positionOS : POSITION; float3 normalOS : NORMAL; float4 tangentOS : TANGENT; float2 texcoord : TEXCOORD0; }; struct Varyings { float4 positionCS : SV_POSITION; float3 positionWS : TEXCOORD0; float3 normalWS : TEXCOORD1; float4 tangentWS : TEXCOORD2; float2 uv : TEXCOORD3; float4 screenPos : TEXCOORD4; float fogFactor : TEXCOORD5; }; // 顶点着色器和片元着色器函数将在这里实现 // … (后续填充) … ENDHLSL } } }

这个框架定义了我们需要用到的所有属性，并设置了两个Pass。第一个DepthPrePass是一个小技巧，用于解决透明物体渲染的经典难题——深度排序。因为我们的水是透明的，如果直接关闭深度写入（ZWrite Off），后渲染的水可能会错误地覆盖在前面本该被遮挡的物体上。这个预渲染的深度Pass先写入水的深度，确保不透明物体能正确遮挡水，然后在主Pass中再进行透明的颜色混合。

4. 核心模块实现：波浪、法线与光照

4.1 实现Gerstner波顶点动画

波浪是水体的灵魂。我们首先在顶点着色器中实现Gerstner波，它会让水面网格产生真实的起伏。

// Gerstner波函数 float3 GerstnerWave(float3 position, float amplitude, float wavelength, float speed, float2 direction) { float k = 2 * PI / wavelength; // 波数 float f = k * (dot(direction, position.xz) - speed * _Time.y); float a = amplitude / (k * 1); // 振幅衰减因子，1代表陡峭度，可调 // 计算顶点偏移 float3 result; result.x = direction.x * a * cos(f); result.y = a * sin(f); // 高度偏移 result.z = direction.y * a * cos(f); return result; } Varyings vert(Attributes input) { Varyings output; // 将顶点坐标转换到世界空间 VertexPositionInputs vertexInput = GetVertexPositionInputs(input.positionOS.xyz); float3 positionWS = vertexInput.positionWS; // 应用Gerstner波 // 可以叠加多个波以获得更复杂的效果 float3 waveOffset = float3(0, 0, 0); waveOffset += GerstnerWave(positionWS, _WaveAmplitude, _WaveLength, _WaveSpeed, normalize(_WaveDirection.xy)); // 可以在这里添加第二个、第三个波，方向、波长、振幅不同 // waveOffset += GerstnerWave(positionWS, _WaveAmplitude * 0.7, _WaveLength * 1.5, _WaveSpeed * 0.8, normalize(float2(0.7, 0.3))); positionWS += waveOffset; // 计算新的顶点位置（世界空间->裁剪空间） output.positionWS = positionWS; output.positionCS = TransformWorldToHClip(positionWS); // 计算新的法线（近似值，对于Gerstner波，需要更精确的法线计算，这里简化） // 在实际项目中，最好在顶点或片元着色器中基于波函数导数重新计算法线 VertexNormalInputs normalInput = GetVertexNormalInputs(input.normalOS, input.tangentOS); output.normalWS = normalInput.normalWS; output.tangentWS = float4(normalInput.tangentWS, input.tangentOS.w); output.uv = input.texcoord * _NormalTiling; output.screenPos = ComputeScreenPos(output.positionCS); output.fogFactor = ComputeFogFactor(output.positionCS.z); return output; }

注意事项：法线计算的坑上面的代码中，我直接使用了模型原始的法线转换到世界空间。这对于平缓的波浪勉强可用，但对于尖锐的Gerstner波，这会导致光照错误，高光会“飘”在错误的位置。正确的做法是：基于波函数的偏导数，在片元着色器中实时计算精确的世界空间法线。公式为：normal = normalize(cross(dFdx(positionWS), dFdy(positionWS)))。 但这依赖于屏幕空间导数，有时会有性能考量。另一种折中方案是在顶点着色器中，对相邻顶点采样波函数，近似计算面法线并传递给片元着色器。为了教程清晰，我们先使用简化版，但请记住这是需要优化的点。

4.2 混合动态法线贴图

接下来，在片元着色器中，我们混合两张法线贴图来模拟水面的细节流动。

// UV动画函数 float2 Panner(float2 uv, float2 direction, float speed, float time) { return uv + direction * speed * time; } // 采样并混合法线 float3 SampleAndBlendNormals(float2 uv, float strength) { // 采样第一张法线图，朝一个方向移动 float2 uvA = Panner(uv, float2(0.8, 0.6), _NormalSpeedA, _Time.y); float3 normalTS_A = UnpackNormalScale(SAMPLE_TEXTURE2D(_NormalMapA, sampler_NormalMapA, uvA), strength); // 采样第二张法线图，朝另一个方向移动 float2 uvB = Panner(uv, float2(-0.6, 0.8), _NormalSpeedB, _Time.y * 0.7); // 速度略有不同 float3 normalTS_B = UnpackNormalScale(SAMPLE_TEXTURE2D(_NormalMapB, sampler_NormalMapB, uvB), strength); // 混合两张法线图 float3 blendedNormalTS = normalize(float3(normalTS_A.xy + normalTS_B.xy, normalTS_A.z * normalTS_B.z)); return blendedNormalTS; }

4.3 计算基础光照与菲涅尔

有了法线，我们就可以计算光照了。对于水体，菲涅尔效应至关重要，它决定了我们能看到多少反射（水面）和多少折射（水下）。

// 菲涅尔近似计算 (Schlick‘s approximation) float FresnelEffect(float3 normal, float3 viewDir, float power) { float cosTheta = saturate(dot(normal, viewDir)); return pow(1.0 - cosTheta, power); } half4 frag(Varyings input) : SV_Target { // 1. 准备基础数据 float3 positionWS = input.positionWS; float3 viewDirWS = GetWorldSpaceNormalizeViewDir(positionWS); float2 screenUV = input.screenPos.xy / input.screenPos.w; // 2. 采样并计算世界空间法线 float3 normalTS = SampleAndBlendNormals(input.uv, _NormalStrength); // 将切线空间法线转换到世界空间 float3 bitangentWS = cross(input.normalWS, input.tangentWS.xyz) * input.tangentWS.w; float3x3 TBN = float3x3(input.tangentWS.xyz, bitangentWS, input.normalWS); float3 normalWS = mul(normalTS, TBN); // 注意：这里是mul(normalTS, TBN)，因为法线是从切线空间变换到世界空间 // 3. 计算菲涅尔因子 float fresnel = FresnelEffect(normalWS, viewDirWS, _FresnelPower); // 加强边缘反射 fresnel = saturate(_ReflectionStrength + (1.0 - _ReflectionStrength) * fresnel); // 4. 基础光照计算（简化版，仅主光源） Light mainLight = GetMainLight(); float3 lightColor = mainLight.color * mainLight.distanceAttenuation * mainLight.shadowAttenuation; float NdotL = saturate(dot(normalWS, mainLight.direction)); float3 diffuse = lightColor * NdotL; // 高光 (Blinn-Phong 简化) float3 halfDir = normalize(viewDirWS + mainLight.direction); float NdotH = saturate(dot(normalWS, halfDir)); float specular = pow(NdotH, _Smoothness * 128.0) * _Smoothness; float3 specularColor = lightColor * specular; // 5. 基础颜色（先简单给一个颜色，后续会与折射反射混合） float3 baseColor = lerp(_ShallowColor.rgb, _DeepColor.rgb, 0.5); float3 finalColor = (baseColor * diffuse + specularColor); // 应用雾效 finalColor = MixFog(finalColor, input.fogFactor); return half4(finalColor, _ShallowColor.a); }

至此，我们已经有了一个会波动、有光照和菲涅尔效应的基础水面。但它还缺少最关键的灵魂——反射和折射。接下来我们将实现这两个核心效果。

5. 实现屏幕空间反射与折射

5.1 屏幕空间折射（水下扭曲）

折射的原理是，由于光线在水面发生弯曲，我们看到的水下物体会发生偏移。在实时渲染中，我们通过扰动采样屏幕纹理的UV坐标来模拟这种偏移。

half4 frag(Varyings input) : SV_Target { // … 接上文代码 … // 6. 屏幕空间折射 // 获取当前像素的屏幕深度 float rawDepth = SampleSceneDepth(screenUV); float sceneDepth = LinearEyeDepth(rawDepth, _ZBufferParams); float surfaceDepth = LinearEyeDepth(input.positionCS.z, _ZBufferParams); float waterDepth = sceneDepth - surfaceDepth; // 计算水深 // 用法线扰动屏幕UV，模拟折射 float2 refractionOffset = normalWS.xy * _RefractionDistortion * saturate(waterDepth); // 深度越大，扭曲越强 float2 refractedUV = screenUV + refractionOffset; // 采样水下场景颜色（_CameraOpaqueTexture是URP提供的已渲染的不透明纹理） float3 underwaterColor = SAMPLE_TEXTURE2D(_CameraOpaqueTexture, sampler_CameraOpaqueTexture, refractedUV).rgb; // 7. 基于深度混合水的颜色和水下颜色 // 指数衰减模拟光在水中的吸收 float depthAttenuation = exp(-_DepthFactor * waterDepth); float3 depthBasedColor = lerp(_DeepColor.rgb, _ShallowColor.rgb, depthAttenuation); // 将水的颜色与水下场景颜色混合 float3 refractedFinalColor = lerp(underwaterColor, depthBasedColor, _RefractionStrength); // … 后续与反射混合 … }

这里的关键是_CameraOpaqueTexture，它包含了所有不透明物体渲染后的结果。我们用水的法线去扰动采样它的UV，就得到了“看起来像是透过扭曲的水面看到”的颜色。waterDepth用于控制扭曲强度，避免在非常浅的水域产生不自然的强烈扭曲。

5.2 屏幕空间反射（SSR）与反射探针回退

实现高质量的实时反射比较复杂。一个健壮的方案是尝试进行屏幕空间光线步进（SSR），如果失败（例如反射点不在屏幕内），则回退到采样天空盒或反射探针。

// 简化版的屏幕空间光线步进反射（概念性代码，实际需要更复杂的步进和命中检测） float3 CalculateReflection(float3 positionWS, float3 normalWS, float3 viewDirWS) { // 计算反射向量 float3 reflectionVector = reflect(-viewDirWS, normalWS); // 方法1：简单采样环境贴图（反射探针/天空盒） float3 envReflection = GlossyEnvironmentReflection(reflectionVector, positionWS, _Smoothness, 1.0); // 方法2：尝试屏幕空间反射（SSR） - 这里是一个极度简化的示意 // 实际SSR需要从当前像素出发，沿反射方向在深度图中进行步进搜索，判断是否与场景几何相交。 // 如果相交，则采样相交点屏幕坐标的颜色。 // 这是一个性能开销较大的操作，通常需要单独一个Pass或Compute Shader。 // float3 ssrColor = ScreenSpaceReflection(positionWS, reflectionVector); // 伪代码 // 为了性能和教程简洁，我们暂时使用方法1，并在法线上添加一些扰动来模拟水波对倒影的扭曲 float2 reflectionDistortion = normalWS.xz * _ReflectionDistortion; // 我们可以对envReflection进行基于法线的模糊或扰动采样来模拟水波，这里略过。 return envReflection; } half4 frag(Varyings input) : SV_Target { // … 接上文代码 … // 8. 计算反射颜色 float3 reflectionColor = CalculateReflection(positionWS, normalWS, viewDirWS); // 9. 使用菲涅尔因子混合折射和反射颜色 float3 waterSurfaceColor = lerp(refractedFinalColor, reflectionColor, fresnel); // 10. 叠加基础光照和颜色 finalColor = waterSurfaceColor * diffuse + specularColor; // 注意：这里的环境反射已经包含了部分光照信息，与直接光叠加时需要权衡，避免过亮。 // 更物理的做法是将反射作为镜面反射项的一部分纳入BRDF计算。 // … 应用雾效并输出 … }

实操心得：反射的“作弊”艺术完全精确的屏幕空间反射（SSR）在移动端或复杂场景下开销很大。在实际项目中，我经常使用一些“作弊”手段：

1. 平面反射简化：如果水面是平坦的（如池塘），可以只渲染一次场景到RenderTexture，然后镜像投影到水面上。这只对完全平静的水面有效。
2. 双层反射：用一张低分辨率的立方体贴图（反射探针）提供基础的天空和远景反射，再用法线扰动一张屏幕空间的模糊副本，来模拟近处动态物体的扭曲倒影。虽然不物理，但视觉上足够好，性能也低。
3. 菲涅尔主导：大幅提高菲涅尔效应。这样在视角接近水面时（折射主导），反射的瑕疵不易被察觉；在视角俯视时（反射主导），水面主要反射天空，对动态物体倒影要求不高。关键是把性能预算花在玩家最易察觉的地方。

6. 泡沫与焦散效果的实现

6.1 浪尖泡沫与岸边泡沫

泡沫是让水体“活”起来的关键细节。

// 浪尖泡沫：基于波浪高度 float CalculateWaveFoam(float3 positionWS, float3 normalWS) { // 简单使用世界空间Y坐标（波浪高度）作为泡沫因子 float foamHeightFactor = saturate((positionWS.y - _FoamThreshold) / 0.5); // 假设泡沫在阈值之上0.5单位内出现 // 采样泡沫纹理，并加上UV动画 float2 foamUV = positionWS.xz / _FoamTiling + float2(_Time.y * _FoamSpeed, 0); float foamTex = SAMPLE_TEXTURE2D(_FoamTexture, sampler_FoamTexture, foamUV).r; // 结合高度和纹理，并用法线在Y方向上的分量来影响泡沫强度（波峰泡沫多） float foam = foamHeightFactor * foamTex * saturate(normalWS.y + 0.5); return foam; } // 岸边泡沫：基于水深 float CalculateShoreFoam(float waterDepth) { // 在水深小于阈值的地方生成泡沫 float shoreMask = 1.0 - smoothstep(0.0, _FoamDepthThreshold, waterDepth); // 添加一些噪声和动画，让边缘更自然 float2 shoreUV = input.positionWS.xz / 10.0 + float2(_Time.y * 0.1, _Time.y * 0.08); float shoreNoise = SAMPLE_TEXTURE2D(_FoamTexture, sampler_FoamTexture, shoreUV).g; // 使用另一个通道 shoreMask *= shoreNoise; // 使用正弦函数创造泡沫线的“脉冲”效果，模拟波浪拍岸 shoreMask *= (sin(_Time.y * 3.0 + positionWS.x * 2.0) * 0.5 + 0.5); return shoreMask; } half4 frag(Varyings input) : SV_Target { // … 接上文计算 waterDepth, normalWS, positionWS … // 11. 计算泡沫 float waveFoam = CalculateWaveFoam(positionWS, normalWS); float shoreFoam = CalculateShoreFoam(waterDepth); float totalFoam = saturate(waveFoam + shoreFoam); // 12. 将泡沫颜色混合到最终颜色 float3 foamColor = float3(1.0, 1.0, 1.0); // 白色泡沫 finalColor = lerp(finalColor, foamColor, totalFoam); // … 最终输出 … }

6.2 简化版焦散效果

真实的焦散计算极其昂贵。我们采用一个取巧的办法：将一张焦散纹理投影到水底。

// 焦散效果 float3 CalculateCaustics(float3 positionWS, float3 normalWS) { // 将世界空间XZ坐标作为UV，模拟焦散投影在水底 float2 causticsUV = positionWS.xz / 5.0; // 缩放 // 添加基于时间和法线的UV偏移，模拟焦散随水波流动 causticsUV += normalWS.xz * 0.1 + float2(_Time.y * 0.05, _Time.y * 0.03); // 采样焦散纹理（通常是一张黑底白纹的图） float caustics = SAMPLE_TEXTURE2D(_CausticsTexture, sampler_CausticsTexture, causticsUV).r; // 焦散强度应随水深减小（浅水处明显） float depthAttenuation = saturate(waterDepth / 5.0); // 假设5米内有效 caustics *= depthAttenuation; // 焦散颜色（通常是亮白色或带点蓝色） return caustics * float3(1.2, 1.3, 1.0); // 略微偏蓝 } half4 frag(Varyings input) : SV_Target { // … 接上文代码 … // 13. 计算焦散 float3 causticsColor = CalculateCaustics(positionWS, normalWS); // 14. 将焦散光斑加到最终颜色上（通常用加法混合） finalColor += causticsColor; // … 最终输出 … }

这个焦散效果是“画”在水底地形上的，而不是真正由光线聚焦产生。但它足够快，并且在有阳光和清晰水底的场景中，能极大地增强真实感。

7. 性能优化与常见问题排查

一个好看的水体Shader也必须是一个高效的水体Shader。以下是几个关键的优化点和问题解决方法。

7.1 性能优化要点

1. 纹理与采样：
   • 压缩格式：法线贴图使用BC5/DXT5nm格式，其他贴图使用合适的压缩格式（如ASTC）。
   • 纹理尺寸：根据水面在屏幕中的大小选择合适的纹理尺寸。512x512或1024x1024的法线贴图通常足够。
   • 采样次数：合并采样。例如，泡沫的噪声和纹理可以打包到同一张贴图的RGBA不同通道中。
2. 计算复杂度：
   • 波浪计算：Gerstner波计算在顶点着色器进行，但叠加的波不宜过多（2-4个为宜）。对于超大水域，考虑使用贴图（如Flow Map）或Compute Shader来模拟波浪。
   • 循环与分支：片元着色器中避免循环和复杂分支。我们的实现中，所有计算都是线性的，适合GPU并行。
   • 精度：在移动端，将不必要的float改为half甚至fixed。
3. 渲染状态：
   • Overdraw：透明水体是Overdraw大户。确保水面网格面数合理，并使用层次细节（LOD），远距离使用简化版Shader或甚至用面片代替。
   • Shader变体：使用#pragma multi_compile或shader_feature来生成不同功能组合的变体。例如，为低端设备编译一个不带焦散和高级泡沫的简化版本。

7.2 常见问题与解决方案速查表

7.3 调试技巧：可视化中间变量

在开发过程中，将中间步骤的结果可视化是调试Shader最快的方法。你可以临时修改片元着色器的返回语句，来查看法线、深度、菲涅尔因子、泡沫遮罩等任何你想看的数据。

// 调试：显示世界空间法线 return half4(normalWS * 0.5 + 0.5, 1.0); // 调试：显示水深 return half4(waterDepth.xxx / 10.0, 1.0); // 假设10米为白色 // 调试：显示菲涅尔因子 return half4(fresnel.xxx, 1.0);

通过这种方式，你可以清晰地看到每个模块是否按预期工作，以及参数调整带来的直观变化。

8. 从Shader到完整水体：材质与场景设置

写完Shader只是第一步，要让它在场景中看起来正确，材质和场景设置同样重要。

1. 材质设置：创建一个材质，使用我们刚写好的Shader。耐心调整每一个参数。建议的调整顺序是：先调波浪（_WaveAmplitude,_WaveLength）让水面动起来；再调法线强度（_NormalStrength）和速度让表面有细节；然后调颜色和深度因子（_ShallowColor,_DeepColor,_DepthFactor）确定水的基调；接着调反射和菲涅尔（_ReflectionStrength,_FresnelPower）让水面有光泽和倒影；最后微调泡沫和焦散参数增加细节。
2. 网格：使用一个足够细分（至少100x100顶点）的平面网格作为水体。对于大海等广阔水域，需要使用曲面细分（Tessellation）或动态LOD网格，在近处提供高细节，在远处简化。
3. 反射探针：在场景中放置一个或多个反射探针（Reflection Probe），并确保其覆盖水体区域。将其类型设置为“Realtime”或“Baked”，这样我们的Shader才能采样到正确的环境反射。对于动态场景，可能需要每帧更新或使用混合探针。
4. 后期处理：水体可以和后期处理效果完美结合。
   • 颜色分级：轻微的整体色调调整能让水的颜色更符合场景氛围。
   • 泛光（Bloom）：开启泛光，可以让水面的高光和反射的亮部区域产生光晕，更加梦幻。
   • 屏幕空间环境光遮蔽（SSAO）：虽然水是透明的，但SSAO能增强水底地形与水面的接触感，让水体更“稳”地坐在场景中。

最后，别忘了在不同的光照条件（正午、黄昏、夜晚）和天气条件（晴天、阴天、下雨）下测试你的水体。一个健壮的水体Shader应该能在各种环境下都保持视觉上的协调与美感。这需要反复的迭代和微调，但当你看到自己创造的水面在虚拟世界中波光粼粼时，这一切都是值得的。