Unity Shader Graph 水面效果制作：从波动、折射到菲涅尔效应

1. 项目概述：从零构建一个简单的水面Shader

在Unity里做游戏，尤其是涉及到自然场景，水面效果几乎是绕不开的一环。一个灵动、真实的水面能瞬间提升场景的氛围感和沉浸感。很多刚接触Shader的新手，一听到“水面Shader”就觉得头大，觉得这玩意儿肯定涉及复杂的物理模拟和数学计算。其实不然，一个视觉效果不错、性能友好的基础水面，用Unity的Shader Graph完全可以轻松实现。

这个项目，我们就来动手做一个“简单的水面Shader Graph”。它不追求物理级的精确模拟，而是聚焦于用最直观、最可控的节点，组合出视觉上可信的水面核心特征：波动、折射、高光反射和菲涅尔效应。通过这个案例，你不仅能得到一个可以直接用在项目里的Shader，更重要的是，你能彻底理解这些视觉效果背后的图形学原理和实现逻辑，以后再看到复杂的水面效果，你也能一眼看穿它的“骨架”。

这个Shader非常适合用于手机游戏、风格化游戏或者作为大型水体的远景简化版本。我们会从Shader Graph的基本布局讲起，一步步连接节点，解释每个参数的意义，并分享我在实际项目中调整水面效果的实用心得和避坑指南。

2. 核心视觉原理与Shader Graph设计思路

在动手连线之前，我们必须先想清楚：一个让人感觉“像水”的表面，到底有哪些视觉特征？理解了这些，我们的节点连线才会有方向，而不是盲目地试错。

2.1 水面四大核心视觉特征解析

波动（Waves）：这是水面动态感的灵魂。波动不是简单的上下起伏，它通常由多种不同频率、不同振幅的波纹叠加而成，形成一种有机的、非重复的复杂运动。在Shader中，我们通常使用正弦（Sine）或噪声（Noise）函数来模拟这种波动。

折射（Refraction）：光从空气进入水中会发生偏折，导致我们看到水下的物体位置发生偏移和扭曲。这是水面真实感的关键。在实时渲染中，我们通常采用一种“欺骗”视觉的方法：根据水面法线扰动屏幕背后物体的UV坐标，来模拟这种扭曲效果。

高光反射（Specular Reflection）：平静的水面像镜子一样反射天空和周围环境；有波纹的水面，则会将高光打散成一片片闪烁的亮斑。这部分通常用基于法线和视角方向计算的高光模型（如Blinn-Phong）来实现。

菲涅尔效应（Fresnel Effect）：这是一个非常重要的光学现象。当我们的视线垂直于水面（看向水底）时，更容易看到水下的折射内容；当视线与水面夹角很小（看向远处的水面）时，则更容易看到水面的反射内容。这个效应决定了水面何处更透明（折射主导），何处更像镜子（反射主导）。在Shader中，我们用一个基于视角与法线夹角的函数来控制反射和折射的混合权重。

2.2 基于Shader Graph的实现策略

Shader Graph是一种基于节点的可视化着色器编辑工具，它的核心思想是“数据流”。我们的目标就是构建一个处理流程，将模型的顶点位置、UV、法线、视角方向等输入数据，经过一系列计算节点，最终输出到片元着色器的颜色上。

我们的策略是模块化构建：

1. 波动模块：输入世界空间XZ坐标和时间，通过噪声和正弦函数生成高度偏移，并据此计算新的法线。
2. 折射模块：使用波动模块生成的法线，去扰动屏幕空间深度图或抓取纹理（Grab Pass）的UV，模拟水下扭曲。
3. 反射模块：采样环境立方体贴图（Cubemap）或平面反射探针（Reflection Probe），并结合高光计算。
4. 菲涅尔与混合模块：计算菲涅尔系数，用它作为权重，将折射颜色、反射颜色以及一个基础水色进行混合。
5. 输出模块：将最终颜色、法线、深度等数据输出到对应的Master Node端口。

