实时3D水面渲染：从反射折射到深度柔边的Shader实战

1. 项目概述：从“一潭死水”到“波光粼粼”的实时魔法

在游戏开发、数字孪生或者影视预览这些领域里，一个逼真的水面效果，往往是场景从“还行”到“惊艳”的关键一跃。你肯定见过那种僵硬得像蓝色塑料布一样的“死水”，也一定被《神秘海域》里随着角色动作而荡漾的海面，或者《赛博朋克2077》中霓虹倒映的湿润街道震撼过。这背后的核心，就是实时3D水面渲染技术。今天要聊的，就是如何亲手实现一个不仅看起来像水，而且“行为”也像水的实时水面，核心聚焦在四个最能体现水体质感的特性：反射、折射、水深效果以及水岸的柔边过渡。这不仅仅是贴一张纹理那么简单，它涉及到对光线物理特性的模拟、GPU编程的巧妙运用，以及对性能与效果之间平衡的持续博弈。无论你是刚接触Shader编程的新手，还是想优化现有水面效果的老鸟，希望这篇从原理到实战的完整拆解，能给你带来可以直接“抄作业”的灵感和方案。

2. 核心原理拆解：光线如何与水共舞

在动手写代码之前，我们必须先搞清楚想要模拟的物理现象到底是什么。实时水面渲染的本质，是用一系列“欺骗”眼睛的数学技巧，来近似模拟光与水面交互的复杂过程。

2.1 反射：倒影世界的构建

水面反射，直观理解就是能看到水面上方的景物。在离线渲染中，这通常通过光线追踪精确计算。但在实时领域，我们主要用两种性价比更高的方案：

1. 平面反射：这是最经典、最常用的实时反射技术。其核心思想是为水面单独渲染一张反射贴图。具体步骤是：将摄像机“镜像”到水面平面的另一侧，以这个镜像摄像机的视角重新渲染一遍场景，但只渲染水面以上的部分（通常通过裁剪平面实现），然后将渲染结果作为纹理贴到水面上。它的优点是反射内容准确、动态，能完美反映场景中移动的物体。缺点是性能开销大，因为需要多渲染一次整个场景（或部分场景），并且对于非平静水面，直接使用这张贴图会显得不真实，需要结合法线扰动。

2. 屏幕空间反射：这是一种更现代的技法。它不单独渲染反射贴图，而是利用当前帧已经渲染到屏幕上的颜色和深度信息，在屏幕空间内进行光线步进，寻找反射光线的交点。SSR的优点是与场景复杂度解耦，性能相对稳定，且能自然处理非平面反射。缺点是在屏幕边缘或反射射线被遮挡时信息会缺失，容易产生断裂，需要与立方体贴图等传统技术结合来填补空白。

对于追求效果与性能平衡的通用水面，平面反射+扰动依然是主力方案。我们会在实现部分详细展开如何设置镜像摄像机、处理裁剪和如何高效地扰动反射坐标。

2.2 折射：水下奥秘的窥视

折射是光从一种介质进入另一种介质时发生的方向偏折。对于水面，它让我们能看到水下的物体（如石头、水草），并且这些物体的位置看起来会发生偏移。

在实时渲染中，模拟折射通常比反射“取巧”。我们不会去真正计算光线的偏折路径，而是采用一种称为屏幕空间折射或扭曲背景的技术。核心思路是：

• 获取当前像素点在水面下的“背景”颜色。这可以通过渲染一张水下场景的深度图或直接使用上一帧的屏幕颜色缓冲（经过处理）来得到。
• 对采样这张背景贴图的UV坐标进行扰动。扰动的依据正是水面的法线贴图。法线方向决定了光线“偏折”的方向和程度。这样，当水面波动时，水下的景物看起来就会随之扭曲、晃动，非常生动地模拟了折射效果。

这里的一个关键技巧是，我们需要根据视线与水面的夹角来混合反射和折射的强度。当垂直看向水面时，主要看到反射（如正午看湖面）；当视线变得平缓时，折射成分会增加（如站在岸边看水底）。这个混合系数通常使用菲涅尔方程来近似计算。

2.3 水深与透明度：清澈与浑浊的掌控

