很多人第一次尝试复刻《塞尔达传说风之杖》这类水面时最容易犯的错误是打开一个标准 PBR 材质把 Metallic 调到 0Smoothness 拉高然后铺一层蓝色贴图就结束。结果出来的不是清新明快的卡通海面而是一片油腻腻的塑料水。问题出在思路这类低多边形卡通水面根本不该用“物理真实”来理解它更像是把流体模拟的结果“翻译”成动画语言。这篇文章要做的就是拆解这种“动画语言”在 Unity Shader Graph 里怎么落地。我会从风之杖海面视觉特征入手拆出它真正起作用的三层结构再带你在 URP 项目里从零搭一个 Shader Graph 水面 Shader覆盖颜色分层、程序化波纹、风格化高光、顶点波浪和 C# 动态控制最后给出一份实际项目中踩过的坑和性能优化建议。如果你正在学图形学、想做卡通渲染NPR、或者刚接触 Shader Graph 但不想一上来就啃 HLSL这篇文章可以直接作为你的“第一个风格化水面”练手项目。整个实现不需要手写完整 Shader主要靠节点完成只有顶点波浪部分用到一个很小的 HLSL Custom Function。1. 为什么要复刻这种水面它解决的是“风格化”的认知问题很多开发者已经会调 PBR 材质知道 Metallic、Smoothness、法线贴图这些词但一做“赛尔达这种卡通水”就翻车。翻车的原因不是 Shader 语法看不懂而是底层认知没切换过来。PBR 的思路是模拟光线与表面的物理交互粗糙度控制高光扩散法线贴图控制微表面反射用环境贴图所有参数的目标是“让物体看起来像真实世界中的某样东西”。而风之杖水面完全是另一套逻辑它的目标是“让观众一眼认出这是水同时保持和角色、天空、岛屿一致的动画感”。它不追求真实它追求“可读性”。这种风格化的水面真正依赖的是三样东西清晰的颜色分层近处浅水、远处深水、高光带、泡沫边缘每一层有明确边界。有节奏感的波浪运动它不是物理海浪而是类似节拍器驱动的正弦波叠加重复但有变化。形状化的高光高光不是来自物理光照计算而是用程序化图案“画”上去的像卡通动画里扫过画面的光斑。只要理解这三层哪怕你不手写 Shader而是用 Shader Graph 拼节点也能做出一眼就有“风之杖味”的水面。这篇文章适合三类人刚学 Shader Graph 想拿真实案例练手的 Unity 开发者做风格化游戏美术需要和 TA 沟通“我要什么效果”的美术同学以及研究图形学、想看 NPR 卡通渲染中“水的形状感”如何实现的同学。2. 风之杖水面的视觉拆解三要素模型先做一个“去掉贴图滤镜”的拆解。你在游戏里看到的水面不是靠一张高分率法线贴图或复杂的反射探头撑起来的。把它分解成三个可复现的技术要素。2.1 要素一低频率、强节奏感的波纹风之杖的水面波动频率很低波浪密度也不高。它不像写实水面那样有无数的细小涟漪而是把波纹简化成几个大波浪再用一点点噪声打破重复感。这本质上是多个正弦波叠加的结果高度 A1 * sin(X * freq1 time * speed1) A2 * sin(Y * freq2 time * speed2) A3 * sin((X Y) * freq3 time * speed3)每个波的振幅、频率、方向都不同。实际制作时2 到 3 层足够叠多了反而会让水面看起来“脏”破坏卡通感。2.2 要素二大块面的颜色分层颜色是风格化水面最重要的信息载体。远处是深海蓝靠近岸边的浅滩区域会变浅和沙滩交界处可能有一圈白色泡沫线。在 Shader 里实现颜色分层常用两种方式高度渐变用波浪高度或 UV 坐标的某个分量做 Gradient映射到渐变色。区域 Mask用噪声或距离场生成色块配合 Smoothstep 做柔和过渡。风之杖的颜色分层更多是“平面色带”不是细腻的物理渐变。做的时候要注意Lerp 中间的过渡区不能太大否则又回到写实感。2.3 要素三形状化高光这是最容易被忽略但决定“风味”的部分。PBR 的高光是随光照实时计算的光斑形状由粗糙度和法线决定而风之杖的高光更像是一块一块的“亮斑”铺在波浪上。实现时它不是依赖光照方向而是依赖 UV 和波纹本身。常用方法是用 Voronoi 噪声生成不规则的小格子。用波浪高度值的局部峰值做 Step 或 Smoothstep只保留“波峰”上的高光。高光颜色直接叠加而不是乘一个光源颜色。这样出来的高光会跟随波纹流动产生一种“水被阳光打亮”的动态感。2.4 写实水面与卡通水面的核心区别维度写实水面PBR风格化卡通水面NPR法线来源法线贴图细节丰富程序化波浪低频大块高光形态物理高光受粗糙度控制形状化亮斑图案化反射依赖 Reflection Probe / Planar Reflection只用颜色模拟或简单渐变颜色近岸复杂受环境光照影响大色带分层边界清晰透明常带半透明和焦散大多是 Opaque 或不透明混合性能高需要贴图和反射低几乎纯数学运算这一段的结论是做风之杖水面你不需要“更真实”你需要“更形状化”。所有后续节点的组织都围绕这个结论展开。3. Unity Shader Graph 环境准备与 URP 配置用 Shader Graph 必须搭配可编程渲染管线推荐使用 URPUniversal Render Pipeline。HDRP 也能用但功能过重移动端目标基本不会选它。3.1 版本选择建议使用 Unity 2021.3 LTS 或更高版本。2021.3 开始 Shader Graph 和 URP 已经非常稳定网上能找到的大多数教程也都基于这个版本线遇到问题更容易查资料。本文不绑定具体 Patch 版本你只要确保编辑器里能看到 Shader Graph 和 Universal RP 两个包即可。3.2 新建 URP 项目最简单的方式是直接创建带 URP 的模板项目Unity Hub - New Project - Universal 2D / 3D 模板模板里已经包含 URP 包、Shader Graph 包、Renderer Pipeline Asset可以直接开始。3.3 已有项目升级到 URP如果是老项目可以直接在 Package Manager 里安装依赖。更可控的方式是修改Packages/manifest.json加入下面两个包{ dependencies: { com.unity.render-pipelines.universal: 14.0.11, com.unity.shadergraph: 14.0.11 } }具体版本号以你打开 Package Manager 时能看到的最新稳定版本为准。安装完成后Unity 会提示你创建 Render Pipeline Asset也可以手动创建Create - Rendering - URP AssetUniversal Render Pipeline接着把管线指定给项目Project Settings - Graphics - Scriptable Render Pipeline Settings - 指定 URP Asset如果用的是 URP 2D Renderer那就选择 2D 模板不要在 3D 项目里强行使用 2D Renderer否则 Shader 的渲染路径会对不上。3.4 认识 Shader Graph 编辑器打开方式是Create - Shader Graph - URP - Unlit Shader Graph创建后双击进入编辑器。左边是 Node 搜索面板中间是主预览区右上角是材质预览球右下角是 Graph Inspector用来设置属性、更新模式和 Master Stack 的渲染设置。第一次打开时就注意Shader Graph 的 Master Stack 在底部最常用的入口是Fragment和Vertex两个 Block。Fragment 控制像素输出Vertex 控制顶点位移。这个结构后面会反复提到。4. 水面 Shader 的整体结构与核心节点设计4.1 选择 Unlit 还是 Lit风之杖水面完全可以用 Unlit Shader Graph 来做因为它的效果主要靠程序化颜色和高光 Mask不依赖实时物理光照。用 Lit 反而需要关掉一堆 PBR 特性属性面板会非常乱。但很多想保留一点光影联动的场景也可以用URP/Lit然后把 Metallic 固定为 0Smoothness 设为 0.5 左右Base Color 靠程序化生成。两种方案没有绝对好坏我的建议是玩家角色入水交互多周围有大量动态光照用 Lit保留最基本的响应。只是做环境背景水面、岛屿周围海域直接用 Unlit性能最好效果最可控。4.2 核心属性设计水面 Shader 的属性不需要多但要保证美术能调出不同海域感觉。推荐暴露以下属性属性名类型作用DeepColorColor深海区域颜色ShallowColorColor浅水区颜色FoamColorColor浪花/高光区域颜色WaveSpeedFloat波浪整体流动速度WaveDensityFloat波浪密度控制频率WaveAmplitudeFloat波浪高度振幅DistortionStrengthFloat噪声扰动强度HighlightContrastFloat高光 Mask 的锐利程度属性在Graph Inspector - Graph Inspector - Node Settings中创建类型选择 Float / Color / Vector1。4.3 数学核心用正弦波叠加替代法线贴图前面已经提过核心公式是多层正弦波叠加。在 Shader Graph 里可以这样理解节点链路UV - Add 时间偏移 - Multiply 密度 - Sine - 得到 -1 到 1 的波形把这个波形乘振幅后输出到Vertex Position或者Fragment Base Color水面就“活”了。为了避免多个波叠起来太规则可以使用 Gradient Noise 节点来调制相位UV - Gradient Noise - Multiply 扰动强度 - Add 到 UV - 再进 Sine这笔“噪声调制”就是卡通水面不生硬的关键。只要相位被噪声打乱波浪的重复感就会降低很多。4.4 为什么不用法线贴图写实水面用一张海浪法线贴图能获得非常丰富的细节但卡通风格的问题是法线贴图带来的高光非常“物理”它不会形成形状化的亮斑反而让水面像是铺了一层波光粼粼的塑料膜。如果你确实需要一点法线扰动可以在 Shader Graph 里用法线贴图 Unpack Normal然后把扰动叠加给 UV但强度建议控制在 0.05 到 0.15 之间只是做辅助不能是主力。这一段的判断是程序化波纹 噪声相位调制是风格化水面的地基法线贴图可以存在但永远只是配角。5. Shader Graph 实操从零搭建低多边形卡通水面现在开始正式搭建。我们以 Unlit Shader Graph 为例一步一步把水做出来。5.1 创建 Shader Graph 和材质在 Project 窗口里Create - Shader Graph - URP - Unlit Shader Graph 命名Water_Toon然后创建材质Create - Material 命名Water_Toon_Mat 把 Water_Toon 拖到材质的 Shader 槽位此时 Scene 里建一个 Plane 或 Cube把材质拖上去就能实时预览效果。先不要管预览黑不黑后面 Shader 还没写黑色是正常的。5.2 暴露基础颜色属性在 Graph Inspector 里创建三个 Color 属性Graph Inspector - 添加属性 - Color 默认值建议 DeepColor (0.05, 0.15, 0.35, 1) ShallowColor(0.2, 0.5, 0.7, 1) FoamColor(0.85, 0.95, 1.0, 1)在 Fragment 的Base ColorBlock 上临时连接DeepColor确保材质先显示出一个颜色方便后续预览。5.3 构建 UV 基础从UV节点开始Split 拆出 UV.x 和 UV.y方便对不同方向波做不同处理。如果不拆单一 UV 做二维波形也可以但控制力会弱一些。5.4 创建第一层波浪纵向波纹这层波用于控制水面的基本起伏颜色。节点链路UV.y - AddTime 节点 * WaveSpeed - MultiplyWaveDensity - Sine - MultiplyWaveAmplitude把Time节点和WaveSpeed做乘法时注意 Time 输出的是向量(t, sin(t), cos(t))只取Time.x即可。不能用整个 Vector 去乘一个数。这一层输出的值在 -1 到 1 之间后续需要重新映射到 0-1 范围。最简单的做法是用Remap节点把 -1 to 1 映射到 0 to 1或者用Divide后加 0.5Sine 输出 - Add 1 - Multiply 0.55.5 创建第二层波浪横向波纹复制一份刚才的链路但是改用 UV.x相位上加上第一层波浪的输出作为偏移。这样两层波浪会产生明显的交叉流动感UV.x - Add第一层波浪输出 * 0.3 Time * WaveSpeed- Sine这里的关键是“把第一层波浪作为相位偏移”它让第二层波浪不是平移而是真正被第一层波“推着走”视觉上会自然很多。5.6 加入噪声扰动创建Gradient Noise节点输入 UV * WaveDensity输出范围为 0-1。把它乘以 DistortionStrength叠加到两层波浪的输入 UV 上Gradient Noise (UV * WaveDensity) - Multiply DistortionStrength - Add 给 UV 相位调节 DistortionStrength 从 0 到 0.3 左右你会明显看到波浪从“塑料规律”变成“自然流动”。5.7 颜色分层现在把两层波浪合并成一个水量因子。简单方式是 Add 两层波后的值再经过Smoothstep约束范围。节点链路波浪总高度 Layer1 Layer2 Smoothstep0.30.7波浪总高度用这个值在DeepColor和ShallowColor之间 LerpLerpDeepColorShallowColorSmoothstep 输出边缘处再用一个小范围的 Smoothstep 混合 FoamColor。比如Smoothstep0.650.95波浪总高度这就是“高光色”混合进去后水面的层次立刻丰富。5.8 风格化高光 Mask传统做法是把高光叠加上去风格化做法是“画”上去。用Voronoi节点制造碎斑UV * VoronoiScale - VoronoiCell Density 控制格子大小Voronoi 节点输出Distance和Cells这里用Distance配合 Smoothstep 取出边界的亮线Smoothstep0.71.0Voronoi Distance把结果乘 FoamColor叠加到颜色输出上。这就是典型的风之杖海面高光区域不规则、块状、随 UV 展开。如果你希望高光只出现在波峰上还可以把 Voronoi 输出和波浪总高度做乘法让高光跟着波浪一起动。5.9 连接 Master Stack最终在 Fragment Block 中连接Base Color 分层颜色 高光色 Alpha 1暂不透明如果要做半透明水面把 Surface Type 改成 Transparent并给 Alpha 流出透明度。但移动端性能考虑建议优先实验 Opaque半透明放到后面加强。5.10 顶点波浪连接到 Vertex Block上述操作只改变颜色水是平的看起来像贴图在动。要让水面真正起伏需要在VertexBlock 上输出额外高度Vertex Position 原顶点位置 波浪总高度 * 法线方向Shader Graph 里操作方式是PositionObject Space - Add波浪总高度 * 法线方向 - 输出到 Vertex Position这也是风之杖水面上浪花起伏的基础。做完这一步你的水面才真正“立体”。6. 进阶用 HLSL Custom Function 做多层波浪叠加当波浪层数变多Shader Graph 节点会非常冗长。更好的做法是把波浪计算写成一个 HLSL 文件然后用 Custom Function 节点引入。这样既保留 Shader Graph 的灵活性又能写更高效的数学逻辑。6.1 创建 HLSL 文件在 Assets 下新建WaterWave.hlsl内容如下// 文件路径Assets/Shaders/WaterWave.hlsl #ifndef WATER_WAVE_INCLUDED #define WATER_WAVE_INCLUDED float3 GetWaveHeight(float3 positionOS, float time, float waveDensity, float waveAmplitude, float speed) { float x positionOS.x; float z positionOS.z; float wave1 sin(x * waveDensity * 1.0 time * speed); float wave2 sin(z * waveDensity * 1.4 time * speed * 0.8); float wave3 sin((x z) * waveDensity * 0.6 time * speed * 1.2); float height (wave1 wave2 wave3) * waveAmplitude; // 保持平整的大范围同时给一个可调的整体偏移 return float3(0, height, 0); } #endif这个文件只输出 Y 轴高度后续可以在 Shader Graph 里加到顶点位置上。6.2 导入 Custom Function 节点在 Shader Graph 中右键新建节点Custom Function设置Type: File Source: WaterWave.hlsl Name: GetWaveHeight连接输入positionOSObject Space Position timeTime 节点输出 waveDensityWaterShiness 相关 waveAmplitudeWaveAmplitude speedWaveSpeed输出Out接到 Vertex Block 的 Position 增量上。6.3 为什么要把顶点波浪单独写 HLSL纯 Shader Graph 也能做顶点波浪但节点多、性能差而且调试困难。写成 HLSL 之后后续想加 FBM分形布朗运动叠加也容易float noisePhase sin(x * 3.0 time) cos(z * 5.0 time * 0.5); float height wave1 * noisePhase * 0.3 wave2 wave3;FBM 本质就是多层不同频率的噪声叠加在 HLSL 里只是多几行循环的事但在 Shader Graph 里会膨胀出一大片节点。7. 用 C# 脚本控制水面动态参数Shader Graph 暴露的参数可以直接通过 C# 控制。这一招在实际项目里非常常用比如角色站在水里时加剧波浪、触发机关时水面颜色变深、昼夜切换时换水的颜色。下面是一个简单的 C# 脚本// 文件路径Assets/Scripts/WaterController.cs using UnityEngine; public class WaterController : MonoBehaviour { public Material waterMaterial; public Color deepColor new Color(0.05f, 0.15f, 0.35f, 1f); public Color shallowColor new Color(0.2f, 0.5f, 0.7f, 1f); public float waveScale 1.2f; public float disturbStrength 0.15f; void Update() { if (waterMaterial null) return; // 修改颜色 waterMaterial.SetColor(_DeepColor, deepColor); waterMaterial.SetColor(_ShallowColor, shallowColor); // 修改数值参数 waterMaterial.SetFloat(_WaveDensity, waveScale); waterMaterial.SetFloat(_DistortionStrength, disturbStrength); } public void SwitchStormMode() { waterMaterial.SetColor(_DeepColor, new Color(0.02f, 0.06f, 0.12f, 1f)); waterMaterial.SetColor(_ShallowColor, new Color(0.1f, 0.2f, 0.3f, 1f)); waterMaterial.SetFloat(_WaveAmplitude, 2.5f); waterMaterial.SetFloat(_WaveSpeed, 3.5f); } }几点提醒属性名必须和 Shader Graph 里暴露的 Reference 一致建议在 Shader Graph 属性面板里手动把 Reference 改成_DeepColor这种风格不要用默认的_Color_1234ABCD。如果使用renderer.material每次访问都会生成一个材质实例频繁修改会造成实例泄漏建议直接缓存Material或使用renderer.sharedMaterial明确知道不会影响其他使用同一材质的物体时才安全。不要在 Update 里每帧 SetFloat 大量参数默认情况下 MaterialPropertyBlock 更适合高频更新或者只对需要动态变化的水面区域用独立材质实例。8. 常见问题与排查清单问题现象可能原因排查方式解决方案水面材质变成紫红色Shader 编译失败或 GPU 不支持当前特性打开 Console 看错误日志检查 Shader 是否引用缺失属性修复节点连接删除不兼容节点升级驱动预览窗口全黑Master Stack 的 Base Color 没有连接或 Surface Type 不正确检查 Fragment Block 是否有值输出连接一个临时颜色比如 DeepColor波浪不动Time 节点没有正确传入或属性被覆盖检查 WaveSpeed 是否大于 0看 Time 是否接了 x 分量用 Time.x 乘 WaveSpeed确认波形链路有信号波浪太规律、像塑料噪声扰动不足检查 Gradient Noise 节点强度和输入 UV增加 DistortionStrength叠加第二层噪声高光花屏 / 闪烁Smoothstep 阈值过窄边缘采样不足调大 Smoothstep 的宽度降低 Voronoi Cell Density把阈值改为 0.3-0.7 而非 0.9-1.0移动端帧率暴跌使用了过多噪声 / Voronoi 节点通过 Frame Debugger 看 OverdrawShader 变体数量减少 Voronoi 使用用 Step/Smoothstep 代替Shader Graph 编辑器打不开项目没有安装 Shader Graph 包Package Manager 检查包列表安装 com.unity.shadergraph报错“a d3d11-compatible gpu is required”当前 GPU 或虚拟机不支持 DX11 Feature Level 11.0检查显卡支持情况确认编辑器运行环境换一台支持 DX11 的设备检查显卡驱动半透明水面排序错误Transparent 渲染队列物体绘制顺序不对调整 Render Queue或改用 Opaque非必要场景使用 Opaque 最稳妥这里必须强调凡是出现紫红色材质第一件事不是怀疑 Shader 代码逻辑而是看 Console 窗口的编译错误。紫红色是 Unity 在 Shader 编译失败时给材质的“占位色”错误日志会直接告诉你哪个节点或属性出问题。9. 最佳实践与工程建议9.1 把波浪计算封装成 Sub Graph实际项目里水面高光、颜色分层、顶点波浪都会用到同一个“波浪高度”值。建议把它做成 Sub Graph右键 - Create Node - Sub Graph 输入UV、Time、Speed、Density、Amplitude 输出WaveHeight这样颜色链路和顶点链路共享同一个波形避免两边计算不一致导致颜色和起伏对不上。9.2 控制 Shader 变体数量很多人不知道URP 的 Shader Graph 每勾选一个特性就多一批变体。水面这种低频 Shader要特别注意不用阴影时关闭Cast Shadows/Receive Shadows。不用反射时关闭Reflection Probes。不在多个 Renderer 间频繁切材质尽量用 MaterialPropertyBlock。9.3 移动端性能预算如果目标是手机端建议把水面限制在两层正弦波不需要按桌面端的 5 层叠加。全屏水面尽量少用 VoronoiVoronoi 在移动端的 OpenGL ES 3.0 设备上依然有较大 ALU 开销可以改用棋盘格或简单的 Smoothstep 组合。水面如果可以做成 Opaque就不要做 Transparent。不要小看这一点Transparent 的 Overdraw 在大量水体区域会直接造成帧率悬崖。9.4 美术和程序之间的协作Shader Graph 项目一定要注意属性 Reference 命名。暴露属性时把 Reference 改成有含义的名字比如_DeepColor而不是_Color_ABC123否则 C# 脚本很难维护。Sub Graph 也要按模块分目录存放Assets/Shaders/Water/SubGraphs/ Assets/Shaders/Water/Nodes/ Assets/Shaders/Water/HLSL/团队协作时Sub Graph 和 HLSL 文件也要纳入版本管理并约定好命名前缀。9.5 不要迷信“完全不用代码”Shader Graph 能解决 80% 的拼装工作但遇到顶点波浪、复杂的相位噪声、多平台性能优化时HLSL Custom Function 才是真正能“兜底”的地方。建议在学会 Shader Graph 的同时花时间看懂它生成的 Shader 文件打开材质 - Shader 旁边的小齿轮 - View Generated Shader这件“反编译自己”的习惯能让你从拼节点的人进阶到真正懂图形学的开发者。10. 总结风之杖风格水面的核心不是某个高深节点而是从“写实物理”切换成“形状化表达”的思维方式。把它拆成三层就足够了低频强节奏的波纹、清晰的颜色分层、白色块状高光。Shader Graph 能把这些层变成可以调的参数HLSL Custom Function 则用于处理更灵活的顶点波浪。建议你先在工程里跑通第 5 节的基础流程把水面做成 Opaque用两个方向的正弦波加一层噪声已经能获得不错的效果。然后逐步添加 Voronoi 高光、顶点波浪和 C# 动态控制。每一步都先看效果再继续不要一口气把所有节点全堆上去那样既难排查也学不到东西。下一步可以继续深入的方向包括法线扰动下的高光偏移、屏幕空间焦散、海水与沙滩交界处的泡沫边缘、以及 FBM 分形噪声在顶点波浪中的运用。每一个方向单独展开都可以是一篇长教程如果你正好也在研究这些可以顺着这套水面框架继续往下做。