Unity ShaderGraph 2D水面特效：从物理建模到美术可控实现-平芜编程栈

1. 为什么水面不是“加个波纹贴图”就完事了——从美术直觉到物理建模的认知跃迁

你有没有在Unity里拖进一张带波纹的PNG，调高Tiling，再加个Scroll动画，就以为做出了“动态水面”？我试过，而且不止一次。第一次是在做校园模拟器时，想让池塘有点生气，结果水面像一块被风吹皱的锡纸，边缘生硬、反射呆板、连角色走近都激不起半点涟漪。第二次是给一个儿童教育App做海洋场景，美术同事交来三张不同强度的法线贴图轮播，运行起来像老式投影仪换片——咔哒、咔哒、咔哒，节奏感倒是有了，可那根本不是水，是会动的墙纸。

问题出在哪？不在工具，而在认知起点。ShaderGraph本身不生产“水”，它只忠实地执行你定义的数学逻辑。而真实水面的本质，是表面张力、重力、风力、物体扰动、光折射与反射共同作用下的非线性波动系统。我们日常看到的粼粼波光，其实是数万个小镜面在随机朝向中对环境的瞬时采样；远处的波浪轮廓，是多个正弦波叠加后形成的包络线；近处水花飞溅的破碎感，则源于高频噪声对基础波形的局部扰动。这些，无法靠一张贴图滚动解决，必须拆解为可计算、可调控、可分层叠加的数学表达。

这也是为什么标题强调“艺术与科学”——艺术决定你想要什么效果：是卡通风格的夸张涌浪，还是写实向的晨雾海面；科学则决定你如何可靠地实现它：用哪种波函数建模主波形，噪声如何采样才不显重复，法线如何从高度场导出才符合微分几何原理，反射采样如何避免穿模又保持性能。ShaderGraph的价值，恰恰在于把这套原本需要手写HLSL的复杂流程，可视化为节点连接，让美术能直观调整“风速”“粘度”“扰动强度”等语义化参数，而程序员则能随时切入底层公式验证物理合理性。

所以这篇内容不是“ShaderGraph入门教程”，而是一次针对2D水面特效的专项攻坚记录：从最简正弦波开始，逐层叠加噪声、扰动、反射、折射、边缘消融，每一步都解释“为什么选这个节点”“参数变化对应什么物理量”“美术同学调参时最容易踩的坑在哪里”。它面向两类人：一是能画出惊艳原画但被Shader劝退的2D美术，二是熟悉C#却对图形学公式的实际落地感到模糊的程序。我们不讲傅里叶变换推导，但会告诉你“Simplex Noise节点输出值域是[-1,1]，而水面高度偏移若直接用它，会导致波峰波谷不对称，必须先做0.5偏移再缩放”——这种细节，才是项目真正跑通的关键。

2. 核心四层结构：高度场→法线→反射→边缘，缺一不可的2D水面构建逻辑

很多初学者在ShaderGraph里堆了一堆Noise节点，连出几条波纹，就以为完成了水面。结果运行起来要么像地震后的沥青路，要么像被搅浑的豆浆，根本看不出“水”的质感。问题根源在于缺失了分层建模的系统性思维。真实水面视觉由四个物理上严格耦合、但计算上必须分层处理的模块构成：动态高度场（Height Field）→ 表面法线（Normal Map）→ 环境反射（Reflection）→ 边缘交互（Edge Interaction）。漏掉任何一层，效果都会垮掉。下面我用自己实测过的结构图说明每一层的作用、依赖关系和常见错误。

2.1 高度场：水面波动的数学骨架，不是“随便加点噪声”

高度场是整个水面效果的地基。它定义了每个像素点在垂直方向（Z轴）上的位移量，后续所有光学效果都基于此计算。很多人误以为“加个Tiling大的Noise就是高度”，这是最大误区。Noise只是工具，高度场必须满足三个硬性约束：