水不是无限透明的。真实的水体，其颜色和透明度会随着深度变化。靠近岸边的浅水区清澈见底，而深水区则呈现深蓝或绿色，并且看不清底部。实现这个效果，我们需要：

1. 深度计算：在Shader中，获取当前水面像素点的实际深度（即到摄像机的距离）以及水底的深度。水底深度可以通过渲染一张单独的水底深度图，或者通过射线检测等方案获得。两者的差值就是实际水深。
2. 深度颜色混合：定义一个浅水颜色（如淡蓝、浅绿）和一个深水颜色（如深蓝、墨绿）。根据实际水深，在这两个颜色之间进行线性或指数插值。水越深，颜色越接近深水色。
3. 透明度衰减：同样根据水深，控制水体的不透明度（Alpha值）。在浅水区，透明度高，能清晰看到水底；在深水区，透明度降低，模拟光线在水体中被吸收的效果。这通常用一个指数衰减函数来实现，transparency = exp(-depth * absorptionCoefficient)，其中absorptionCoefficient是吸收系数，控制水体的浑浊度。

2.4 水岸柔边：告别生硬的“剪纸”效果

这是很多初级水面实现容易忽略，但极度影响真实感的一点。在现实世界中，水岸交界处由于湿润、泡沫、波浪破碎等原因，从来都不是一条生硬的数学分界线。在实时渲染中，我们通过多种技术组合来模拟这种柔边：

1. 深度边缘淡化：这是最基本的方法。计算水面网格边缘（即水岸线附近）的像素深度与场景深度（水底或岸边物体）的差值。当这个差值很小时（说明水面几乎与地面接触），让水体的透明度逐渐降低为0，实现一个自然的淡出效果。这能有效防止水面像一张纸片“浮”在陆地上。
2. 泡沫线贴图：使用一张或一套动态的泡沫噪声贴图，沿着水岸线进行采样和动画。通过将泡沫颜色与水面颜色混合，可以在交界处产生一条白色的、破碎的泡沫带，极大地增强视觉细节和动态感。泡沫的强度同样可以由水深、岸边坡度等参数控制。
3. 距离场与波浪交互：更高级的做法是使用距离场来描述海岸形状，并让靠近岸边的波浪高度、频率发生改变，模拟波浪拍岸、破碎的效果。这属于比较高级的领域，我们会在基础实现后简要讨论其思路。

3. 实战构建：从网格到Shader的完整管线

理论说得再多，不如一行代码。接下来，我们以一个基于Unity URP（通用渲染管线）和Shader Graph（也包含部分HLSL代码思路）的项目为例，一步步搭建这个实时水面。即使你使用其他引擎或原生API，核心思路也是相通的。

3.1 场景与网格准备

首先，我们需要一个代表水体的网格。一个简单的平面网格（Plane）就是最好的起点。将其缩放至覆盖你需要的湖泊、河流区域。

注意：对于大型开放水域，一个单一的高精度平面可能不是最优选择。常见的优化方案是使用分块网格（Tileable Grid），并配合视距相关的LOD（层次细节）。近距离使用高精度网格显示波浪细节，远距离则使用低精度网格节省性能。这里我们从简单平面开始。

为这个网格创建一个新的材质，我们将为它编写自定义的Shader。在URP中，你需要创建一个Unlit Graph或Lit Graph（如果希望水体能接收光照）作为起点。

3.2 核心Shader节点网络剖析

我们将在Shader Graph中构建主要逻辑。以下是关键节点的功能模块：

1. 水面波动与法线生成：这是所有效果的基础。没有波动，水面就是一面镜子。

• 噪声图驱动：使用两张Tileable的噪声图（通常是Perlin噪声或Flow Map），以不同的速度和方向滚动（Time节点乘以速度系数后与UV相加）。将两张滚动的噪声采样结果相加或混合，产生复杂、非重复的波纹图案。
• 高度图生成：将混合后的噪声值，通过一个简单的函数（如乘以一个强度系数）输出到顶点着色器的Position节点的Y（高度）通道上，让网格顶点随之起伏，形成几何波浪。
• 法线图生成：这是关键技巧。我们不需要为动态波浪预先烘焙法线贴图。可以直接对上述用于高度扰动的噪声图，在Shader中通过DDX和DDY节点（或Normal From Height节点）实时计算法线。具体步骤是：对扰动后的世界空间XZ坐标采样噪声得到高度值，然后分别对X和Z方向求偏导（DDX,DDY），这两个偏导向量叉积并归一化后，就能得到非常准确且动态的波浪法线。这一步计算量稍大，但效果远好于使用静态法线贴图。

