1. 从“一潭死水”到“波光粼粼”：实时水面渲染的挑战与价值

在游戏、模拟仿真或者任何需要营造沉浸感的三维场景里，一片逼真的水域往往是画龙点睛之笔。回想一下，你是否曾在某个游戏里，因为一片清澈见底、波光粼粼的湖面而驻足欣赏？又或者，是否因为一片死板、像塑料布一样的水面而感到出戏？从“一潭死水”到“波光粼粼”，这背后正是实时3D水面渲染技术所要解决的核心问题。今天，我想和你深入聊聊这个话题，特别是如何实现水面那些迷人的光学特性：反射、折射、水深效果以及自然的水岸柔边。

为什么说这是个挑战？因为在实时渲染的约束下，我们无法像电影特效那样动用海量的计算资源进行物理精确的模拟。我们必须用巧妙的“障眼法”，在有限的每帧16毫秒（以60FPS计）内，欺骗玩家的眼睛，让他们相信眼前的水是“活”的。这涉及到对光线与水面交互的深刻理解，并将其转化为高效的着色器代码。反射让你看到天空和岸边的倒影，折射让你窥见水下的鹅卵石，水深效果模拟了光线在水中的衰减（即水越深，颜色越暗、越偏蓝绿），而水岸柔边则消除了生硬的边界，让水与陆地自然交融。这些效果单独实现已属不易，组合起来更要考虑性能与视觉质量的平衡。

本文适合所有对计算机图形学，特别是实时渲染感兴趣的朋友。无论你是刚入门着色器编程的开发者，还是希望优化现有水面效果的技术美术，我相信接下来的内容都能给你带来直接的启发和可复现的方案。我们将避开那些过于学术化的公式推导，聚焦于“如何做”以及“为什么这么做”，并分享一些我在实际项目中踩过的坑和总结的技巧。让我们开始吧。

2. 理解水面的光学原理：反射、折射与散射

在动手写代码之前，我们必须先弄清楚要模拟的物理现象到底是什么。这能帮助我们在技术选型和效果调优时做出正确的决策，而不是盲目地试参数。

2.1 反射：不仅仅是镜像

水面反射，本质上就是镜面反射。理想光滑平面会根据入射角等于反射角的定律，将光线（或者说视线）反射到场景中的另一个物体上。在实时渲染中，我们最经典的做法是使用反射贴图。但这并不是真的去追踪每一条光线，而是一种取巧的方法：将摄像机置于水面下方对称的位置，渲染整个场景，得到一张纹理，再将这张纹理贴到水面上。

这里的关键在于“对称”。假设水面是XZ平面，Y轴向上。摄像机原本在世界空间的位置是(camX, camY, camZ)。那么，用于渲染反射贴图的虚拟摄像机位置就是(camX, -camY, camZ)，并且其向上向量也可能需要翻转。然而，这里有一个常见的陷阱：直接对Y坐标取反并不总是正确，特别是当水面并非完全水平，或者有局部波动时。更健壮的做法是，计算摄像机位置相对于水面的镜像点。给定水面平面上一点P_plane和法线N，摄像机位置C的镜像位置C‘可以通过公式计算：C‘ = C - 2 * dot(N, C - P_plane) * N这个公式能处理任意朝向的水面。

注意：渲染反射贴图是一个昂贵的操作，因为它意味着多渲染一整个场景。因此，优化策略至关重要，例如只渲染对反射有贡献的物体（通常是大范围的天空盒、地形、建筑），使用较低的分辨率，或者利用上一帧的反射贴图（如果摄像机移动不快）。

2.2 折射：看见水下的世界

折射遵循斯涅尔定律，描述了光线从一种介质（如空气）进入另一种介质（如水）时的弯曲现象。折射率决定了弯曲的程度。在着色器中，我们通常不会实时进行精确的折射计算，因为那需要追踪光线并与水下几何体求交，开销巨大。

取而代之的，是另一种巧妙的“欺骗”技术：扰动屏幕空间深度或颜色信息。最主流的方法是使用折射贴图。我们可以将当前帧渲染好的场景颜色缓冲（即屏幕图像）作为纹理传入着色器。对于水面上的每个像素，我们稍微扰动一下它的屏幕坐标，然后用这个扰动后的坐标去采样屏幕颜色缓冲，模拟光线弯曲后看到的不同位置。

扰动量从哪里来？通常来自一张法线贴图。水波的法线贴图提供了水面每个点细微的朝向变化，我们利用这个法向量的XY分量来偏移屏幕UV坐标。