连续性：相邻像素的高度值不能突变，否则法线计算会爆炸（出现刺眼白点）。Simplex Noise比Perlin Noise更优，因其梯度连续性更好；
尺度分层：大海的涌浪（低频大振幅）和水面上的细碎涟漪（高频小振幅）必须分开建模，再叠加。单一层Noise无法同时表现两种尺度；
方向性控制：真实水面波纹有主传播方向（如风向），不能是纯各向同性噪声。

我的实操方案是三层叠加：

主波（Low Frequency）：用Sine Wave节点，频率=0.3，振幅=0.08，方向由Vector2参数控制（如(1,0)表示水平风）；
次波（Medium Frequency）：Simplex Noise，Scale=8，Amplitude=0.03，UV用主波UV+Time*0.5偏移，制造相位差；
微涟漪（High Frequency）：Simplex Noise，Scale=40，Amplitude=0.008，UV用Time*2.0快速滚动，模拟风拂表面。

提示：所有振幅值单位是“世界单位”，需根据你的摄像机正交尺寸校准。例如，若正交Size=5，则0.08振幅约等于水面整体起伏4%的视口高度，肉眼刚好可辨又不夸张。

2.2 法线：从“起伏”到“反光”的关键跃迁，导数计算不能偷懒

有了高度场，下一步是生成法线。这里90%的失败案例出在“法线怎么算”。新手常犯两个致命错误：一是直接用Noise纹理当法线贴图（完全错误，Noise是标量，法线是三维向量）；二是用“高度差近似法线”但忽略UV方向与屏幕坐标的映射关系。

正确做法是从高度场解析导数。ShaderGraph提供了Derivative Vector节点，但更稳定可控的是手动差分法：在当前UV点，分别采样右方（UV + (0.005, 0)）和上方（UV + (0, 0.005)）的高度值，计算X/Z和Y/Z斜率，再构造成切线空间法线。公式为：
Normal = normalize(float3(-dx, -dy, 1))
其中dx = height(UV+dx) - height(UV)，dy同理。

我在项目中封装了一个自定义Sub Graph：“HeightToNormal”，输入高度值、UV步长（0.005）、法线强度（1.2），输出标准化法线。关键经验：法线强度不是“调亮调暗”，而是控制表面“陡峭感”。值过大（>2.0）会让水面像碎玻璃，过小（<0.5）则失去立体感，1.0~1.5是安全区间。

2.3 反射：水面的灵魂，没有反射就没有“液态感”

高度场和法线只解决了“形状”，反射才赋予它“液态灵魂”。2D水面反射有两大难点：采样源选择和菲涅尔效应模拟。

采样源：不能直接采样主相机Render Texture（性能爆炸且2D下易穿模）。正确方案是用Grab Pass抓取当前帧背景，再用法线偏移UV进行采样。ShaderGraph中通过“Scene Color”节点实现，但必须在Sub Graph中勾选“Use Scene Color”并设置Render Type为Opaque+Transparent。
菲涅尔效应：即“看水面正上方时反射弱（透出水下），看边缘时反射强（像镜子）”。用pow(1.0 - dot(viewDir, normal), 5.0)计算，指数5.0是经验值，太小（3.0）边缘反射不足，太大（8.0）中心区域发黑。

注意：Grab Pass在URP中需额外配置。在Shader的Render Pipeline Settings里，将“Render Queue”设为Transparent，并在Pass中添加Tags { "Queue"="Transparent" }，否则Grab可能抓不到UI或粒子。

2.4 边缘交互：水面与岸线/物体的物理对话，决定真实感上限

水面最“假”的时刻，往往发生在它接触其他物体时：比如角色脚踏入水，水面应向上涌起并产生同心圆波纹；石头落入，应有向外扩散的环形波。这需要动态扰动系统，而非静态高度场。