这个设计思路清晰地将复杂问题分解，每个模块都可以独立调试，非常符合Shader Graph的工作流。

3. 创建与配置Shader Graph环境

工欲善其事，必先利其器。在开始连线之前，确保你的Unity工程和Shader Graph环境已经准备就绪。

3.1 工程准备与渲染管线选择

首先，你需要一个Unity项目（建议使用2021 LTS或更新版本）。Shader Graph并非独立存在，它依赖于Unity的可编程渲染管线（SRP）。目前主要有两种选择：

1. 通用渲染管线（URP）：轻量、高效，对移动平台和性能受限的项目非常友好。这是我们本案例的首选。
2. 高清渲染管线（HDRP）：面向高端PC和主机，提供电影级的画质，但配置更复杂，性能开销大。

对于我们的简单水面，URP完全足够。如果你新建项目时没有选择URP模板，也可以在项目中通过Package Manager安装“Universal RP”包，然后创建URP Asset并分配给Graphics Settings。

3.2 创建第一个Shader Graph资源

在Project窗口中右键，选择Create -> Shader -> Universal Render Pipeline -> Shader Graph。如果你使用的是HDRP，则选择对应的HDRP选项。将其命名为“Water_Simple”。

双击打开这个文件，你会进入Shader Graph编辑器窗口。界面主要分为：

• 主图（Master Stack）：位于右侧，这是最终输出节点。URP中通常是Universal PBR或UnlitMaster Node。对于水面，我们通常从Unlit开始，因为它不参与引擎的标准光照计算，我们完全自己控制颜色，更直观。
• 黑板（Blackboard）：位于左侧，用于定义和管理整个Shader的属性（Properties），这些属性会暴露在材质球（Material）的Inspector面板上，供美术或策划调节。
• 节点图区域：中间最大的区域，就是我们进行连线创作的地方。

注意：在开始连线前，我强烈建议先将Master Node的Surface Type设置为Transparent，Blend Mode设置为Alpha（如SrcAlpha OneMinusSrcAlpha）。因为水面是半透明的，这能确保它正确地与背景混合。如果你希望水面有深度写入和测试（防止透明物体排序错误），可以再深入研究Depth Write和Depth Test的配置，但作为入门，我们先从简单的透明混合开始。

4. 构建波动效果：赋予水面生命

波动是动态水面的基础。我们将创建一个可以控制频率、速度和幅度的波动系统。

4.1 使用正弦函数创建基础波纹

我们首先从最简单的正弦波开始。思路是：将模型在世界XZ平面上的位置作为输入，加上时间变量，输入到正弦函数中，输出一个在[-1, 1]之间周期变化的值，作为顶点Y方向的偏移。

1. 获取顶点世界坐标：添加一个Position节点，将其Space设置为World。我们只需要X和Z分量来驱动波动，所以后面连接一个Split节点将其分开。
2. 引入时间：添加一个Time节点，它提供了自游戏开始以来的时间值。
3. 构建波动UV：将世界XZ坐标分别乘以一个系数（我们将其定义为属性，叫Wave Scale），然后加上时间乘以另一个系数（Wave Speed）。这步操作相当于创建了一组随着空间和时间变化的UV坐标。
   • 公式可以理解为：UV = (WorldPos.xz * WaveScale) + (Time * WaveSpeed)
4. 应用正弦函数：将上一步得到的某个方向（比如X方向）的UV值，输入到一个Sine节点中。Sine节点的输出范围是[-1, 1]。
5. 控制波动幅度：将Sine的输出乘以一个属性Wave Amplitude，得到最终的Y轴高度偏移量。
6. 影响顶点：将这个高度偏移量，与原始世界坐标的Y分量相加，然后通过一个Combine节点与未变动的XZ分量重新组合成新的世界坐标。但是，直接修改世界坐标并输出给Master Node是不常规的。更标准的做法是，我们通过修改顶点法线来“欺骗”光照和反射计算，让平面“看起来”在波动，而不是真的移动顶点（除非你需要精确的物理交互）。对于简单水面，修改法线通常就够了。