// 简化示例（片元着色器中） float2 screenUV = input.screenPosition.xy / input.screenPosition.w; float2 refractionOffset = waterNormal.xy * _RefractionStrength * depthFactor; float3 refractedColor = tex2D(_CameraOpaqueTexture, screenUV + refractionOffset).rgb;

这里的depthFactor很关键，它通常基于水面点到水下物体的深度（通过深度纹理获取）。深度越大，折射效果应该越明显，因为光线弯曲的路径更长。如果不用深度因子，浅水区的折射会显得过于夸张和不自然。

2.3 水深、吸收与散射：赋予水体颜色与体积感

清澈的海水是蓝色的，浑浊的河水是黄绿色的，这不是因为水本身是蓝色的，而是因为水对光线有选择性的吸收和散射。短波长（蓝、绿）的光更容易被散射，而长波长（红）的光则被吸收得更快。因此，随着水深增加，红色分量迅速衰减，水体主要呈现蓝绿色。

在着色器中，我们可以用一个指数衰减函数来模拟这种基于深度的颜色变化：

float waterDepth = sceneDepth - surfaceDepth; // 从深度纹理计算得到 float3 absorptionCoeff = float3(0.1, 0.05, 0.01); // 自定义的吸收系数，R>G>B float3 depthColor = exp(-absorptionCoeff * waterDepth); finalColor *= depthColor;

此外，水不是完全透明的，即使没有杂质，也存在微小的粒子导致光线散射，这产生了水下物体的模糊感和一种朦胧的体积光效，通常称为“水下雾效”。我们可以将上述的深度颜色与一个全局的雾效因子结合，或者直接使用一个基于深度的颜色渐变（从浅水区的浅蓝/透明到深水区的深蓝）。

2.4 菲涅尔效应：连接反射与折射的关键

菲涅尔效应描述了一个观察现象：当你垂直看向水面（视线与法线夹角小），更容易看清水下（折射主导）；当你掠射看向水面（视线与法线夹角大），水面更像一面镜子（反射主导）。这个效应是水面看起来真实的核心，因为它动态地混合了反射和折射颜色。

计算菲涅尔因子有很多近似公式，最常用的是Schlick近似：

float fresnel = _FresnelBias + (1.0 - _FresnelBias) * pow(1.0 - dot(viewDir, normal), _FresnelPower);

其中viewDir是视线方向，normal是水面法线。_FresnelBias和_FresnelPower是可调参数，用于控制菲涅尔效应的强度和曲线。最终的颜色是反射色和折射色的线性插值：

float3 waterColor = lerp(refractedColor, reflectedColor, fresnel);

这个简单的混合，立刻让水面活了起来，视角的变化会带来动态的视觉效果。

3. 核心实现：构建一个基础水面着色器

理解了原理，我们就可以着手搭建一个基础的Unity URP/HDRP或类似渲染管线下的水面着色器了。这里我将以Unity URP为例，因为其普及度高，但原理通用。

3.1 网格与顶点数据准备

首先，你需要一个代表水面的网格平面。细分程度要足够高，才能支持顶点动画（模拟波浪）。如果使用贴图驱动的法线扰动，对细分要求不高，但为了更好的波浪轮廓，建议使用一个细分过的平面。

在顶点着色器中，我们主要做两件事：

1. 顶点动画：使用正弦波、Gerstner波等函数，让顶点在Y轴（高度）上运动，同时也可以在XZ平面上有少量偏移，模拟波浪的移动。这是实现动态波光的基础。

   // 简化的Gerstner波叠加 float3 gerstnerWave(float4 wave, float3 p, inout float3 tangent, inout float3 binormal) { float steepness = wave.z; float wavelength = wave.w; float k = 2 * PI / wavelength; float c = sqrt(9.8 / k); float2 d = normalize(wave.xy); float f = k * (dot(d, p.xz) - c * _Time.y); float a = steepness / k; p.x += d.x * a * cos(f); p.y = a * sin(f); p.z += d.y * a * cos(f); // 计算切线和副切线（用于法线计算） float df = k * (dot(d, p.xz) - c * _Time.y); tangent += float3(-d.x * d.x * steepness * sin(df), d.x * cos(df), -d.x * d.y * steepness * sin(df)); binormal += float3(-d.x * d.y * steepness * sin(df), d.y * cos(df), -d.y * d.y * steepness * sin(df)); return p; }