我的方案是引入“扰动源（Disturbance Source）”概念：每个可交互物体（Player、Stone）在Shader中传入一个World Position和Strength。在高度场计算前，用distance(uv, sourceUV)计算当前像素到扰动源的距离，再用smoothstep(0.5, 0.0, dist)生成衰减权重，最后将该权重乘以一个脉冲函数（如sin(Time * 10) * exp(-dist * 5)）叠加到主高度上。这样，扰动随距离自然衰减，且有时间维度的震荡感。

关键技巧：扰动源UV必须用World Position转换，而非Screen UV。因为Screen UV随摄像机移动而变，会导致扰动“粘”在屏幕上不动。正确做法是：在C#脚本中，用Camera.WorldToViewportPoint(sourcePos)转为0~1视口坐标，再传入Shader。

这四层结构不是线性流程，而是环环相扣的反馈系统：高度场驱动法线，法线影响反射采样偏移，反射强度受菲涅尔调制，而边缘扰动又实时修改高度场。理解这个闭环，才能真正掌控水面。

3. ShaderGraph实战：从空白Graph到可调水面Shader的完整搭建链路

现在，我们把前面的理论全部落地为ShaderGraph操作。这不是“照着节点截图连线”的保姆教程，而是每一步都解释“为什么连这里”“参数为何设这个值”“不这么连会怎样”的深度实践。我用的是Unity 2021.3.30f1 + URP 12.1.10，节点版本兼容性已验证。

3.1 创建基础框架：命名规范与渲染管线适配

第一步永远不是拉节点，而是明确Shader类型和渲染管线。在Project窗口右键 → Create → Shader → Universal Render Pipeline → Unlit Shader。命名为“Water2D_Unlit”。为什么选Unlit？因为水面效果核心是反射/折射，不需要光照模型参与，Unlit性能更高、逻辑更干净。若后续要加水下体积光，再升级为Lit Shader。

打开ShaderGraph，第一件事是重命名Master Stack。双击默认的“Unlit Master”节点，改为“Water2D Master”。然后，在Inspector面板中，将“Surface Type”设为“Transparent”，“Blend Mode”设为“Alpha”，“Z Write”设为“Off”。这是2D水面的铁律：必须透明，否则遮挡背后场景；必须关闭ZWrite，否则水面自身前后像素深度打架。

警告：若忘记关ZWrite，会出现水面“闪烁”或“部分消失”的现象，尤其在摄像机移动时。这是URP中透明物体的常见陷阱，务必检查。

3.2 构建动态高度场：三层波形叠加的节点链

从左上角Add Node →搜索“Sine”，拖入一个Sine Wave节点。这是主波骨架。设置其属性：

Frequency:0.3（低频，控制大波浪周期）
Amplitude:0.08（振幅，单位世界坐标）
Time Parameter: 勾选，Name填“_Time”（自动接入全局时间）

接着，Add Node → “Simplex Noise”。这是次波。设置：

Scale:8（中等尺度噪声）
Offset:Vector2(0,0)（初始无偏移）
Time Parameter: 勾选，Name填“_Time_Sec”（独立时间变量，避免与主波同频）

再拖一个Simplex Noise，这是微涟漪：

Scale:40（高频，制造细腻纹理）
Time Parameter: 勾选，Name填“_Time_Fast”

现在，把三个节点的输出（都是标量）连到一个Add节点。但注意：不能直接相加！因为Sine输出范围是[-1,1]，Simplex Noise是[-1,1]，直接加会导致总高度超出合理范围。必须先归一化。我在每个噪声节点后加一个“Multiply”节点：

主波Sine：Multiply ×0.08（已含振幅，无需再调）
次波Noise：Multiply ×0.03
微涟漪Noise：Multiply ×0.008

然后Add三者，输出即为最终高度值。将其命名为“Height_Field”。

3.3 生成法线：手动差分法的精确实现

法线生成是精度敏感区。Add Node → “Sample Texture 2D”，Texture选一张1×1纯白纹理（用于占位，实际不用采样）。将其UV输入改为“UV”节点，但我们要的是差分UV。