4.2 叠加噪声实现自然波纹

单一频率的正弦波看起来非常人工化。真实的水面波纹是多种频率叠加的。我们可以引入噪声（Noise）来打破这种规律性。

1. 添加梯度噪声：在Blackboard上创建一个Sample Gradient Noise节点。噪声节点需要UV输入，我们可以直接使用上一步处理过的世界XZ坐标（乘以另一个较小的Noise Scale属性）作为UV。
2. 噪声与正弦波混合：将噪声的输出（范围通常在[0,1]或[-1,1]）与正弦波的输出通过一个Add或Multiply节点混合。Add会让波形更复杂，Multiply会让噪声成为正弦波的振幅调制器，产生更自然的变化。你可以尝试两种方式，看看哪种效果更符合你的预期。
3. 计算波动后的法线：这才是关键步骤。我们波动的高度最终会体现在法线上。我们可以利用Shader Graph自带的DDX和DDY节点来近似计算高度场（即我们计算出的Y偏移）在屏幕空间X和Y方向的变化率，然后用这两个变化率来构造一个切向量和副切向量，进而通过叉积得到新的法线向量。更简单的方法是使用一个Normal From Height节点（如果Shader Graph版本支持），或者自己用DDX和DDY构建。
   • 手动计算法线原理：float3 worldNormal = normalize(float3(-ddy(height), 1.0, -ddx(height)));这里ddx和ddy是获取相邻像素的高度差。这个公式基于一个近似：高度场在X方向的变化主要影响法线的Z分量，在Z方向的变化主要影响法线的X分量。

实操心得：波动参数调节是个艺术活。Wave Scale控制波纹的密度，值越小波纹越大越稀疏，值越大波纹越小越密集。Wave Speed不宜过快，否则会显得不自然。Wave Amplitude决定了波纹的陡峭程度。我通常的做法是创建两到三组不同频率和速度的正弦波，用不同的Scale和Speed，然后叠加在一起，这样得到的水面动态会丰富很多。噪声的Scale通常要设得比主波纹的Scale大很多，让它产生一些低频的、缓慢的基底起伏。

5. 模拟折射效果：让水面“透”过去

折射效果能让玩家感觉到水的存在和深度。在实时渲染中，我们常用一种叫做“屏幕空间折射”的技巧。

5.1 理解屏幕空间折射原理

我们并不真正去计算光线的物理偏折。思路是：假设水面是一层扭曲的玻璃，我们透过它去看它后面的东西（即场景中位于水面之后的像素）。在Shader中，我们可以获取到当前像素所对应的屏幕后缓冲区的颜色（即不绘制水面时该位置的场景颜色），然后根据水面法线，对这个颜色的采样坐标进行一个微小的偏移，从而产生扭曲感。

在URP Shader Graph中，我们可以通过Scene Color节点来获取屏幕后缓冲区的颜色。这个节点需要屏幕空间UV坐标作为输入。

5.2 在Shader Graph中实现折射扭曲

1. 获取屏幕UV：添加一个Screen Position节点，将其模式设置为Default，这会输出一个范围在[0,1]之间的屏幕空间UV坐标。
2. 用法线扰动UV：使用我们之前计算出的波动后法线。由于法线是三维向量，而UV是二维的，我们通常取法线的X和Z分量（或者根据效果需要调整）来对屏幕UV进行偏移。
   • 创建一个Normalize节点确保法线长度为单位1。
   • 使用一个Split节点分离出法线的X和Z分量。
   • 将X和Z分量分别乘以一个很小的系数（如0.01到0.05），这个系数我们定义为Refraction Strength属性。这个值控制扭曲的强度，太大看起来会像哈哈镜，太小则没有效果。
   • 将计算出的偏移量（float2(offsetX, offsetZ)）与屏幕UV相加，得到扰动后的UV。
