《塞尔达传说风之杖》的水面效果放到现在看依然是很适合进自己项目的风格化渲染模板。它的水面没有超写实细节没有复杂的物理交互靠的是几个颜色分层、顶点起伏和深度淡色就把“一整片大海”的感觉撑起来了。在 Unity 里用 Shader Graph 复刻这套效果不需要堆大量节点也不需要高规格显卡核心要处理的其实只有三件事波面顶点动画、深度决定颜色、像素亮度阈值。这篇文章会用一个完整案例带你走一遍“风格拆解 - URP 工程准备 - Shader Graph 节点搭建 - 材质调试 - 性能观察”的流程。不管是正在做图形学实验还是想给游戏项目加一片风格化海面都可以直接照这个思路去改。复刻不等于是逐像素还原原作重点是抓住“风之杖水面”给人的第一印象大块的蓝、清晰的颜色分层、缓慢翻滚的低频波浪以及靠近岸边时那一圈干净的白色浪花。本文涉及到的关键词包括图形学、引擎渲染、Unity、Shader、Shader Graph。如果你之前没怎么接触过卡通渲染建议先把 Surface 输出、Vertex Position、Scene Depth 这几个基本概念过一遍再看节点时会轻松很多。1. 核心能力速览能力项说明项目类型Unity URP 风格化 Shader Graph 复刻案例主要功能深度淡色、低频顶点波浪、NPR 高光、岸边泡沫原始版本参考《塞尔达传说风之杖》同类型风格化海面渲染管线通用渲染管线 URPShader Graph 工程硬件门槛需支持 DirectX 11 / Vulkan开启 Shader Model 5.0 的显卡显存占用低普通集显和独显都能跑具体占用以编辑器 Profiler 为准启动方式Unity 编辑器打开工程自动编译 Shader Graph是否支持 API 调用不涉及材质参数通过 Material 属性面板暴露是否支持批量任务支持同一 Shader Graph 可批量创建材质参数可批量覆盖适合读者图形学入门、Unity 风格化渲染、NPR Shader 学习者上手难度中等掌握基本节点后 2 小时左右可完成这里提前说明教程复刻的是“美术风格原理”不是把原版游戏的贴图、网格、模型资源搬进 Unity。直接拆包使用游戏原始资产做大范围复用会涉及版权风险自己学习研究可以商用前一定要把贴图和模型都换成自制的。2. 风之杖水面风格拆解为什么这套效果值得复刻先看清楚原版水面到底做了哪些事再去想节点怎么连。风之杖的水面第一眼会给人一种“可爱但很真实”的感觉拆开看其实就四个层次。第一层是大色块。原版海面没有细腻的噪点贴图也不靠复杂的光照模型而是直接把水面分成深蓝、浅蓝、白色三种大色块。深蓝是远海和大深度区域浅蓝是近岸浅水白色则出现在浪尖、船体周围和岸边浪花。这种大色块处理方式非常适合 Shader Graph 去做甚至比传统手写 Shader 更容易控制阈值。第二层是顶点波浪。原版水面不是完全平面而是有明显起伏的“块状波浪”波浪频率不高幅度也不算夸张整体感觉像是一层软软的果冻在缓慢起伏。这也是今天复刻的核心用顶点位移而不是法线贴图。第三层是闪烁高光。原版水面在某些角度会出现一块块亮白色区域它不是真实反射可以理解成一种“受光面高亮阈值”。当水面法线方向接近光照方向配合低频波浪的动态变化就会形成这种闪烁块面。第四层是海岸泡沫。在岛屿、礁石边缘和水面交界处会有一圈白色用来交代水面和物体的前后关系。原版用贴图和顶点色实现我们在 Shader Graph 里可以用“深度差值 平滑阈值”来做。所以复刻的关键不是把效果做得“像素级一致”而是把“大色块、低频波浪、硬边缘高光、深度泡沫”这四个特征带过来。理解了这套逻辑你会发现风格化水面其实比写实水面更容易控制因为它不需要 PBR 那一整套复杂参数一个颜色、一个深度值、一组波浪参数就能出效果。3. 环境准备与工程配置在动手连节点之前先把工程环境确认一遍。3.1 版本与渲染管线建议使用 Unity LTS 版本并在 Hub 中创建 URP 模板工程。如果创建的是内置渲染管线工程也可以在 Package Manager 里安装 URP 并转换为 URP 工程但最省事的方式是直接新建 URP 工程。创建完成后打开 Project Settings - Graphics确认 Scriptable Render Pipeline Settings 已经指向 URP Asset。URP 资源里有两个开关对本章节很重要配置项位置用途Depth TextureURP Asset - General开启后才能在 Shader Graph 中使用场景深度节点Opaque TextureURP Asset - General开启后可以用 GrabPass 类的屏幕颜色节点本案例非必须HDRURP Asset - Lighting如果需要高光更亮可以开启风格化水面一般用默认深度开关不打开后续 Scene Depth 节点运行时采不到数据水面永远算不出浅水和深水交界这是最容易踩的坑。3.2 GPU 与图形 API 要求Shader Graph 默认生成的节点代码需要 Shader Model 5.0 级别的图形 API。社区里常见的报错是 “a d3d11-compatible gpu (feature level 11.0, shader model 5.0) is required to run this application”出现这类提示通用排查思路是确认显卡驱动已经更新到最新版本确认 Unity 图形 API 设置里包含 Direct3D 11 或 Vulkan旧项目从内置管线切 URP 后检查 Player Settings 里的 Graphics APIs 是否把自动图形 API 关掉了在 Windows 上优先使用 Direct3D 11不要在老旧虚拟机里测试 Shader Graph如果你是在 Mac 上开发Metal 的兼容性通常没问题但要注意 URP 版本不能太老。3.3 工程目录结构先建好目录避免后面 Shader、材质、脚本到处乱放。Assets/ ├── Shaders/ │ ├── Water/ │ │ └── WindWakerWater.shadergraph │ └── Functions/ │ └── WindWakerWave.hlsl ├── Materials/ │ └── Water/ ├── Scenes/ │ └── WaterTest.unity └── Editor/ └── WaterCreator.csShader Graph 文件保存时会自动编译材质则可以后续在 Materials 目录里手动创建。4. WindWaker 风格水面 Shader Graph 实现下面进入主体实现。我从 Shader Graph 的最终目标往回推我们需要一个能够在场景中平铺一整块巨大平面的水面材质它具备深度变色、顶点波浪、波浪受光闪烁和岸边泡沫四个能力。创建 Shader Graph 时选择 URP - Lit Shader Graph 或 URP - Unlit Shader Graph。建议选择 Unlit因为风格化水面不需要 PBR 的金属度和粗糙度参数自己控制颜色和亮度更直接。如果你想让水面有轻微环境反射再改成 Lit 也不难。4.1 基础颜色与深度淡色这是整个水面效果最重要的一个环节。逻辑是用水面深度值去 lerp 深蓝和浅蓝深度越大越深蓝深度越小越浅蓝。在 Shader Graph 中获取深度的常用节点是 Scene Depth也有的版本叫 Depth。操作如下添加节点 Scene Depth通过 Screen Position 节点的 Screen 通道把水面像素的屏幕坐标连给 Scene Depth再用 LinearEyeDepth 把深度值从非线性的 Z 缓冲转换到线性空间得到线性深度差之后我们需要计算“水面的厚度”。简单理解就是水面表面离水下场景物体的距离。水面离底部越近颜色越浅离底部越远颜色越深。节点连接思路Scene Depth - Subtract(surfaceDepth) - SmoothStep - Lerp(deepColor, shallowColor)这里 DeepColor 可以选择偏暗一点的蓝色例如 RGB(0.04, 0.31, 0.55)ShallowColor 选择偏青的浅蓝例如 RGB(0.27, 0.82, 0.90)。实际颜色可以在材质面板里调。核心参数是一个叫 DepthDensity 的系数它决定深度淡色的速度。密度值越大同样是 1 米水深颜色变化越剧烈海面颜色分层越明显。这个参数可以直接暴露到材质面板。4.2 顶点波浪多正弦波叠加风之杖水面最明显的特点是波浪不是贴图褶皱而是顶点真正在上下移动。用 Shader Graph 的 Vertex Position 节点就可以操作。思路是在顶点阶段计算一个高度值加到本地坐标 Y 轴上。最简单的是单个正弦波height sin(time * speed position.x * frequency) * amplitude但单个正弦波会显得机械风之杖水面看起来是几个方向不同的低频波叠加在一起。我们至少叠加两个方向一个主方向一个斜方向两个波的频率和速度都要分开才能出现“层层推进”的感觉。这里推荐把波形计算封装成一个 Custom Function 节点避免主图节点太乱。新建一个 HLSL 文件放到 Shaders/Functions 目录下void WindWakerWave_float( float3 positionOS, float time, float amp1, float freq1, float speed1, float amp2, float freq2, float speed2, out float3 offsetOS, out float waveHeight) { // 只使用 xz 平面坐标水面在 y 轴上起伏 float2 uv positionOS.xz; // 方向 1接近 x 轴的正弦波负责主波浪 float dir1 dot(uv, normalize(float2(1.0, 0.3))); float wave1 sin(time * speed1 dir1 * freq1) * amp1; // 方向 2斜向次波浪打破机械感 float dir2 dot(uv, normalize(float2(-0.4, 1.0))); float wave2 sin(time * speed2 dir2 * freq2) * amp2; float height wave1 wave2; offsetOS float3(0.0, height, 0.0); waveHeight height; }在 Shader Graph 里添加 Custom Function 节点选择该 HLSL 文件Type 选 File。把 Vertex 阶段的 Position 连给 positionOSTime 节点连给 time两个波浪的振幅、频率、速度分别暴露成属性。最后把 offsetOS 加到原来的 Object Position 上连到 Vertex Position 节点。Object Position - Add(offsetOS) - Vertex PositionwaveHeight 输出留着后面高光和泡沫都要用到。4.3 卡通化波峰用阈值制造硬边缘水面能站起来不只靠顶点位移还要让波浪顶部出现明显的高亮层。真实水面高光是连续渐变的但卡通风格要求“有就是有没有就是没有”中间过渡要尽量窄。处理方式是把 waveHeight 节点值做一个 SmoothStep 或 StepwaveHeight - SmoothStep(waveCrestStart, waveCrestStart waveCrestWidth, waveHeight)得到一个 0 到 1 之间的 CrestMask然后用它去跟基础颜色混合。混合权重不要太大大概 0.2 到 0.4 就行让波浪顶部略微发白。这个做法的好处是效果非常可控调窄波峰宽度就能让水从“橡皮泥”变成“刀切豆腐”的感觉非常卡通。4.4 闪烁高光光照方向与法线方向的关系为了泡泡面受光闪烁的效果我们需要一个简单的高光模型。不需要 BlinnPhong 的高光节点那么复杂可以直接用“法线方向 光照方向”做点积。问题是顶点位移之后法线方向需要重新计算。最稳妥的方式是用相邻顶点的高度差计算出法线但 Shader Graph 里直接做会比较绕。更实用、也符合风格化的做法是用手动定义的轻量法线扰动模拟波浪顶部朝向光照方向的区域使用一个“波浪偏移法线”例如给法线一个沿 X/Z 方向的偏移量偏移量大小由 waveHeight 的导数方向决定再把得到的法线与主光源方向做 dot 运算简化节点写法NormalDirection - Add(normalBias) - Normalize - Dot(lightDirection) - SmoothStep(highlightStart, highlightStart 0.2, dotResult) - Multiply(specColor, creastMask)这种做法虽然不够物理但卡通高光本身就不需要物理法线。重点是把高光出现的区域圈成“块状”而不是渐变条状。在风之杖里水面高光更像是一个个亮斑所以可以适当调高 smoothstep 的阈值。这里提醒一句如果你对法线计算有更高要求可以在顶点阶段用自定义函数对相邻顶点采样做偏导计算或者干脆在 Fragment 阶段使用 ddx/ddy 求高度场梯度。对于教学案例用近似法线已经够了。4.5 岸边泡沫与深度关系泡沫是最能体现“水面遇到物体”效果的地方。Shader Graph 中有一个非常方便的思路sceneDepth - surfaceDepth 水面厚度当水面厚度很小说明这个像素非常靠近水下物体或岸边地面。用 SmoothStep 处理这个厚度阈值设成比如 0.1 到 0.5 米就能在岸边或礁石附近圈出一圈白色泡沫。这里要把泡沫范围控制窄一点原版泡沫不是全面覆盖只在交界处有干净的细线。节点连接思路waterThickness - SmoothStep(foamDepthMin, foamDepthMax, waterThickness) - Multiply(foamColor) - Add(baseColor)如果想让泡沫边缘有一些噪声抖动可以添加一个简单的噪声节点把噪声值加到 foamDepthMax 上泡沫就不会是一根笔直的线。4.6 可选的折射与透明效果原版受限于性能并没有做真正的折射。今天复刻时如果坚持完全还原是可以不开启透明和不做折射的光是深度淡色已经能模拟出水下颜色。如果你希望做出“水面底下物体错位”的现代感效果那就要在透明队列里使用 GrabPass 或 URP 的 Opaque Texture。流程是Screen Position - Add(UVOffest) - SampleOpaqueTexture - 跟随透明度混合这个方案会增加不少带宽消耗对于移动端尤其明显。所以实际项目中建议把这个能力做成开关PC 上开启移动端关闭。5. 材质属性面板与参数说明Shader Graph 里暴露的属性最终会自动映射到材质 Inspector 面板。下面列出本案例需要用到的关键属性你可以按自己的需要命名属性名类型默认值参考作用BaseColorDeepColor深蓝 (0.04, 0.31, 0.55)深水区颜色BaseColorShallowColor浅蓝 (0.27, 0.82, 0.90)浅水区颜色DepthDensityFloat0.06深度淡色速率WaveAmp1Float0.12主波浪振幅WaveFreq1Float0.8主波浪频率WaveSpeed1Float1.2主波浪速度WaveAmp2Float0.06次波浪振幅WaveFreq2Float1.6次波浪频率WaveSpeed2Float0.8次波浪速度CrestRangeFloat0.25波峰发白宽度FoamDepthMaxFloat0.4泡沫出现的最大水深SpecStrengthFloat1.0高光强度要批量管理多个水面材质可以写一个简单的编辑器脚本在菜单栏生成水面物体并自动挂载材质。using UnityEditor; using UnityEngine; public static class WaterCreator { [MenuItem(Tools/WindWaker/Create Water Plane)] public static void CreateWaterPlane() { GameObject go GameObject.CreatePrimitive(PrimitiveType.Plane); go.name Ocean_WindWaker; Object.DestroyImmediate(go.GetComponentCollider()); Shader shader Shader.Find(Shader Graphs/WindWakerWater); if (shader null) { Debug.LogError(找不到 Shader Graphs/WindWakerWater请先保存你的 Shader Graph 文件); return; } Material mat new Material(shader); string path Assets/Materials/Water/WindWakerWater.mat; AssetDatabase.CreateAsset(mat, path); AssetDatabase.SaveAssets(); go.GetComponentRenderer().sharedMaterial AssetDatabase.LoadAssetAtPathMaterial(path); Undo.RegisterCreatedObjectUndo(go, Create Water Plane); } }这个脚本放在 Editor 目录下使用不需要担心打包进玩家端。6. 场景验证怎么判断效果是否接近风之杖风格搭建一个简单的测试场景放一个大平面然后在场景里放几个高低不同的立方体或礁石模型观察水面和物体交界处。验证清单相机俯瞰海面时能看到明显的深蓝和浅蓝分层而不是一整片同一个颜色波浪持续缓慢起伏不会出现高频抖动频率太低会像果冻太高会像水面沸腾波浪顶部有一层干净的白色而不是模糊的一团光照方向变化时水面出现块状高光闪烁岸边石头周围有一圈白色泡沫泡沫边缘有轻微噪声抖动从侧面看水面不是一个纯平面顶点有真实的 Y 轴位移如果以上六点都成立说明这个 Shader Graph 的核心链路已经跑通。剩下的就是调数值手感。如果你想让水面看起来更“圆润”把两个波浪的振幅调高、频率调低并把波峰宽度调大。如果想让水面更“清脆利落”就反过来振幅降低、频率调高、波峰宽度调窄。这套控制逻辑一旦建立后续做雪地、岩浆、泥潭都可以复用同一个 Shader Graph 模板只是换颜色和波型参数。7. 性能观察与参数调节建议在 Unity 编辑器的 Game 模式下打开 Profiler可以重点观察 Render 和 Scripts 两项耗时。Shader Graph 节点虽然直观但节点数量增多后会生成较长的指令流尤其是 Fragment 阶段被多次采样的节点一定要警惕。对于这种风格化水面性能优化优先级如下第一减少 Fragment 阶段的采样。Scene Depth 的采样是必需的但不要为了泡沫在 Fragment 阶段再加多个高度场采样。波浪高度只算了一次顶点阶段可以直接把 waveHeight 传到 Fragment 阶段避免重复计算。第二谨慎开启透明。透明表面会改变渲染顺序大量水面 Mesh 叠加时Overdraw 会很明显。能用不透明做出来的效果尽量不透明。第三控制波浪网格的顶点密度。如果整个海面只用一个大平面顶点数不够波浪会很粗糙但如果每个小区域都放一个高密度平面顶点压力也不小。建议用 Unity 的 LOD Group 做两层海面远处用低分段网格近处用高分段网格。第四批量处理参数。如果场景中有多块不同水域可以共用同一个材质然后用 MaterialPropertyBlock 覆盖局部差异不建议创建大量不同参数的新材质实例否则会破坏合批。从实际经验看这套节点图在 PC 端几乎没有压力在移动端需要关掉折射和降低分辨率属于“风格化特效里性价比很高”的方案。具体的显存和帧耗时还是要拿到自己的目标设备上跑一轮数据再下结论。8. 常见问题与排查方法问题现象可能原因排查方式解决方案材质显示紫红色Shader 编译失败查看 Console 窗口报错日志按报错信息检查节点类型、Custom Function 路径和 HLSL 文件是否缺失启动项目提示 d3d11-compatible GPU图形 API 或驱动不满足 Shader Model 5.0 要求检查 Project Settings - Player - Graphics APIs切换到 Direct3D 11 或 Vulkan更新显卡驱动水面没有深度淡色全部是深蓝URP Depth Texture 未开启检查 URP Asset 的 Depth Texture 选项勾选 Deep Texture 并重启编辑器Scene Depth 节点连不上或报错版本不同节点名称有差异在搜索栏分别搜索 Scene Depth、Camera Depth Texture不同版本节点名称不同检索后重新连接波浪看起来特别硬SmoothStep 阈值过窄或振幅过大观察波峰 Mask 的数值范围把 CrestRange 调大或降低波浪振幅高速移动相机时水面闪烁顶点波形精度不够在材质面板把波浪频率调低低频波浪更适合风格化水面也能避免闪烁泡沫出现在整个水面深度判断逻辑错误检查 Scene Depth 是否被正确转换到线性空间使用 LinearEyeDepth 处理后再计算水面厚度高光区域太大像大面积曝光Dot 节点结果没有被 SmoothStep 约束检查高光分支的 SmoothStep 阈值提高高光 Threshold把亮度收缩成块状9. 最佳实践与扩展方向做完这个案例之后可以沿着几个方向继续拓展。第一把波形函数做成可配置的 SubGraph。目前 HLSL 自定义函数已经是一个独立文件你可以继续把它分享成 SubGraph然后在不同水面 Shader 中复用。这样后续调整波形算法时只需要改一处所有水面的表现同时更新。第二加入角色交互。风之杖里船只会让水面产生明显的交互浪花。可以在 Update 里用 SphereCollider 对船底采样产生一个局部的浪花权重然后传给水面 MaterialPropertyBlock。这种交互量不需要很大一个浮点数数组就能传递多个点的水面扰动强度。第三做天气系统。把波浪速度、振幅、高光阈值统一暴露为全局参数然后写一个简单的 MonoBehaviour 在晴天/风雨天之间做插值就能让同一片海面具备两种气质。第四尝试深度雾与颜色映射。当前案例用的是硬边界的深度淡色如果你想往更现代的风格化靠拢可以把 lerp 换成一份 DepthColorRamp甚至用一组 Gradient 作为深度颜色映射表这样海水颜色会更柔和。第五团队协作和版本管理。Shader Graph 资产本质上也是文本资产建议配合 Git 进行管理。可以在项目根目录执行git init git add Assets Packages ProjectSettings git commit -m init wind waker water shader demo这样每次修改都有回退点尤其是波形参数调到不可逆的时候Git 能救你一次。总结这个案例最值得尝试的地方在于只用一张平面、一个 Shader Graph不开复杂渲染特性就能复刻出风格化海面的核心视觉。最先应该验证的是深度淡色链路因为场景深度是整个水面色块分层的骨架如果这一步没有出效果后面几个环节都缺少基准。最容易踩的坑是 URP 资源的 Depth Texture 没有打开以及 Shader Graph 版本升级后节点名称变化。把环境问题排干净之后再回到数值调试把波浪振幅和频率调到自己想要的手感上这片海就算真正“活”了。顺手可以再做一个夜间版本把 BaseColorDeep 换成暗色把高光调低泡沫改成微弱反光同一个材质模板就变成了另一片完全不同的海面。建议收藏备用之后做风格化地形、卡通渲染或者图形学作业时都可以回来翻一翻这套节点的组织思路。
《塞尔达传说风之杖》的水面效果放到现在看依然是很适合进自己项目的风格化渲染模板。它的水面没有超写实细节没有复杂的物理交互靠的是几个颜色分层、顶点起伏和深度淡色就把“一整片大海”的感觉撑起来了。在 Unity 里用 Shader Graph 复刻这套效果不需要堆大量节点也不需要高规格显卡核心要处理的其实只有三件事波面顶点动画、深度决定颜色、像素亮度阈值。这篇文章会用一个完整案例带你走一遍“风格拆解 - URP 工程准备 - Shader Graph 节点搭建 - 材质调试 - 性能观察”的流程。不管是正在做图形学实验还是想给游戏项目加一片风格化海面都可以直接照这个思路去改。复刻不等于是逐像素还原原作重点是抓住“风之杖水面”给人的第一印象大块的蓝、清晰的颜色分层、缓慢翻滚的低频波浪以及靠近岸边时那一圈干净的白色浪花。本文涉及到的关键词包括图形学、引擎渲染、Unity、Shader、Shader Graph。如果你之前没怎么接触过卡通渲染建议先把 Surface 输出、Vertex Position、Scene Depth 这几个基本概念过一遍再看节点时会轻松很多。1. 核心能力速览能力项说明项目类型Unity URP 风格化 Shader Graph 复刻案例主要功能深度淡色、低频顶点波浪、NPR 高光、岸边泡沫原始版本参考《塞尔达传说风之杖》同类型风格化海面渲染管线通用渲染管线 URPShader Graph 工程硬件门槛需支持 DirectX 11 / Vulkan开启 Shader Model 5.0 的显卡显存占用低普通集显和独显都能跑具体占用以编辑器 Profiler 为准启动方式Unity 编辑器打开工程自动编译 Shader Graph是否支持 API 调用不涉及材质参数通过 Material 属性面板暴露是否支持批量任务支持同一 Shader Graph 可批量创建材质参数可批量覆盖适合读者图形学入门、Unity 风格化渲染、NPR Shader 学习者上手难度中等掌握基本节点后 2 小时左右可完成这里提前说明教程复刻的是“美术风格原理”不是把原版游戏的贴图、网格、模型资源搬进 Unity。直接拆包使用游戏原始资产做大范围复用会涉及版权风险自己学习研究可以商用前一定要把贴图和模型都换成自制的。2. 风之杖水面风格拆解为什么这套效果值得复刻先看清楚原版水面到底做了哪些事再去想节点怎么连。风之杖的水面第一眼会给人一种“可爱但很真实”的感觉拆开看其实就四个层次。第一层是大色块。原版海面没有细腻的噪点贴图也不靠复杂的光照模型而是直接把水面分成深蓝、浅蓝、白色三种大色块。深蓝是远海和大深度区域浅蓝是近岸浅水白色则出现在浪尖、船体周围和岸边浪花。这种大色块处理方式非常适合 Shader Graph 去做甚至比传统手写 Shader 更容易控制阈值。第二层是顶点波浪。原版水面不是完全平面而是有明显起伏的“块状波浪”波浪频率不高幅度也不算夸张整体感觉像是一层软软的果冻在缓慢起伏。这也是今天复刻的核心用顶点位移而不是法线贴图。第三层是闪烁高光。原版水面在某些角度会出现一块块亮白色区域它不是真实反射可以理解成一种“受光面高亮阈值”。当水面法线方向接近光照方向配合低频波浪的动态变化就会形成这种闪烁块面。第四层是海岸泡沫。在岛屿、礁石边缘和水面交界处会有一圈白色用来交代水面和物体的前后关系。原版用贴图和顶点色实现我们在 Shader Graph 里可以用“深度差值 平滑阈值”来做。所以复刻的关键不是把效果做得“像素级一致”而是把“大色块、低频波浪、硬边缘高光、深度泡沫”这四个特征带过来。理解了这套逻辑你会发现风格化水面其实比写实水面更容易控制因为它不需要 PBR 那一整套复杂参数一个颜色、一个深度值、一组波浪参数就能出效果。3. 环境准备与工程配置在动手连节点之前先把工程环境确认一遍。3.1 版本与渲染管线建议使用 Unity LTS 版本并在 Hub 中创建 URP 模板工程。如果创建的是内置渲染管线工程也可以在 Package Manager 里安装 URP 并转换为 URP 工程但最省事的方式是直接新建 URP 工程。创建完成后打开 Project Settings - Graphics确认 Scriptable Render Pipeline Settings 已经指向 URP Asset。URP 资源里有两个开关对本章节很重要配置项位置用途Depth TextureURP Asset - General开启后才能在 Shader Graph 中使用场景深度节点Opaque TextureURP Asset - General开启后可以用 GrabPass 类的屏幕颜色节点本案例非必须HDRURP Asset - Lighting如果需要高光更亮可以开启风格化水面一般用默认深度开关不打开后续 Scene Depth 节点运行时采不到数据水面永远算不出浅水和深水交界这是最容易踩的坑。3.2 GPU 与图形 API 要求Shader Graph 默认生成的节点代码需要 Shader Model 5.0 级别的图形 API。社区里常见的报错是 “a d3d11-compatible gpu (feature level 11.0, shader model 5.0) is required to run this application”出现这类提示通用排查思路是确认显卡驱动已经更新到最新版本确认 Unity 图形 API 设置里包含 Direct3D 11 或 Vulkan旧项目从内置管线切 URP 后检查 Player Settings 里的 Graphics APIs 是否把自动图形 API 关掉了在 Windows 上优先使用 Direct3D 11不要在老旧虚拟机里测试 Shader Graph如果你是在 Mac 上开发Metal 的兼容性通常没问题但要注意 URP 版本不能太老。3.3 工程目录结构先建好目录避免后面 Shader、材质、脚本到处乱放。Assets/ ├── Shaders/ │ ├── Water/ │ │ └── WindWakerWater.shadergraph │ └── Functions/ │ └── WindWakerWave.hlsl ├── Materials/ │ └── Water/ ├── Scenes/ │ └── WaterTest.unity └── Editor/ └── WaterCreator.csShader Graph 文件保存时会自动编译材质则可以后续在 Materials 目录里手动创建。4. WindWaker 风格水面 Shader Graph 实现下面进入主体实现。我从 Shader Graph 的最终目标往回推我们需要一个能够在场景中平铺一整块巨大平面的水面材质它具备深度变色、顶点波浪、波浪受光闪烁和岸边泡沫四个能力。创建 Shader Graph 时选择 URP - Lit Shader Graph 或 URP - Unlit Shader Graph。建议选择 Unlit因为风格化水面不需要 PBR 的金属度和粗糙度参数自己控制颜色和亮度更直接。如果你想让水面有轻微环境反射再改成 Lit 也不难。4.1 基础颜色与深度淡色这是整个水面效果最重要的一个环节。逻辑是用水面深度值去 lerp 深蓝和浅蓝深度越大越深蓝深度越小越浅蓝。在 Shader Graph 中获取深度的常用节点是 Scene Depth也有的版本叫 Depth。操作如下添加节点 Scene Depth通过 Screen Position 节点的 Screen 通道把水面像素的屏幕坐标连给 Scene Depth再用 LinearEyeDepth 把深度值从非线性的 Z 缓冲转换到线性空间得到线性深度差之后我们需要计算“水面的厚度”。简单理解就是水面表面离水下场景物体的距离。水面离底部越近颜色越浅离底部越远颜色越深。节点连接思路Scene Depth - Subtract(surfaceDepth) - SmoothStep - Lerp(deepColor, shallowColor)这里 DeepColor 可以选择偏暗一点的蓝色例如 RGB(0.04, 0.31, 0.55)ShallowColor 选择偏青的浅蓝例如 RGB(0.27, 0.82, 0.90)。实际颜色可以在材质面板里调。核心参数是一个叫 DepthDensity 的系数它决定深度淡色的速度。密度值越大同样是 1 米水深颜色变化越剧烈海面颜色分层越明显。这个参数可以直接暴露到材质面板。4.2 顶点波浪多正弦波叠加风之杖水面最明显的特点是波浪不是贴图褶皱而是顶点真正在上下移动。用 Shader Graph 的 Vertex Position 节点就可以操作。思路是在顶点阶段计算一个高度值加到本地坐标 Y 轴上。最简单的是单个正弦波height sin(time * speed position.x * frequency) * amplitude但单个正弦波会显得机械风之杖水面看起来是几个方向不同的低频波叠加在一起。我们至少叠加两个方向一个主方向一个斜方向两个波的频率和速度都要分开才能出现“层层推进”的感觉。这里推荐把波形计算封装成一个 Custom Function 节点避免主图节点太乱。新建一个 HLSL 文件放到 Shaders/Functions 目录下void WindWakerWave_float( float3 positionOS, float time, float amp1, float freq1, float speed1, float amp2, float freq2, float speed2, out float3 offsetOS, out float waveHeight) { // 只使用 xz 平面坐标水面在 y 轴上起伏 float2 uv positionOS.xz; // 方向 1接近 x 轴的正弦波负责主波浪 float dir1 dot(uv, normalize(float2(1.0, 0.3))); float wave1 sin(time * speed1 dir1 * freq1) * amp1; // 方向 2斜向次波浪打破机械感 float dir2 dot(uv, normalize(float2(-0.4, 1.0))); float wave2 sin(time * speed2 dir2 * freq2) * amp2; float height wave1 wave2; offsetOS float3(0.0, height, 0.0); waveHeight height; }在 Shader Graph 里添加 Custom Function 节点选择该 HLSL 文件Type 选 File。把 Vertex 阶段的 Position 连给 positionOSTime 节点连给 time两个波浪的振幅、频率、速度分别暴露成属性。最后把 offsetOS 加到原来的 Object Position 上连到 Vertex Position 节点。Object Position - Add(offsetOS) - Vertex PositionwaveHeight 输出留着后面高光和泡沫都要用到。4.3 卡通化波峰用阈值制造硬边缘水面能站起来不只靠顶点位移还要让波浪顶部出现明显的高亮层。真实水面高光是连续渐变的但卡通风格要求“有就是有没有就是没有”中间过渡要尽量窄。处理方式是把 waveHeight 节点值做一个 SmoothStep 或 StepwaveHeight - SmoothStep(waveCrestStart, waveCrestStart waveCrestWidth, waveHeight)得到一个 0 到 1 之间的 CrestMask然后用它去跟基础颜色混合。混合权重不要太大大概 0.2 到 0.4 就行让波浪顶部略微发白。这个做法的好处是效果非常可控调窄波峰宽度就能让水从“橡皮泥”变成“刀切豆腐”的感觉非常卡通。4.4 闪烁高光光照方向与法线方向的关系为了泡泡面受光闪烁的效果我们需要一个简单的高光模型。不需要 BlinnPhong 的高光节点那么复杂可以直接用“法线方向 光照方向”做点积。问题是顶点位移之后法线方向需要重新计算。最稳妥的方式是用相邻顶点的高度差计算出法线但 Shader Graph 里直接做会比较绕。更实用、也符合风格化的做法是用手动定义的轻量法线扰动模拟波浪顶部朝向光照方向的区域使用一个“波浪偏移法线”例如给法线一个沿 X/Z 方向的偏移量偏移量大小由 waveHeight 的导数方向决定再把得到的法线与主光源方向做 dot 运算简化节点写法NormalDirection - Add(normalBias) - Normalize - Dot(lightDirection) - SmoothStep(highlightStart, highlightStart 0.2, dotResult) - Multiply(specColor, creastMask)这种做法虽然不够物理但卡通高光本身就不需要物理法线。重点是把高光出现的区域圈成“块状”而不是渐变条状。在风之杖里水面高光更像是一个个亮斑所以可以适当调高 smoothstep 的阈值。这里提醒一句如果你对法线计算有更高要求可以在顶点阶段用自定义函数对相邻顶点采样做偏导计算或者干脆在 Fragment 阶段使用 ddx/ddy 求高度场梯度。对于教学案例用近似法线已经够了。4.5 岸边泡沫与深度关系泡沫是最能体现“水面遇到物体”效果的地方。Shader Graph 中有一个非常方便的思路sceneDepth - surfaceDepth 水面厚度当水面厚度很小说明这个像素非常靠近水下物体或岸边地面。用 SmoothStep 处理这个厚度阈值设成比如 0.1 到 0.5 米就能在岸边或礁石附近圈出一圈白色泡沫。这里要把泡沫范围控制窄一点原版泡沫不是全面覆盖只在交界处有干净的细线。节点连接思路waterThickness - SmoothStep(foamDepthMin, foamDepthMax, waterThickness) - Multiply(foamColor) - Add(baseColor)如果想让泡沫边缘有一些噪声抖动可以添加一个简单的噪声节点把噪声值加到 foamDepthMax 上泡沫就不会是一根笔直的线。4.6 可选的折射与透明效果原版受限于性能并没有做真正的折射。今天复刻时如果坚持完全还原是可以不开启透明和不做折射的光是深度淡色已经能模拟出水下颜色。如果你希望做出“水面底下物体错位”的现代感效果那就要在透明队列里使用 GrabPass 或 URP 的 Opaque Texture。流程是Screen Position - Add(UVOffest) - SampleOpaqueTexture - 跟随透明度混合这个方案会增加不少带宽消耗对于移动端尤其明显。所以实际项目中建议把这个能力做成开关PC 上开启移动端关闭。5. 材质属性面板与参数说明Shader Graph 里暴露的属性最终会自动映射到材质 Inspector 面板。下面列出本案例需要用到的关键属性你可以按自己的需要命名属性名类型默认值参考作用BaseColorDeepColor深蓝 (0.04, 0.31, 0.55)深水区颜色BaseColorShallowColor浅蓝 (0.27, 0.82, 0.90)浅水区颜色DepthDensityFloat0.06深度淡色速率WaveAmp1Float0.12主波浪振幅WaveFreq1Float0.8主波浪频率WaveSpeed1Float1.2主波浪速度WaveAmp2Float0.06次波浪振幅WaveFreq2Float1.6次波浪频率WaveSpeed2Float0.8次波浪速度CrestRangeFloat0.25波峰发白宽度FoamDepthMaxFloat0.4泡沫出现的最大水深SpecStrengthFloat1.0高光强度要批量管理多个水面材质可以写一个简单的编辑器脚本在菜单栏生成水面物体并自动挂载材质。using UnityEditor; using UnityEngine; public static class WaterCreator { [MenuItem(Tools/WindWaker/Create Water Plane)] public static void CreateWaterPlane() { GameObject go GameObject.CreatePrimitive(PrimitiveType.Plane); go.name Ocean_WindWaker; Object.DestroyImmediate(go.GetComponentCollider()); Shader shader Shader.Find(Shader Graphs/WindWakerWater); if (shader null) { Debug.LogError(找不到 Shader Graphs/WindWakerWater请先保存你的 Shader Graph 文件); return; } Material mat new Material(shader); string path Assets/Materials/Water/WindWakerWater.mat; AssetDatabase.CreateAsset(mat, path); AssetDatabase.SaveAssets(); go.GetComponentRenderer().sharedMaterial AssetDatabase.LoadAssetAtPathMaterial(path); Undo.RegisterCreatedObjectUndo(go, Create Water Plane); } }这个脚本放在 Editor 目录下使用不需要担心打包进玩家端。6. 场景验证怎么判断效果是否接近风之杖风格搭建一个简单的测试场景放一个大平面然后在场景里放几个高低不同的立方体或礁石模型观察水面和物体交界处。验证清单相机俯瞰海面时能看到明显的深蓝和浅蓝分层而不是一整片同一个颜色波浪持续缓慢起伏不会出现高频抖动频率太低会像果冻太高会像水面沸腾波浪顶部有一层干净的白色而不是模糊的一团光照方向变化时水面出现块状高光闪烁岸边石头周围有一圈白色泡沫泡沫边缘有轻微噪声抖动从侧面看水面不是一个纯平面顶点有真实的 Y 轴位移如果以上六点都成立说明这个 Shader Graph 的核心链路已经跑通。剩下的就是调数值手感。如果你想让水面看起来更“圆润”把两个波浪的振幅调高、频率调低并把波峰宽度调大。如果想让水面更“清脆利落”就反过来振幅降低、频率调高、波峰宽度调窄。这套控制逻辑一旦建立后续做雪地、岩浆、泥潭都可以复用同一个 Shader Graph 模板只是换颜色和波型参数。7. 性能观察与参数调节建议在 Unity 编辑器的 Game 模式下打开 Profiler可以重点观察 Render 和 Scripts 两项耗时。Shader Graph 节点虽然直观但节点数量增多后会生成较长的指令流尤其是 Fragment 阶段被多次采样的节点一定要警惕。对于这种风格化水面性能优化优先级如下第一减少 Fragment 阶段的采样。Scene Depth 的采样是必需的但不要为了泡沫在 Fragment 阶段再加多个高度场采样。波浪高度只算了一次顶点阶段可以直接把 waveHeight 传到 Fragment 阶段避免重复计算。第二谨慎开启透明。透明表面会改变渲染顺序大量水面 Mesh 叠加时Overdraw 会很明显。能用不透明做出来的效果尽量不透明。第三控制波浪网格的顶点密度。如果整个海面只用一个大平面顶点数不够波浪会很粗糙但如果每个小区域都放一个高密度平面顶点压力也不小。建议用 Unity 的 LOD Group 做两层海面远处用低分段网格近处用高分段网格。第四批量处理参数。如果场景中有多块不同水域可以共用同一个材质然后用 MaterialPropertyBlock 覆盖局部差异不建议创建大量不同参数的新材质实例否则会破坏合批。从实际经验看这套节点图在 PC 端几乎没有压力在移动端需要关掉折射和降低分辨率属于“风格化特效里性价比很高”的方案。具体的显存和帧耗时还是要拿到自己的目标设备上跑一轮数据再下结论。8. 常见问题与排查方法问题现象可能原因排查方式解决方案材质显示紫红色Shader 编译失败查看 Console 窗口报错日志按报错信息检查节点类型、Custom Function 路径和 HLSL 文件是否缺失启动项目提示 d3d11-compatible GPU图形 API 或驱动不满足 Shader Model 5.0 要求检查 Project Settings - Player - Graphics APIs切换到 Direct3D 11 或 Vulkan更新显卡驱动水面没有深度淡色全部是深蓝URP Depth Texture 未开启检查 URP Asset 的 Depth Texture 选项勾选 Deep Texture 并重启编辑器Scene Depth 节点连不上或报错版本不同节点名称有差异在搜索栏分别搜索 Scene Depth、Camera Depth Texture不同版本节点名称不同检索后重新连接波浪看起来特别硬SmoothStep 阈值过窄或振幅过大观察波峰 Mask 的数值范围把 CrestRange 调大或降低波浪振幅高速移动相机时水面闪烁顶点波形精度不够在材质面板把波浪频率调低低频波浪更适合风格化水面也能避免闪烁泡沫出现在整个水面深度判断逻辑错误检查 Scene Depth 是否被正确转换到线性空间使用 LinearEyeDepth 处理后再计算水面厚度高光区域太大像大面积曝光Dot 节点结果没有被 SmoothStep 约束检查高光分支的 SmoothStep 阈值提高高光 Threshold把亮度收缩成块状9. 最佳实践与扩展方向做完这个案例之后可以沿着几个方向继续拓展。第一把波形函数做成可配置的 SubGraph。目前 HLSL 自定义函数已经是一个独立文件你可以继续把它分享成 SubGraph然后在不同水面 Shader 中复用。这样后续调整波形算法时只需要改一处所有水面的表现同时更新。第二加入角色交互。风之杖里船只会让水面产生明显的交互浪花。可以在 Update 里用 SphereCollider 对船底采样产生一个局部的浪花权重然后传给水面 MaterialPropertyBlock。这种交互量不需要很大一个浮点数数组就能传递多个点的水面扰动强度。第三做天气系统。把波浪速度、振幅、高光阈值统一暴露为全局参数然后写一个简单的 MonoBehaviour 在晴天/风雨天之间做插值就能让同一片海面具备两种气质。第四尝试深度雾与颜色映射。当前案例用的是硬边界的深度淡色如果你想往更现代的风格化靠拢可以把 lerp 换成一份 DepthColorRamp甚至用一组 Gradient 作为深度颜色映射表这样海水颜色会更柔和。第五团队协作和版本管理。Shader Graph 资产本质上也是文本资产建议配合 Git 进行管理。可以在项目根目录执行git init git add Assets Packages ProjectSettings git commit -m init wind waker water shader demo这样每次修改都有回退点尤其是波形参数调到不可逆的时候Git 能救你一次。总结这个案例最值得尝试的地方在于只用一张平面、一个 Shader Graph不开复杂渲染特性就能复刻出风格化海面的核心视觉。最先应该验证的是深度淡色链路因为场景深度是整个水面色块分层的骨架如果这一步没有出效果后面几个环节都缺少基准。最容易踩的坑是 URP 资源的 Depth Texture 没有打开以及 Shader Graph 版本升级后节点名称变化。把环境问题排干净之后再回到数值调试把波浪振幅和频率调到自己想要的手感上这片海就算真正“活”了。顺手可以再做一个夜间版本把 BaseColorDeep 换成暗色把高光调低泡沫改成微弱反光同一个材质模板就变成了另一片完全不同的海面。建议收藏备用之后做风格化地形、卡通渲染或者图形学作业时都可以回来翻一翻这套节点的组织思路。
 与 @TargetApi() 到底差在哪？TaoToken 带你从 lint 报错到编译通过)