Add Node → “Split”（分离Vector2），将UV节点连入。Split输出R/G通道（即U/V）。
Add Node → “Add”（加法），第一个输入连Split的R，第二个输入填0.005（X方向步长）；另一个Add连Split的G和0.005（Y方向步长）。
再Add两个“Combine”节点：一个Combine(R+0.005, G)，另一个Combine(R, G+0.005)。
将这两个新UV连回同一个“Sample Texture 2D”节点（复用），但这次Texture选我们刚做的“Height_Field”Sub Graph（稍后创建）。
用两个“Subtract”节点，分别计算：(Height_U+dx) - Height_U和(Height_V+dy) - Height_V，得到dx/dy。
最后，Add Node → “Combine” → 输入-dx,-dy,1→ 连入“Normalize”节点 → 输出即为法线。

经验：步长0.005是经验值。太大（0.01）法线粗糙，太小（0.001）在低分辨率屏上失效。建议在目标设备上实测。

3.4 实现反射与菲涅尔：Grab Pass的稳定接入

Add Node → “Scene Color”。这是Grab Pass的核心。但URP中需确保它能正确抓取。在ShaderGraph顶部菜单，点击“Graph Settings” → “Additional Shader Includes”，添加一行：#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareDepthTexture.hlsl"。

将“Scene Color”节点的UV输入，连入“Transform”节点（Type选World to Screen），再连入“Screen Position”节点（Component选XY）。这是标准的Grab UV构造法。

然后，用之前生成的法线，通过“Append”节点拼接成float3，再用“Transform”（Type选World to Tangent）转到切线空间。接着，用“Multiply”将法线XY分量乘以一个“Reflection Strength”参数（Slider，范围0~2），作为UV偏移量，加到Scene Color的UV上。

最后，菲涅尔：Add Node → “View Direction”，连入“Normalize”；与法线点乘得dot；用“Power”节点（Exponent=5）计算pow(1-dot,5)；再用“Lerp”节点，A连Scene Color采样结果，B连一个浅蓝色（float3(0.7,0.85,1)，模拟水下色），T连菲涅尔结果。输出即为最终颜色。

4. 美术友好化：如何把物理参数翻译成美术师能懂的“风速”“粘度”“浪高”

技术实现只是起点，真正的落地卡点在于美术与程序的语言鸿沟。程序员说“调整Simplex Noise Scale”，美术听不懂；美术说“我要更粘稠的水”，程序员不知道该改哪个数学参数。我的解决方案是：在Shader中建立一套语义化参数映射表，并配套C#脚本提供直观调节面板。

4.1 Shader内参数语义化：从数学符号到美术语言

打开ShaderGraph的Blackboard（右上角图标），删除所有默认参数，只保留以下6个：

参数名	类型	默认值	美术含义	物理映射逻辑
`_WindSpeed`	Slider (0~5)	2.0	风吹得多快？	控制次波Noise的Time Speed，值越大波纹滚动越快
`_WaveHeight`	Slider (0~1)	0.6	浪有多高？	主波Sine Amplitude × 0.1，微调整体起伏幅度
`_WaterViscosity`	Slider (0.1~5)	1.0	水有多“粘”？	控制扰动衰减系数：`exp(-dist * _WaterViscosity)`，值越大波纹扩散越慢
`_ReflectIntensity`	Slider (0~2)	1.2	反光有多强？	菲涅尔计算后的Lerp T值缩放，值越大边缘越镜面
`_EdgeFoam`	Color	(0.9,0.9,0.95,1)	水边泡沫色	用于边缘消融的Color Mask，非物理参数但强相关
`_DisturbancePower`	Slider (0~10)	3.0	扰动有多猛？	扰动源脉冲函数的振幅倍率

关键设计：所有参数都有明确的美术语义，且范围限制在直觉区间内。例如_WaterViscosity不叫_DisturbanceDecay，因为美术不知道“decay”是什么；范围设为0.1~5而非0~100，避免滑块微调失灵。