3. 采样场景颜色：将扰动后的UV输入到Scene Color节点。Scene Color节点会返回在扰动后的屏幕位置处，场景本身的颜色。这就是我们模拟的折射颜色。
4. 处理边缘问题：这里有一个常见的坑。当扰动后的UV坐标超出屏幕范围（比如小于0或大于1）时，Scene Color可能会采样到黑边或者无效数据。一个简单的处理方法是使用Clamp节点将UV限制在[0,1]范围内，但这在屏幕边缘会产生不自然的“吸附”效果。更好的做法是，在Blackboard上定义一个Refraction Color属性，当采样越界时，用这个颜色进行混合或替代，模拟深水区的颜色。

注意事项：Scene Color节点的使用是有性能开销的，因为它通常意味着需要一次额外的全屏纹理采样（对应着Grab Pass）。在移动平台上，尤其是低端设备上，需要谨慎使用。对于性能敏感的项目，可以考虑用一张预设的、代表水下环境的静态纹理来替代，虽然动态感会下降，但性能更好。另外，折射效果的真实感高度依赖于场景本身的复杂度和颜色，在空旷或纯色背景下，折射效果可能不明显。

6. 实现反射与高光：捕捉天光与环境

水面不仅透明，还会反射周围的世界。我们将结合环境反射和镜面高光来模拟这一点。

6.1 利用反射探针捕捉环境

Unity提供了反射探针（Reflection Probe）来捕获场景的环境信息，并生成一个立方体贴图（Cubemap）。我们的水面Shader可以采样这个贴图来获得环境反射颜色。

1. 采样环境立方体贴图：在Shader Graph中添加一个Sample Cubemap节点。你需要将一个Cubemap资源拖到它的Cube输入端口。更动态的做法是使用Scene Sampling类别下的Reflection Probe节点，它会自动使用当前影响水面的反射探针数据。
2. 计算反射方向：反射方向需要根据视角方向和法线来计算。Shader Graph提供了Reflection Vector节点，它需要View Direction（视角方向）和Normal（法线）作为输入。
   • View Direction节点：添加一个View Direction节点，Space设置为World。
   • Normal：使用我们之前计算出的波动后法线。
3. 连接并采样：将计算出的反射向量输入到Sample Cubemap或Reflection Probe节点的Vector输入端口，即可得到该方向的反射颜色。

6.2 添加镜面高光（Specular）细节

即使有环境反射，水面在直接光源（如太阳）照射下，还会产生明亮的、集中的高光点。我们可以用Blinn-Phong模型来模拟。

1. 计算半角向量：Blinn-Phong模型的关键是半角向量（Half Vector），即视角方向（V）和光源方向（L）的中间向量。H = normalize(V + L)。在Shader Graph中，我们可以用Add和Normalize节点来计算。
2. 获取光源方向：添加一个Main Light Direction节点（在URP中），它可以提供场景主光源（通常是方向光）的世界空间方向。
3. 计算高光强度：高光强度 =pow(max(0, dot(N, H)), Gloss)。这里N是法线，dot(N, H)是法线与半角向量的点积，Gloss是高光指数，控制高光的集中程度（值越大，高光点越小越亮）。我们可以用Power节点来实现pow运算。
4. 合成高光颜色：将计算出的高光强度乘以一个Specular Color属性（通常设为白色或光源颜色），再乘以一个Specular Intensity属性来控制强度。

实操心得：反射探针的更新频率和分辨率对效果和性能影响很大。对于静态场景，使用烘焙（Baked）的反射探针即可。对于动态场景，可能需要设置为实时（Realtime）更新，但要注意性能。高光部分，Gloss值我一般设置在100到500之间，具体看水面的粗糙程度。平静的湖面可以用更高的值（如300以上），而有风浪的海面则用较低的值（如100左右）。另外，不要忘记将高光颜色与之前采样的环境反射颜色相加（Add），因为高光是额外的亮度贡献。