2. 传递屏幕空间信息：计算并输出裁剪空间位置和屏幕UV坐标，供片元着色器用于采样反射/折射纹理和深度纹理。

3.2 片元着色器：效果合成

片元着色器是魔法发生的地方。流程大致如下：

1. 采样与混合法线：通常我们会使用两张法线贴图，以不同的速度和方向滚动采样，然后叠加混合。这能打破单一纹理的重复感，创造出更复杂、更自然的波光细节。混合时要注意归一化。

   float2 uv1 = input.uv * _NormalTiling1 + _Time.y * _NormalSpeed1; float2 uv2 = input.uv * _NormalTiling2 + _Time.y * _NormalSpeed2; float3 normal1 = UnpackNormal(tex2D(_NormalMap1, uv1)); float3 normal2 = UnpackNormal(tex2D(_NormalMap2, uv2)); float3 waterNormal = normalize(float3(normal1.xy + normal2.xy, normal1.z * normal2.z)); // 保留z分量的乘积

2. 计算菲涅尔因子：使用视图方向和扰动后的法线计算菲涅尔值。
3. 采样反射颜色：使用立方体贴图（用于静态天空）或通过脚本渲染的平面反射探针/渲染纹理来获取反射颜色。对于动态反射，URP的PlanarReflections组件可以帮我们管理反射相机的渲染。
4. 采样折射颜色：通过_CameraOpaqueTexture获取当前帧的屏幕图像，并用扰动后的屏幕UV进行采样。这里必须结合深度信息。
5. 应用深度与颜色吸收：从_CameraDepthTexture中解码出场景深度和水面深度，计算水深，并应用指数衰减来调制折射颜色，模拟水下物体的颜色变化和模糊感。
6. 混合与输出：用菲涅尔因子混合反射色和折射色。在此基础上，可以添加高光反射（比如模拟阳光的镜面高光）、边缘泡沫等效果。

3.3 获取与处理深度纹理

深度纹理是实现高质量折射和水深效果的核心。在URP中，你需要确保渲染管线资源中启用了Opaque Texture和Depth Texture。

在着色器中解码深度：

float sceneDepth = LinearEyeDepth(SampleSceneDepth(screenUV), _ZBufferParams); float surfaceDepth = LinearEyeDepth(input.screenPosition.z, _ZBufferParams); float waterDepth = sceneDepth - surfaceDepth;

waterDepth可能为负（当水面网格与其他物体穿插时），需要钳制到0。这个深度值将用于：

• 折射偏移量：refractionOffset *= saturate(waterDepth * _DepthFactor);让浅水区折射减弱。
• 颜色吸收：float3 depthAttenuation = exp(-_AbsorptionCoeff * waterDepth);
• 边缘泡沫：在非常浅的区域（waterDepth < _FoamThreshold），可以混合一层泡沫纹理。

4. 实现自然的水岸柔边

生硬的水岸线是破坏沉浸感的元凶之一。实现柔边，核心思路是让水在靠近岸边时，以一种半透明、有渐变的方式“消失”或与地面混合。这里有几个实践下来非常有效的方法：

4.1 基于顶点颜色或贴图的边缘淡化

这是最直接的美术可控方法。让美术师在制作水面网格时，在靠近岸边的顶点上绘制顶点颜色（如Alpha通道），或者在模型UV上画一张边缘遮罩贴图。在着色器中，用这个值来混合水的透明度。

• 优点：完全可控，可以做出任何形状的复杂岸边，包括沙滩、岩石滩。
• 缺点：需要美术资源，且如果水面是动态的（如河流、海浪拍岸），静态的遮罩可能不匹配。

4.2 基于深度差的边缘检测

这是一种更程序化的方法。我们已经有waterDepth（水面到水下地面的深度）。当这个深度非常小（比如小于0.2米）时，我们就认为处于岸边。

float shoreMask = 1.0 - smoothstep(_ShoreFadeStart, _ShoreFadeEnd, waterDepth);

smoothstep函数会生成一个0到1的平滑过渡。_ShoreFadeStart和_ShoreFadeEnd定义了过渡的深度范围。然后，我们可以用这个shoreMask来做很多事情：

• 混合透明度：alpha *= (1.0 - shoreMask);让岸边透明。
• 混合颜色：将水的颜色与一个“浅水区颜色”（如沙子的颜色）进行混合。
• 添加泡沫线：在shoreMask的某个阈值处，采样一个泡沫噪声纹理，模拟浪花拍岸的效果。为了更自然，可以让泡沫纹理随着时间在岸边“滚动”。

