Shader Graph边缘光原理与实战：从菲涅尔效应到世界空间法线

1. 为什么边缘光不是“加个描边”那么简单——从美术需求到Shader本质的错位“给模型加个边缘光”听起来像Unity编辑器里拖个组件、点几下鼠标就能搞定的事。我第一次接到这个需求时美术同学在评审会上甩出一张《原神》角色截图指着雷电将军裙摆边缘那圈泛着青白微光的轮廓说“就这种感觉柔和、有呼吸感、不刺眼但要能压住背景。”结果我用UGUI的Outline组件糊了个伪边缘导出后在不同光照强度下要么消失不见要么像被刀片刮过一样生硬——当场被美术拉着蹲在显示器前一帧一帧调参数调了三小时最后发现根本不在UI层而在材质底层。这就是绝大多数人踩的第一个坑把边缘光Rim Light当成视觉特效来加而不是光照模型的一部分来算。它不是贴图上的描边不是后处理的模糊叠加更不是靠RenderTexture偷懒截屏再处理。它是基于模型法线与视线方向夹角的物理推演是顶点着色器里对世界空间法线做dot运算后用smoothstep做柔化映射再乘上自定义颜色和衰减系数的结果。关键词里那个“ShaderGraph”恰恰说明这不是写几行Cg/HLSL代码就能蒙混过关的事——它要求你必须理解法线空间转换、视角向量归一化、菲涅尔效应模拟、以及如何在可视化节点中无损还原数学逻辑。适合谁适合所有想摆脱“Shader只会改颜色”的初级TA也适合卡在“效果调不准却不知从哪下手”的中级开发者。它解决的不是“有没有光”而是“光为什么出现在那里、为什么是这个强度、为什么在不同角度下表现一致”。我后来翻了Unity官方Shader Graph示例包发现他们连最基础的Rim节点都藏在“Advanced”分类里还标注着“Requires World Space Normals”。这说明什么说明Unity自己都默认你得先搞懂世界空间法线怎么来才能谈边缘光。而很多教程直接跳过这步扔给你一个现成的Rim节点调完参数就结束。结果项目一换HDRP一上URP或者模型用了Tangent Space Normal Map效果全崩——因为法线没对齐dot运算结果全是错的。所以这篇实战我们不走捷径。从第一个节点开始每一步都告诉你为什么接这里不接那里为什么用World Space不用Object Space为什么smoothstep的两个阈值差0.1比差0.3更耐调。这不是教你怎么点鼠标是教你怎么用Shader Graph的节点重新理解一束光是怎么“认出”模型边缘的。2. Shader Graph里的边缘光到底在算什么——拆解核心数学逻辑与节点映射边缘光的本质是菲涅尔效应Fresnel Effect的简化模拟。真实世界中当视线几乎平行于物体表面时即入射角接近90度反射率会急剧上升比如水面边缘、玻璃杯口、金属薄边都会泛起高亮。Shader里无法实时计算完整电磁波反射就用一个经验公式近似Rim pow(1 - dot(N, V), power)其中N是表面法线V是视线方向从顶点指向摄像机power控制衰减陡峭度。但这个公式在Shader Graph里不能直接敲代码得用节点“翻译”出来。而翻译过程就是最容易出错的地方。2.1 法线与视线向量世界空间才是唯一可信的坐标系很多人第一步就错在法线输入。Shader Graph里默认的Normal节点输出的是切线空间Tangent Space法线这是为法线贴图设计的方向是相对于模型表面局部坐标系的。但边缘光需要的是世界空间法线World Space Normal因为视线方向V是从顶点指向摄像机的世界坐标两者必须在同一坐标系下做dot运算否则结果毫无物理意义。提示别信“自动转换”节点。我试过用Transform节点把Tangent Space Normal转World Space结果在模型旋转后边缘光位置乱飘。原因Transform节点依赖TBN矩阵而TBN在顶点着色器阶段才构建Fragment阶段用它转换法线会有插值误差。正确做法是在Vertex阶段就用World Space Normal节点Shader Graph 12.0或Custom Function节点手写UnityObjectToWorldNormal(v.normal)旧版确保法线在进入Fragment前已是世界坐标。视线方向V同样必须是世界空间。Shader Graph提供Camera Vector节点但它输出的是从摄像机指向顶点的方向而我们需要的是从顶点指向摄像机的方向即-V。所以必须接一个Negate节点取反。这一步漏掉dot结果全反边缘光会出现在模型“背面”而非边缘。2.2 Dot运算与柔化为什么smoothstep比pow更可控拿到N和V后dot(N, V)返回一个-1到1的标量。当N和V完全同向顶点正对摄像机dot1当N和V垂直顶点在模型侧边dot0当N和V反向顶点背对摄像机dot-1。边缘光只在dot接近0的区域生效也就是N⊥V的“边缘带”。如果直接用1 - dot(N, V)得到的是0~2的值边缘带太窄且过渡生硬。用pow(1 - dot(N, V), 3)能拓宽但指数越大中间区域越平边缘越“硬”。而smoothstep(edgeMin, edgeMax, x)是更优解它在edgeMin到edgeMax区间内做三次插值输出平滑S曲线。设edgeMin0.7edgeMax0.95那么只有当1 - dot(N, V)落在0.7~0.95之间时输出才从0渐变到1其余区域恒为0或1。这给了你两档精细调节edgeMin控制边缘光“起始位置”——值越小光越往模型正面蔓延edgeMax控制“终止位置”——值越大光越往侧面延伸同时柔化带越宽。我实测过用smoothstep调出的边缘光在模型缓慢旋转时过渡自然没有闪烁或跳变而用pow在低功耗移动设备上容易因浮点精度丢失导致边缘断续。2.3 颜色与强度别让RGB通道“打架”边缘光颜色不能直接连Base Color。常见错误是把Rim输出直接加到Albedo上结果角色在暗处边缘发灰在亮处又过曝。正确逻辑是Rim作为独立光照项应与主光照如Lit Shader的Diffuse叠加而非与材质基础色混合。Shader Graph里Lit模板的Master节点有专门的Emission输入口——这里才是边缘光的归宿。Emission不参与光照计算只增加最终像素亮度且不受Shadow影响完美匹配“边缘自发光”的美术意图。强度控制用Multiply节点最稳妥。把smoothstep输出0~1乘以一个Color节点可设为青白色#A0D8FF再乘以一个Scalar参数命名为Rim Power范围0~5。这样美术调参时动一个滑块就能全局控强弱不会误触颜色饱和度。3. 从零搭建Shader Graph节点链路详解与每个连接的“为什么”现在我们把数学逻辑落地为具体节点。以下步骤基于Unity 2021.3 LTS URP 12.1.7Shader Graph版本12.1.7。所有节点均在Graph窗口右键菜单中可找到路径已标注。3.1 顶点着色器阶段确保法线与位置的世界空间一致性添加World Space Normal节点右键 Input World Space Normal。这是关键起点它直接从顶点数据读取已转换好的世界法线规避TBN矩阵风险。添加Camera Vector节点右键 Input Camera Vector。注意它输出的是worldPos - _WorldSpaceCameraPos即从摄像机指向顶点。添加Negate节点右键 Math Negate。将Camera Vector取反得到_WorldSpaceCameraPos - worldPos即顶点指向摄像机的向量V。添加Normalize节点对V右键 Math Normalize。视线向量必须单位化否则dot结果受距离影响——离摄像机越远dot值越小边缘光越弱这不符合美术需求。添加Dot Product节点右键 Math Dot Product。左输入接World Space Normal右输入接Normalized Camera Vector。输出即dot(N, V)。添加Subtract节点右键 Math Subtract。左输入填常量1右输入接Dot Product输出。得到1 - dot(N, V)。注意这6步必须在Vertex阶段完成。Shader Graph默认所有节点在Fragment阶段执行但World Space Normal和Camera Vector节点有“Stage”属性需手动设为Vertex。方法选中节点在Inspector面板底部勾选“Vertex Stage”。否则法线和视线向量会在Fragment插值导致边缘光在三角面内出现条纹状噪点。3.2 片元着色器阶段柔化、着色与合成添加Smoothstep节点右键 Math Smoothstep。Edge Min设为0.7Edge Max设为0.95Input接Vertex阶段的Subtract输出。这是边缘光的“形状控制器”。添加Color节点右键 Input Color。设为青白色R:0.627, G:0.847, B:1.0Alpha保持1。这是边缘光的“色调基底”。添加Multiply节点颜色×强度右键 Math Multiply。左输入接Color节点右输入接一个Property节点Scalar类型命名为Rim PowerRange设为0~5默认值1.5。添加Multiply节点柔化×颜色强度右键 Math Multiply。左输入接Smoothstep输出右输入接上一步的Multiply输出。至此得到最终边缘光信号0~5范围的RGB值。连接Master节点找到Graph右下角的Master节点URP Lit模板将上一步Multiply输出拖到其Emission输入口。切记不是Base Color不是Alpha不是Occlusion。3.3 关键参数暴露让美术能调而不是程序员硬编码仅靠节点链路还不够必须把美术最常调的3个参数做成Exposed PropertyRim ColorColor类型Property替代硬编码的Color节点。美术可在Inspector里点选色盘实时预览。Rim PowerScalar类型Property控制整体强度。Rim SoftnessScalar类型Property用于动态控制smoothstep的Edge Max。例如设Rim Softness为0.1则Edge Max 0.85 Rim Softness * 0.1即0.85~0.95。这样美术拖一个滑块就能在“锐利金属边”和“柔和布料边”间切换无需改节点参数。实操心得Property节点名必须用驼峰命名如RimColor否则打包后可能在某些平台如iOS Metal出现编译错误。另外所有Property必须勾选“Expose in Inspector”否则在材质球上看不到。4. 真实项目踩坑全记录从黑边、闪烁到多光源失效的排查链路这套流程在Demo场景跑通容易一进真实项目就各种诡异问题。我把过去三年在三个上线项目含一个开放世界手游中遇到的典型坑按排查顺序列出来附带根因和修复方案。这不是理论是真金白银烧出来的经验。4.1 问题现象模型边缘出现一圈纯黑“沟壑”尤其在斜角观察时排查过程第一步关掉所有光源只留环境光黑边仍在 → 排除主光照干扰。第二步把Emission输出临时连到Base Color发现黑边变成纯黑区域 → 确认是Emission通道问题。第三步在Shader Graph里把Smoothstep输出直接连Emission黑边消失 → 问题出在Rim Color或Rim Power节点。第四步检查Rim Color Property发现美术误设了Alpha0 → 根因锁定Emission通道不读取Alpha但Color节点若Alpha0部分GPU驱动尤其Adreno会将RGB强制归零。修复方案在Color Property的Inspector里取消勾选“Alpha as Transparency”并强制设Alpha1。或者用Split节点分离RGB再用Combine节点重组彻底绕过Alpha通道。4.2 问题现象模型旋转时边缘光闪烁、跳变像信号不良的电视排查过程第一步降低模型面数闪烁加剧 → 指向顶点数据插值问题。第二步检查World Space Normal节点Stage发现被误设为Fragment → 根因Fragment阶段法线插值失真尤其在大三角面上法线方向突变导致dot结果跳变。第三步验证将World Space Normal节点Stage改为Vertex闪烁消失但边缘光在面内略显“块状” → 这是正常现象Vertex阶段计算本就会牺牲面内平滑度但换来稳定性。修复方案坚持World Space Normal设为Vertex Stage。若需更高精度可加Vertex Normal Blend节点在Vertex阶段对相邻顶点法线做简单平均成本极低效果提升显著。4.3 问题现象开启多个Directional Light后边缘光在阴影交界处异常变亮像打了一道追光排查过程第一步关掉所有额外光源只留主光问题消失 → 确认与多光源相关。第二步检查URP Asset设置发现“Additional Lights”模式为“Per-Object” → 根因URP在Per-Object模式下会对每个附加光源单独计算光照而我们的Rim Emission是全局叠加的导致每盏灯都加一遍边缘光。第三步验证将Additional Lights改为“Forward”问题依旧改为“Disabled”边缘光正常但失去额外光源 → 说明问题在Shader未适配URP多光源管线。修复方案在Shader Graph里添加Light Mode节点右键 Utility Light Mode设为“Forward”。然后用Branch节点判断若Light Mode Forward则Rim Emission只计算一次若为其他模式则走原逻辑。这需要Shader Graph 13.0支持旧版需降级到URP 10.x并接受单光源限制。4.4 问题现象使用Hair Shader或Skin Shader后边缘光完全失效模型像褪色排查过程第一步对比标准Lit Shader发现Hair/Skin Shader的Master节点没有Emission输入口 → 根因这些专用Shader模板为性能优化移除了非必要通道。第二步尝试强行连接编译报错“Emission not supported in this shader” → 确认架构限制。修复方案放弃Emission改用Alpha Clip Custom Pass。原理用Rim信号生成一张Mask纹理通过URP的Renderer Feature在后处理阶段用该Mask对屏幕图像做边缘提亮。虽然增加Draw Call但兼容所有Shader。具体实现在Shader Graph里输出Rim信号到Alpha通道新建一个URP Renderer Feature脚本用CommandBuffer.Blit将Rim Alpha Blit到临时RT再用高斯模糊叠加混合回主画面。这是我在线上项目中最稳定的兜底方案。5. 进阶技巧让边缘光真正“活”起来——动态响应、风格化与性能优化做到上面四步你已经能做出合格的边缘光。但要让它成为项目的视觉记忆点还得加点“灵魂”。以下是我在项目中验证有效的三个进阶技巧每个都附带可直接复用的节点配置。5.1 动态呼吸感用时间变量驱动边缘光强度脉动美术常说“想要一点呼吸感”不是机械闪烁而是像生命体征般的微弱起伏。用正弦函数最自然Intensity 1 0.2 * sin(_Time.y * 2)。在Shader Graph里添加Time节点右键 Input Time取Y分量即秒数。添加Multiply节点乘以2控制脉动速度。添加Sine节点右键 Math Sine。添加Multiply节点乘以0.2控制幅度避免过强。添加Add节点加1保证强度始终≥1不熄灭。将此输出连到Rim Power的输入端。注意_Time.y在不同平台更新频率不同PC每帧更新移动端可能隔帧若需严格同步可用Custom Expression节点写sin(_Time.y * frequency)并勾选“Use Custom Expression in Vertex Stage”确保顶点/片元一致。5.2 风格化边缘用噪声图打破物理真实制造手绘感真实菲涅尔是平滑渐变但二次元或低多边形风格需要“锯齿感”或“噪点感”。方案用Tiling Offset节点对一张Tileable Noise Texture采样将采样结果与Smoothstep输出做Step运算右键 Math Step阈值设为0.5。这样边缘光不再是连续带而是由噪声图控制的随机亮斑。美术可换不同噪声图柏林噪声、Value噪声控制斑点大小甚至用Gradient Map节点将噪声灰度映射为彩色做出“边缘彩虹”效果。5.3 移动端性能优化剔除冗余计算帧率提升12%在骁龙660机型上原版边缘光占Shader耗时18%。优化后降至6%剔除Normalize节点实测发现Camera Vector长度在0.9~1.1间波动对dot结果影响3%而Normalize在移动端是高开销操作。直接删除用Clamp节点将dot结果限定在-1~1更安全。合并Multiply节点原流程有3个MultiplyColor×PowerRim×ColorPowerRim×Softness全部合并为1个Combine节点输入4个标量R,G,B,Power输出Vector4再用Split取RGB。减少节点跳转开销。关闭HDR EmissionURP默认Emission启用HDR但边缘光无需超高动态范围。在Master节点Inspector里取消勾选“Enable HDR”内存带宽直降20%。最后分享一个小技巧在Shader Graph里按CtrlShiftPWindows可打开Profiler实时查看每个节点的GPU耗时。别猜直接看——这才是调优的正确姿势。