7. 融合与调色：菲涅尔效应与最终合成

现在我们有折射颜色、反射颜色（含高光）和一个基础水色。如何将它们自然地混合在一起？这就需要菲涅尔效应来控制。

7.1 菲涅尔效应的原理与计算

菲涅尔效应描述了光线在介质交界处，反射比例随入射角变化的规律。在Shader中，我们用一个简化的近似公式来计算菲涅尔系数F：F = F0 + (1 - F0) * pow(1 - dot(V, N), 5)其中：

• F0是法线入射（垂直看向水面）时的基础反射率。对于水，这个值很小（约0.02）。
• V是视角方向。
• N是表面法线。
• dot(V, N)是视角与法线的点积。当垂直看向水面时（V与N平行），点积接近1，(1-dot(V,N))接近0，所以F接近F0（反射弱，折射强）。当掠射看向水面时（V与N垂直），点积接近0，(1-dot(V,N))接近1，所以F接近1（反射强，折射弱）。

在Shader Graph中，我们可以用Fresnel Effect节点来方便地计算这个值。它通常有Power（对应公式中的指数5）和Bias（可以理解为F0）两个参数。

7.2 最终颜色混合与输出

1. 计算菲涅尔系数：添加Fresnel Effect节点，输入Normal（波动法线）和View Direction。调整Power和Bias参数。对于水，Bias可以设得很低（如0.02），Power在3到8之间调节，控制菲涅尔过渡的锐利程度。
2. 线性插值（Lerp）混合：菲涅尔系数F是一个在[0,1]之间的值，完美的混合权重。
   • 第一次Lerp（折射 vs 基础色）：用F作为权重，在折射颜色和基础水色之间插值。当F小（垂直看）时，折射色权重大；F大（掠射看）时，基础水色权重大。这模拟了垂直看水更透明，掠射看水更不透明（显出本身颜色）。
   • 第二次Lerp（加入反射）：将上一步的结果与反射颜色（含高光）再进行一次插值。但这次，我们可以直接用F作为反射颜色的叠加系数。因为菲涅尔效应直接决定了反射的强度。更常见的做法是：最终颜色 = 折射与基础色的混合结果 + 反射颜色 * F。这里用加法，因为反射是额外的亮度贡献。
3. 透明度控制：水面的透明度也应该随视角变化。通常，透明度可以与菲涅尔系数F反向关联，或者用一个独立的属性控制。将计算好的透明度值连接到Master Node的Alpha端口。
4. 输出法线：将我们计算出的波动后法线，连接到Master Node的Normal端口（如果你的Master Node是PBR类型，且有Normal输入）。这会影响引擎后续的光照计算，让水面与其他物体的交互光照更准确。

注意事项：颜色混合是艺术性很强的一步。基础水色通常是一个偏蓝或偏绿的深色。直接使用Scene Color作为折射色有时会显得太“干”，缺乏水下感。一个技巧是将Scene Color与一个淡淡的水下色调（如蓝绿色）进行Multiply混合。反射颜色也常常需要乘以一个灰度系数来降低其饱和度，使其更融入环境。多参考真实照片或优秀的游戏截图进行调色。

8. 参数调节心得与性能优化指南

Shader写好了，但看起来可能还是有点“假”。别急，最后的调节阶段才是点睛之笔。这里分享一些我的参数调节清单和性能考量。

8.1 关键参数调节清单与视觉目标

把Blackboard上暴露的属性整理一下，这里是一个典型的调节清单和它们影响的视觉目标：

调节时，遵循“从大到小”的原则：先调波动，让动态感觉对；再调菲涅尔和基础色，确定大关系；最后微调折射强度和反射高光，增加细节。

8.2 针对移动平台与性能的优化策略

一个好看的Shader如果跑不动，等于零。对于水面这种全屏或大范围效果，性能尤为重要。