4.3 结合屏幕空间模糊或抖动

单纯的颜色混合有时还是会显得生硬。一个进阶技巧是，在岸边过渡区域，对折射采样的屏幕坐标施加额外的、更随机的扰动，或者对最终颜色进行一个微小的模糊。这模拟了浅水区底部沙石导致的光线复杂散射，能让边缘更加“毛躁”和自然。你可以使用一个噪声纹理，根据shoreMask来强度来扰动UV。

实操心得：在实际项目中，我强烈推荐方法4.2深度差法作为基础，因为它完全自动，适应任何地形。然后，叠加方法4.1的顶点色遮罩，让美术师可以在某些特定区域（比如码头、堤岸）进行微调，覆盖掉程序化可能产生的瑕疵。最后，用方法4.3的噪声扰动来增加细节。这三层组合起来，能应对绝大多数复杂的水岸情况。

5. 性能优化与进阶技巧

实时渲染永远是性能与质量的权衡。一个全特效的水面可能是帧率杀手。以下是一些关键的优化思路：

5.1 反射的优化策略

• 降低分辨率：反射贴图不需要和主渲染相同的分辨率，512x512甚至256x256在很多时候都足够了，尤其是配合模糊后。
• 限制渲染层级：只为反射相机设置特定的渲染层级（Layer），只渲染天空盒、地形和大型静态物体。忽略角色、特效等小物件。
• 使用平面反射探针（Box Projection）：对于封闭的小水池，可以使用立方体贴图反射探针，并开启Box Projection进行校正，这是静态的，零运行时开销。
• 屏幕空间反射（SSR）：对于现代管线，SSR是一个强大的替代方案。它利用当前帧的深度和法线信息，在屏幕空间内追踪反射光线。SSR对于局部、非平面的反射效果很好，且开销相对固定。但它无法反射屏幕外的物体。

5.2 折射与深度的优化

• 降低深度纹理采样次数：避免在着色器中多次采样深度纹理。通常一次采样解码后，重复使用即可。
• 简化深度计算：在移动平台，可以考虑使用更简单的深度比较，而非精确的Eye Depth计算，如果视觉差异可接受的话。
• 分档渲染：根据摄像机距离，使用不同质量的水面着色器变体。远距离水面可以禁用折射、使用简化的波浪和法线。

5.3 波浪动画的优化

• 在顶点着色器做：波浪动画尽量放在顶点着色器，而不是片元着色器。这能利用GPU的顶点变换能力，且计算量远小于逐像素计算。
• 控制波浪数量：Gerstner波叠加越多越真实，但也越耗性能。通常2-4层波叠加已经能产生不错的效果。可以用一张高度图（Heightmap）来预计算复杂波浪，但这需要额外的纹理和采样。
• 使用GPU实例化：如果场景中有大量相同的水面网格（如多个小水坑），务必使用GPU实例化来绘制，能极大降低Draw Call。

5.4 视觉增强的“作弊”技巧

• 镜面高光：不要忘记添加基于物理的镜面高光（PBR Specular）。一个明亮的高光点能立刻提升水面的“湿润”感和光泽度。使用GGX或Beckmann分布模型。
• 边缘光：在水面与物体相交的边缘（比如船体），计算一下边缘光（Rim Light），能增强立体感和材质分离度。
• 焦散（Caustics）：这是光线通过水面折射后，在水底形成的明亮光斑。实现真正动态的焦散非常昂贵。一个取巧但有效的方法是，使用一张预先计算好的焦散动画纹理，根据水面世界坐标进行采样和投影，并随着时间滚动。虽然不物理，但视觉提升显著。
• 次表面散射（SSS）：对于较深、浑浊的水体，光线会在水中散射。一个简单的模拟方法是，在非常薄的区域（根据深度和法线判断），让水的颜色稍微“渗出”到岸边的材质上。可以用一张模糊的水面颜色图，以岸边线为Mask，叠加到地形上。

6. 常见问题排查与调试

即使按照步骤实现了所有效果，你可能还是会遇到一些诡异的问题。这里分享几个我踩过的坑和解决方法。

6.1 反射物体出现“断裂”或错位

问题描述：反射中的物体，特别是靠近水边的物体，在反射图像中看起来被切掉了一部分，或者位置不对。根因分析：这几乎总是由于用于渲染反射贴图的虚拟摄像机裁剪平面设置不当引起的。反射相机需要能看到所有需要被反射的物体，但其近裁剪平面如果离水面太远，靠近水面的物体就可能被裁剪掉。解决方案：