// HLSL 概念代码，说明法线计算原理 float3 worldPos = IN.worldPos; float height = sampleNoise(worldPos.xz); float3 dpdx = ddx(float3(worldPos.x, height, worldPos.z)); float3 dpdy = ddy(float3(worldPos.x, height, worldPos.z)); float3 worldNormal = normalize(cross(dpdy, dpdx)); // 注意叉积顺序

2. 反射贴图采样与扰动：

• 设置平面反射：在Unity中，你可以使用Reflection Probe（立方体贴图）作为快速方案，但对于动态倒影，需要脚本动态更新Probe，或使用Planar Reflection组件（URP包内提供）自动帮你完成镜像摄像机的渲染和管理。这里假设我们通过脚本手动管理了一个渲染到纹理（Render Texture）的反射摄像机。
• 采样与UV扰动：在Shader中，采样这张反射贴图。直接采样是平静水面的效果。为了模拟波浪导致的倒影扭曲，我们需要用刚才计算出的法线图的XY分量（或者其缩放后的值）去扰动采样UV。通常只进行小幅度的扰动，过大的扰动会导致倒影难以辨认。

3. 折射背景获取与扭曲：

• 获取水下背景：在URP中，我们可以方便地通过Scene Color节点获取当前渲染的屏幕图像。但这包含水面本身。一个更精确的做法是：在渲染水面之前，先将不包含水面的场景渲染到一张纹理（这可以通过自定义渲染队列或第二个摄像机实现）。简单起见，我们先用Scene Color，并接受水面自身颜色可能被错误折射的微小瑕疵，这在动态水面中不易察觉。
• 扭曲采样：与反射类似，用法线去扰动采样Scene Color的屏幕UV坐标。但折射的扰动方向和强度可以与反射略有不同，以增加真实性。

4. 菲涅尔效应混合反射与折射：菲涅尔方程描述了反射率随视线与法线夹角变化的规律。在Shader中，我们用一个简化的Schlick近似公式就足够了：Fresnel = F0 + (1 - F0) * pow(1 - dot(ViewDir, Normal), 5)。 其中F0是基础反射率（如0.02）。dot(ViewDir, Normal)越小（视线越平行于水面），Fresnel值越接近1，即反射越强；垂直看时，反射最弱，折射最强。 用计算出的Fresnel值作为权重，线性混合反射颜色和折射颜色，得到水面的基础颜色。

5. 水深着色与透明度控制：

• 获取深度：使用Scene Depth节点获取当前像素的屏幕深度。同时，我们需要水底的深度。这可以通过一个简单的办法：渲染一张只有水底地形（不渲染水）的深度图。更实时的做法是，在Shader中通过射线步进（Raymarching）从水面点沿着视线方向向水下探测，直到与地形相交。后者计算量大但更通用。我们先采用预渲染水底深度图的方式。
• 计算与着色：waterDepth = sceneDepth - waterSurfaceDepth;。用这个waterDepth去控制颜色混合和透明度衰减。
  • 颜色：lerp(shallowColor, deepColor, saturate(waterDepth / maxDepth))。
  • 透明度：alpha = 1 - exp(-waterDepth * absorption)。同时，最终的透明度还要乘上之前基于菲涅尔的混合权重（因为反射部分通常是不透明的镜面效果）。

6. 水岸柔边实现：

• 深度边缘检测：计算waterDepth。当waterDepth小于一个阈值（如0.1）时，我们认为是水岸边缘。
• 泡沫叠加：使用一张流动的泡沫噪声图，其强度由(1 - saturate(waterDepth / foamThreshold))控制，这样泡沫只出现在极浅的水域。将泡沫颜色（白色）以这个强度叠加到最终水色上。
• 透明度淡化：同样在边缘，让最终计算出的alpha值随着waterDepth减小而线性减小到0：alpha *= saturate(waterDepth / fadeLength)。

