1. 效果分析与目标拆解第一次看到《原神》璃月港的水体效果时我就被那种清澈见底又充满东方韵味的视觉表现震撼到了。这种水体与普通游戏中的海水完全不同——它更像中国传统山水画中的溪流透明中带着青绿流动时还能看到水底石头的折射变形。要实现这种效果我们需要重点关注三个核心特征多层颜色叠加表层是略带青绿的半透明色中层有渐变过渡底层能看到清晰的沙石细节动态折射效果水流波动时产生的扭曲要自然不能像普通法线贴图那样机械重复特殊高光处理阳光照射时会出现细碎的金色光斑类似古画中的金碧山水效果在ShaderGraph中实现这些特性关键在于理解层叠着色的逻辑。我尝试过直接用Unity的标准水材质发现无论如何调整参数都达不到璃月港那种通透感。后来发现需要将水面着色分为三个独立计算层表层颜色层使用带透明度渐变的菲涅尔效应折射层用顶点偏移模拟水流动态底部细节层通过屏幕空间深度混合显示水底纹理2. 基础水面搭建2.1 创建ShaderGraph模板在Project面板右键选择Create Shader PBR Graph命名为LiyueWater。这里建议使用PBR模板而不是Unlit因为我们需要金属度/光滑度控制高光表现。打开编辑器后先做以下基础设置在Graph Settings中将Surface类型改为Transparent关闭Receive Shadows选项避免不自然的阴影将Blend Mode设为Alpha Blend实现半透明效果// 基础设置示例 Shader Custom/LiyueWater { Properties { _MainColor (Surface Color, Color) (0.12, 0.45, 0.34, 0.8) _DepthGradient (Depth Gradient, Color) (0.22, 0.58, 0.49, 1) } SubShader { Tags {QueueTransparent RenderTypeTransparent} LOD 100 Blend SrcAlpha OneMinusSrcAlpha ZWrite Off } }2.2 多层颜色控制璃月港水体的独特色调需要通过颜色叠加实现创建两个Color节点分别命名为_SurfaceColor(RGBA: 0.12, 0.45, 0.34, 0.8)和_DepthColor(RGBA: 0.22, 0.58, 0.49, 1)添加Depth节点获取水面到地面的距离用Smoothstep节点控制颜色渐变范围我测试发现0-5米的渐变距离最自然最后用Lerp节点混合两个颜色提示要模拟真实水深的颜色变化可以在Depth节点后接Power节点调整衰减曲线参数设为0.5效果最佳3. 动态效果实现3.1 顶点动画设计普通的水面波动用法线贴图就能实现但璃月港的水流有独特的丝绸质感这需要顶点动画添加Position节点获取模型空间坐标用Split节点分离XZ分量水流只在水平方向波动创建两个Time节点分别乘以不同速度系数(建议0.3和0.7)用Sine节点生成波动曲线注意要给两个波动设置不同相位最后用Combine节点重组顶点坐标// 顶点动画核心逻辑 float wave1 sin(_Time.y * 0.3 position.x * 0.1) * 0.02; float wave2 cos(_Time.y * 0.7 position.z * 0.15) * 0.03; float3 newPos float3(position.x, position.y wave1 wave2, position.z);3.2 折射效果优化游戏中的水体折射有个常见问题——当视角垂直水面时折射会消失。璃月港的解决方案是使用GrabPass获取屏幕纹理通过Scene Depth节点计算水面到物体的距离用DDX/DDY节点获取像素梯度增强折射细节最终混合时保留10%的原屏幕颜色避免过度扭曲测试时发现一个实用技巧将折射强度与视角角度关联使用Dot(ViewDir, Normal)作为系数这样侧面看时折射更强俯视时更弱。4. 东方美学细节4.1 特殊高光处理西方游戏的水体高光通常是均匀的镜面反射而璃月港的水面高光更像是撒落的金粉创建Custom Function节点生成随机噪点用Step节点过滤出高亮点阈值设为0.95将高光颜色设为金色(RGB: 0.9, 0.8, 0.3)添加轻微闪烁动画sin(_Time.y * 3) * 0.5 0.54.2 边缘光晕效果中国传统水墨画中常用青色晕染边缘这个效果可以用菲涅尔效应(Fresnel Node)控制边缘范围颜色使用青蓝色(RGB: 0.3, 0.6, 0.8)叠加一层Noise扰动避免生硬的边界最终透明度设为0.3左右5. 性能优化技巧在移动设备上运行这类复杂Shader需要注意将不需要实时计算的节点(如颜色混合)移到SubGraph中使用Quality节点区分高低配设备的计算精度水面波动计算改用GPU Instancing创建LOD变体远距离水面使用简化版Shader一个实测有效的优化方案将折射计算从每像素改为每顶点虽然精度略有下降但性能提升40%。具体做法是在顶点着色器中计算折射偏移然后通过TEXCOORD1传递给片元着色器。6. 参数调试心得经过多次测试这些参数组合最接近原版效果基础颜色浅水区RGB(0.12, 0.45, 0.34)深水区RGB(0.22, 0.58, 0.49)波动参数波速0.3和0.7幅度0.02-0.05高光设置密度0.15大小0.03折射强度侧面视角0.1俯视角0.03调试时发现一个有趣现象将波动频率设为无理数比例(如0.3和0.7)比整数比更不容易出现重复图案。另外建议在Scene视图里边调参数边旋转视角观察因为很多效果只在特定角度明显。