1. 动态计算反射相机的近裁剪平面。一个简单有效的方法是：将主摄像机近裁剪平面位置镜像到水面下，作为反射相机近裁剪平面的参考。或者，直接设置一个非常小的近裁剪平面值（如0.01），但要小心深度精度问题。
2. 检查反射相机的视锥体（Frustum）。确保其能包裹住水面和需要反射的物体。有时需要手动调整反射相机的投影矩阵或使用斜裁剪（Oblique Clipping）技术，让近裁剪平面紧贴水面。

6.2 折射边缘出现“游泳”或闪烁的锯齿

问题描述：在水面与其他物体（如河岸）的交界处，折射的图像会剧烈抖动或出现锯齿状闪烁。根因分析：这是由深度缓冲的精度问题和折射UV扰动共同导致的。在交界处，waterDepth值非常小且变化剧烈，甚至可能在0附近波动（由于深度缓冲精度限制）。这导致计算出的折射偏移量refractionOffset极不稳定。解决方案：

1. 深度容差：在计算waterDepth后，添加一个小的容差值，并钳制到非负。

   waterDepth = max(waterDepth, 0.001); // 避免除零或极小值

2. 平滑深度：对采样到的场景深度进行一次简单的滤波（如周围4个像素取平均），可以显著减少闪烁，但会带来轻微的模糊。在岸边区域，这个模糊是可以接受的。
3. 扰动软化：在浅水区，减小折射扰动的强度。可以这样修改：

   float depthFactor = saturate(waterDepth * _DepthFactor); float2 refractionOffset = waterNormal.xy * _RefractionStrength * depthFactor * depthFactor; // 使用平方或其他衰减函数，让浅水区扰动更快衰减到0

6.3 水面在特定角度下“消失”或过度透明

问题描述：当摄像机以某个角度看向水面时，水面突然变得几乎完全透明或完全看不见。根因分析：这通常是渲染队列和混合模式设置错误导致的。水面通常需要半透明渲染（Alpha Blending）。如果渲染队列设置不对（比如在 opaque 物体之后，但又早于其他半透明物体），或者深度写入（ZWrite）没有正确处理，就会导致排序错误。解决方案：

1. 确保水面着色器的渲染队列（Render Queue）设置为Transparent（通常是3000）。
2. 在半透明Pass中，关闭深度写入（ZWrite Off），但开启深度测试（ZTest LEqual）。这确保水面能正确被不透明物体遮挡，同时不会遮挡后面的半透明物体。
3. 仔细设置混合（Blend）模式。常用的混合模式是Blend SrcAlpha OneMinusSrcAlpha（传统Alpha混合）。如果你使用了深度纹理来做软边缘，可能需要更复杂的混合或使用 Alpha to Coverage。
4. 一个关键检查点：在Unity的Scene视图中，打开渲染模式为Overdraw，观察水面的绘制顺序是否正确，是否出现了异常的过度绘制。

6.4 移动设备上帧率骤降

问题描述：在PC上运行流畅的水面，在手机上卡顿严重。根因分析：移动平台的GPU带宽和填充率（Fill Rate）是主要瓶颈。高分辨率的水面网格、复杂的片元着色器计算（特别是多次纹理采样和复杂数学运算）、全分辨率的反射贴图都是性能杀手。解决方案：

1. 简化网格：在移动端使用更低精度的水面网格。
2. 简化着色器：创建移动端专用的着色器变体。可以考虑：
   • 移除动态平面反射，改用静态立方体贴图或简单的天空盒反射。
   • 降低法线贴图的数量和滚动复杂度，甚至只用一张。
   • 简化或移除基于深度的复杂颜色吸收计算，用一个简单的颜色渐变代替。
   • 禁用焦散、次表面散射等增强效果。
3. 降低纹理采样：将多张纹理（法线、泡沫、噪声）打包到一张纹理的不同通道（如RGBA），减少采样次数。
4. 使用半分辨率渲染：对于水面效果，可以尝试先将水面渲染到一张半分辨率（Half-Res）的渲染目标，然后再上采样到屏幕。这能大幅降低填充率压力，虽然会损失一些锐利度，但对动态的水面来说往往可以接受。

调试图形问题，最好的工具就是帧调试器（Frame Debugger）和渲染管线分析器。它们能让你清楚地看到每一个Draw Call的状态、渲染目标的内容以及性能消耗在哪里，是定位问题的利器。