1. 简化计算：

   • 波动计算：检查你的波动公式。如果用了多组（如3组）正弦波叠加，可以考虑在移动平台减少到1-2组。噪声计算（尤其是复杂的Perlin噪声）开销较大，可以尝试用更简单的Simple Noise或Gradient Noise，甚至用一张低频率的噪声贴图（Texture）配合UV动画来替代实时噪声计算。
   • 反射采样：避免使用实时更新的反射探针。尽量使用烘焙（Baked）的立方体贴图。如果场景是静态的，一个全局的烘焙探针就足够了。
   • 折射采样：Scene Color（Grab Pass）是性能大户。如果不需要精确的动态折射，可以考虑用一张模糊的、代表水下颜色的静态纹理来代替，或者只对靠近摄像头的部分水面启用折射。

2. 精度优化：

   • 在Shader Graph的节点设置或Master Node的Precision选项中，将精度从Float改为Half。对于颜色和大部分计算，Half精度（16位浮点数）在移动GPU上更快，且视觉质量损失通常可接受。

3. 渲染状态优化：

   • 深度写入（ZWrite）：对于透明水面，通常设置为Off，但这可能导致透明排序问题（水面与水下物体交错闪烁）。一个折中方案是：将不透明物体的渲染队列（Queue）设为Geometry，将水面的渲染队列设为Transparent（值更大），并确保水面材质在所有不透明物体之后渲染。对于复杂情况，可能需要更细致的深度测试（ZTest）设置。
   • 渲染队列（Queue）：确保你的水面Shader在正确的队列中。透明物体（Transparent）应在所有不透明物体（Geometry）之后渲染。

4. LOD（细节层次）：

   • 为水面材质制作多个不同复杂度的Shader变体（或使用Shader的LOD功能）。当摄像机远离时，自动切换到更简单的版本（例如，去掉折射、简化波动计算）。

调试性能可以使用Unity的Frame Debugger和Profiler，重点关注SetPass Calls和GPU耗时。确保你的水面Shader不会成为瓶颈。

9. 常见问题排查与进阶技巧

即使按照步骤操作，你也可能会遇到一些奇怪的问题。这里记录了几个我踩过的坑和对应的解决方法。

9.1 常见渲染问题速查表

9.2 从“简单”到“出色”的进阶技巧

掌握了基础之后，你可以尝试加入以下效果，让水面质感更上一层楼：

1. 边缘泡沫：在水面与岸边（或其他物体）交界处，通常会有白色的泡沫。可以通过一张泡沫噪声贴图，根据深度差（水面与水下场景的深度差）来混合实现。使用Depth节点获取场景深度，与水面自身的深度进行比较，在差值大的地方（即浅水或岸边）显示泡沫贴图。
2. 焦散（Caustics）：阳光透过波动的水面，在水底投射出动态的光斑，这就是焦散。可以用一张动态的、扭曲的焦散贴图，投影到水下的物体表面上。实现起来需要额外的Pass或渲染到纹理（Render Texture）的技术。
3. 深度色散：靠近岸边的浅水区域颜色更浅，更透明；深处的海水颜色更深。可以通过采样场景深度，用Smoothstep函数根据深度值来混合两种不同的水色。
4. 法线贴图细节：除了程序化生成的法线，还可以叠加一张细节法线贴图（Detail Normal Map），用于模拟水面微小的涟漪或细节纹理，让近处观察时细节更丰富。

实现这些效果需要更深入的Shader知识和更多的渲染指令。我的建议是，先把本文这个基础水面的每一个节点、每一个参数都彻底弄懂，做到能随心所欲地调出你想要的感觉。之后，再以这个Shader为基底，像搭积木一样，把边缘泡沫、深度色散这些功能一个个作为独立的模块加进去，每加一个都充分测试和优化。这样，你就能逐步构建出属于自己的、适用于特定项目需求的强大水面Shader了。