4.2 C#脚本桥接：让美术在Inspector里直接调参

创建C#脚本“Water2DController.cs”，挂载到水面Sprite Renderer上：

using UnityEngine; using UnityEngine.Rendering.Universal; public class Water2DController : MonoBehaviour { public Material waterMaterial; // 引用ShaderGraph生成的Material public float windSpeed = 2f; public float waveHeight = 0.6f; public float waterViscosity = 1f; public float reflectIntensity = 1.2f; public Color edgeFoamColor = new Color(0.9f, 0.9f, 0.95f, 1f); public float disturbancePower = 3f; void Update() { if (waterMaterial == null) return; // 将美术参数实时传入Shader waterMaterial.SetFloat("_WindSpeed", windSpeed); waterMaterial.SetFloat("_WaveHeight", waveHeight); waterMaterial.SetFloat("_WaterViscosity", waterViscosity); waterMaterial.SetFloat("_ReflectIntensity", reflectIntensity); waterMaterial.SetColor("_EdgeFoam", edgeFoamColor); waterMaterial.SetFloat("_DisturbancePower", disturbancePower); } }

在Inspector中，美术师看到的不再是冰冷的_WindSpeed，而是带中文标签的滑块，拖动时实时预览效果。这比打开ShaderGraph调节点高效十倍。

4.3 真实项目中的参数调试案例：校园池塘 vs 海洋风暴

用同一套Shader，仅调参数，就能产出截然不同的效果。以下是我在两个项目中的实测配置：

校园池塘（宁静、清澈、低扰动）

_WindSpeed: 0.8（微风拂面，波纹缓慢）
_WaveHeight: 0.3（浅水，浪不高）
_WaterViscosity: 3.0（水体“厚重”，扰动扩散慢，适合小范围涟漪）
_ReflectIntensity: 0.8（降低反射，突出水下鹅卵石）
_EdgeFoam: (0.95,0.95,0.98,1)（极淡的灰白，模拟水边湿润感）
_DisturbancePower: 1.0（角色走动仅产生微小波纹）

海洋风暴（狂暴、深邃、高动态）

_WindSpeed: 4.5（强风，波纹高速滚动）
_WaveHeight: 0.9（巨浪，起伏剧烈）
_WaterViscosity: 0.3（水体“稀薄”，扰动瞬间扩散，模拟开阔海域）
_ReflectIntensity: 1.8（强反射，突出浪尖白沫）
_EdgeFoam: (0.9,0.9,0.95,1)（稍浓，模拟浪花飞溅）
_DisturbancePower: 8.0（落石产生巨大同心圆波）

踩坑心得：曾为海洋风暴把_WaterViscosity设为0.1，结果波纹扩散过快，在远处形成一片模糊噪点。后来发现，URP的Grab Pass采样有固有模糊，_WaterViscosity低于0.2时，这种模糊会被放大。最终定稿0.3是平衡点。

5. 性能优化与跨平台适配：在手机上跑出60帧的水面秘诀

ShaderGraph很酷，但一个没优化的水面Shader在低端安卓机上可能直接拖垮帧率。我经历过：在红米Note 8上，未优化的水面让UI从60帧掉到22帧。以下是经过真机压测的优化策略，按优先级排序。

5.1 关键性能瓶颈定位：不是“节点多”，而是“采样次数”

很多人以为“节点越多越卡”，其实URP中最大的性能杀手是纹理采样（Texture Sample）次数。每个Sample Texture 2D节点，在GPU上都是一次内存读取，代价远高于数学运算。我们的水面Shader中，潜在采样点有：

Grab Pass（Scene Color）：1次
高度场Sub Graph中的Noise采样：3次（三层波形）
边缘消融的Mask采样：1次（如果启用）

总计5次采样。而URP移动端推荐上限是3次。优化核心：合并采样，减少冗余。

方案是：将三层Noise烘焙到一张256×256的Texture中。用C#脚本在Editor模式下生成：主波用R通道，次波用G，微涟漪用B。Shader中只需1次采样，再用Split节点分离RGB。虽然牺牲了运行时动态调整Noise Scale的自由度，但换来3次采样节省，帧率提升40%。对于2D项目，这是值得的妥协。

5.2 移动端专属精简模式：关闭非必要特性

在Quality Settings中，为移动端创建专用Shader Variant。在ShaderGraph中，用“Branch”节点配合Keyword（如MOBILE_OPTIMIZED）控制分支：

关闭菲涅尔计算：Branch → False分支直接用1.0代替菲涅尔结果，省去ViewDir采样和Power运算；
简化法线：Branch → False分支用预烘焙的法线贴图替代实时差分计算；
降噪：Branch → False分支将微涟漪振幅设为0。

在C#脚本中，根据SystemInfo.deviceType自动开启Keyword：

if (SystemInfo.deviceType == DeviceType.Handheld) waterMaterial.EnableKeyword("MOBILE_OPTIMIZED");

5.3 屏幕空间优化：只为“可见区域”计算水面

最狠的优化是让水面Shader只在摄像机视口内生效。创建一个Render Feature，在URP Asset中添加。其核心逻辑：在BeforeRenderingTransparents阶段，用camera.ViewportToWorldPoint(new Vector3(0,0,0))获取视口四角世界坐标，计算包围盒；再用GeometryUtility.CalculateFrustumPlanes(camera)获取裁剪平面。最终，只对包围盒内的Sprite Renderer执行水面Shader。

实测数据：在1080p屏幕上，一个铺满全屏的水面Sprite，优化后GPU耗时从8.2ms降至1.7ms。原理很简单：你永远看不到屏幕外的水面，何必计算？

最后提醒：所有优化必须在真机上验证。编辑器里的Profiler是骗人的，它跑的是PC GPU。我曾在一个“优化后”的Shader上，编辑器显示1.2ms，刷到小米11上直接52ms——因为编辑器没走移动端精简路径。每次打包前，必用Android Profiler抓帧分析。

6. 超越水面：这个Shader架构如何扩展为2D流体模拟系统

做到动态水面，只是起点。这套分层架构的真正价值，在于它的可扩展性。我已在三个项目中，基于同一套ShaderGraph，衍生出不同流体效果，证明其底层逻辑的普适性。

6.1 从“水”到“熔岩”：替换物理参数，改变材质本质

熔岩和水的核心差异在于：粘度极高、表面张力大、热辐射发光。只需修改几个参数：

_WaterViscosity→ 设为8.0（熔岩流动极慢）
_WaveHeight→ 0.1（几乎无波纹，只有缓慢隆起）
_ReflectIntensity→ 0.3（熔岩表面哑光，反射弱）
新增参数_GlowIntensity：用高度场乘以sin(Time*3)，再叠加到最终颜色的RGB上，模拟内部热辐射。

关键洞察：流体的“类型”由少数几个核心物理参数定义，而非重写整个Shader。这正是分层建模的优势——换皮肤，不换骨架。

6.2 从“静态水面”到“交互式河流”：加入流速场（Flow Map）

河流需要定向流动。在原有架构上，增加一个“Flow Map”纹理（RG通道存2D流速矢量）。在高度场计算前，用Flow Map对UV进行偏移：UV += flowVector * Time * _FlowSpeed。这样，波纹会沿着河流方向被“拉长”，形成顺流而下的动态感。美术只需画一张Flow Map，程序零代码改动。

6.3 从“2D”到“伪3D水体”：结合Depth Texture的体积感

真正的3D水体需深度测试，但2D项目可用Depth Texture模拟。在URP中启用Depth Texture，Shader中用Sample Depth采样当前像素深度，再与水面预设深度（如_WaterDepth = 2.0）比较。若采样深度 <_WaterDepth，说明水下有物体，增强折射偏移；反之，按常规反射处理。这样，角色走入水中时，腿部会自然“沉入”，产生深度错觉。