3.3 性能优化关键点

实时渲染永远在效果和性能间权衡。水面Shader是典型的“性能杀手”区域，以下几点优化立竿见影：

1. 反射贴图分辨率：反射用的Render Texture分辨率不必和屏幕一样高，512x512或256x256往往就够了，因为反射细节常被波浪扭曲。可以尝试半分辨率甚至四分之一分辨率。
2. 反射更新频率：不是每一帧都需要更新反射贴图。对于移动缓慢的场景，可以每2帧、3帧更新一次，或者当摄像机移动超过一定角度/距离时才更新。这能大幅降低CPU和GPU负担。
3. 波浪计算优化：复杂的噪声计算（尤其是实时法线计算）是Shader中的ALU（算术逻辑单元）消耗大户。考虑：
   • 使用更廉价的噪声函数，如Value Noise代替Perlin Noise。
   • 将法线计算从像素着色器移到顶点着色器，然后在像素着色器中插值。这会导致波浪细节丢失，但对于中远距离的水面是可以接受的折衷。
   • 使用一张预先计算好的、Tileable的动画法线贴图序列，通过时间采样，代替实时计算。这是移动端非常常用的方案。
4. 深度纹理使用：确保你的管线设置中启用了深度纹理（Depth Texture）。在URP中勾选相应设置。避免自己用第二个摄像机去渲染深度，效率很低。
5. Shader LOD：为你的水面Shader设置不同的LOD级别。当摄像机远离时，自动切换到简化版本（例如关闭实时法线计算、使用低分辨率反射等）。

4. 常见问题与调试实录

即使按照步骤操作，你也可能会遇到一些“坑”。这里记录几个我实际开发中常遇到的问题和解决思路。

4.1 反射内容错乱或闪烁

• 问题描述：反射贴图中出现了水下的物体，或者反射物体在波浪处剧烈闪烁。
• 原因与排查：
  1. 裁剪平面设置错误：这是最常见的原因。你的镜像摄像机的近裁剪平面应该紧贴水面，并且裁剪平面（Camera clipping plane）应该设置为水面所在平面，只渲染水面上方的部分。在Unity中，可以通过Camera.projectionMatrix或设置camera.nearClipPlane并结合Shader中的Clip指令实现。务必确保裁剪平面的方向（法线）正确。
  2. 渲染队列冲突：确保水面材质本身的渲染队列在透明物体之后（如Transparent），而反射摄像机渲染的场景不包含这个水面本身，否则会无限递归。
  3. 精度问题：在极浅角度观看水面时，由于深度缓冲精度（Z-fighting）问题，可能导致闪烁。可以尝试稍微抬高一点反射摄像机的位置，或者为水面网格增加一个极小的深度偏移（Depth Bias）。
• 解决方案：仔细检查镜像摄像机的变换矩阵和投影矩阵。写一个调试脚本，将反射摄像机的视锥体用线框画出来，确保其位置和裁剪范围符合预期。确保水面材质不参与反射渲染。

4.2 折射边缘出现硬边或颜色溢出

• 问题描述：水岸线处，折射的水下景物像被剪刀裁切一样，或者水的颜色“染”到了不该有的地方。
• 原因与排查：
  1. 深度比较不准确：用于计算水深的“场景深度”和“水面深度”可能来自不同的空间或存在误差。确保两者都在同一空间（通常是观察空间或线性化的0-1深度）进行比较。
  2. 深度纹理的Mipmap或滤波：Scene Depth节点采样时，如果开启了滤波，在边缘可能得到混合了背景和前景的深度值，导致计算错误。尝试使用Sample Raw模式或明确指定Point滤波。
  3. 柔边过渡太生硬：你使用的fadeLength或foamThreshold参数太小，导致过渡区间太窄。增大这些参数，让透明度或泡沫的衰减更平滑。
• 解决方案：在Shader中输出waterDepth作为颜色查看（临时将深度可视化），检查水岸线附近的深度值变化是否平滑连续。调整柔边算法的参数，并考虑使用smoothstep函数代替线性的saturate来获得更平滑的过渡。

4.3 波浪法线导致反射/折射过度扭曲

• 问题描述：水面看起来油乎乎的，或者反射完全看不清，扭曲得太厉害。
• 原因与排查：法线扰动的强度（通常是一个乘以法线XY分量的系数）设置过大。
• 解决方案：反射和折射的扰动强度应该是两个独立的、较小的参数（例如0.01-0.05）。反射扰动可以比折射扰动更小，因为人眼对倒影的稳定性更敏感。可以分别暴露两个参数到材质面板上方便微调。

4.4 移动端性能急剧下降

• 问题描述：在PC上很流畅，一到手机或平板就卡顿。
• 原因与排查：
  1. 实时法线计算：像素级实时DDX/DDY计算在移动端GPU上非常昂贵。
  2. 全分辨率反射：即使降低了分辨率，每帧渲染一次反射贴图对移动端也是巨大负担。
  3. 过高的波纹复杂度：使用了多层高频率噪声叠加。
• 解决方案：
  • 降级方案：为移动平台编写一个简化的Shader变体。用预制的动画法线贴图替代实时计算。关闭实时反射，改用静态的立方体贴图反射探针（Reflection Probe），虽然动态感下降，但性能极佳。
  • 优化方案：将反射更新频率降到极低（如每秒5次）。将波浪计算完全移至顶点着色器。减少噪声叠加层数。

4.5 水面与后处理效果（如Bloom， SSAO）的交互问题

• 问题描述：开启了全屏后处理效果后，水面看起来太亮或太暗，或者环境光遮蔽（SSAO）错误地作用于水面。
• 原因与排查：后处理效果通常在全屏空间操作，水面的高光（反射）可能被Bloom过度放大，而水面的透明或特殊深度可能干扰SSAO的计算。
• 解决方案：
  • 对于Bloom：调整水面的反射颜色亮度，或者更高级地，通过Frame Debugger工具查看Bloom提取的亮度阈值，确保水面的高光区域在合理范围内。
  • 对于SSAO：需要检查你的渲染管线是否正确处理了透明物体的深度。在某些管线中，透明物体不写入深度缓冲，可能导致其下方的SSAO计算错误。可能需要调整渲染顺序或使用自定义的深度传递机制。一个常见的Hack是，让水面Shader在透明渲染时，也向一个自定义的深度纹理写入一个调整后的深度值，以供SSAO使用，但这需要管线支持。

5. 进阶思路与扩展方向

当你实现了基础版本后，可以考虑以下方向让水面更加栩栩如生：

1. 动态潮汐线与湿润效果：不仅仅是水岸柔边，可以模拟波浪拍打上岸后，岸边材质变深变湿的效果。这通常需要一张单独的海岸高度图或距离场，在水退去时，通过参数控制岸边材质的颜色和光滑度逐渐恢复干燥状态。
2. 次表面散射：模拟光线在水体内部散射的效果，特别是在浅水区、边缘和浪花泡沫处，会产生一种柔和的光晕感。这可以通过在着色时，额外采样水面下某一点（沿法线方向偏移）的颜色，并与表面颜色混合来实现一个简化的SSS模型。
3. 焦散效果：阳光透过波动的水面，在水底投射出动态的光斑图案。这是一个独立而复杂的效果，通常需要将水面的高度场/法线信息以某种方式“投影”到水底，并作为一张光照遮罩来增强水底的光照。可以作为一个单独的、可选的渲染Pass来实现。
4. 与物理交互：让角色、船只等物体与水面的交互产生涟漪。这可以通过在物体移动位置渲染一个“涟漪粒子”或写入一张全局的“扰动图”来实现。Shader采样这张全局扰动图，将其叠加到本地波浪计算中，就能产生动态扩散的涟漪。

实现一个逼真的实时水面，是一个不断迭代和权衡的过程。从最基础的反射折射开始，逐步加入深度、柔边、优化，再到高级特效。我的经验是，先保证主干效果正确且性能达标，再考虑锦上添花的细节。很多时候，一个运行在60帧、效果80分的动态水面，远比一个效果95分但只有30帧的幻灯片体验要好得多。希望这份详细的拆解能成为你探索水面渲染世界的一张可靠地图，剩下的，就交给你的创意和调试了。