Unity消融效果Shader实现：动态着色与边缘高亮全解析

Unity消融效果Shader实现：动态着色与边缘高亮全解析

发布时间：2026/9/4 18:48:30
Unity消融效果Shader实现：动态着色与边缘高亮全解析 怪物溶解、角色被烧成灰烬、物体随时间剥落这类效果在项目里通常需要一段“消融”过渡来衔接死亡与残留物出现的节奏。之前我带的小组做技能演示时需求方给的关键词就三个Unity、动态着色、消融效果。听起来简单真做起来发现难点不在“把模型裁掉”而在“裁得自然、边缘有光、颜色跟着消融进度走”。这篇我按自己实际落地的思路来拆从Shader原理讲到C#侧驱动再到Shader Graph的可视化做法中间穿插我踩过的一些坑。适合正在做技能特效、需要给物件或角色做溶解过渡的Unity开发者尤其是刚接触Shader不久、想直接拿到一套可改源码的同学。1. 在写代码之前先想清楚你要的是哪种“消融”很多人第一次做消融第一反应是去调材质的透明度用半透明方式让模型慢慢隐形。这个方法做静态物体可能还行但放在角色死亡或怪物消失的场景里问题会立刻暴露物体边缘会变成半透的“玻璃状”内部结构看得见颜色过渡也不好看。消融效果真正做的是像素级别的丢弃也就是不满足条件的片元直接不要了而不是把半透明混合打开。这种“硬裁剪”会让模型像被一张看不见的贴图逐帧蚕食蚕食边界再用高亮颜色做过渡视觉上就有“烧灼剥离感”。这也是消融和普通淡入淡出最大的区别淡出是整体变透明消融是从局部开始逐步消失。我建议项目里需要这种效果时优先尊重硬件裁剪的流程配合一张控制腐蚀范围的贴图来做。这么做可以保留深度写入不用考虑透明物体的渲染排序后续接到多角色同屏时也会省心很多。1.1 消融和普通透明材质的差别先看透明流程。Unity里开Transparent队列、启用Blend后物体会进入半透明渲染管线按距离从远到近排序。听起来不复杂可一旦模型自身有交叉面、多个角色穿插站在一起排序经常出幺蛾子A角色的手臂会莫名其妙穿到B角色脸上。消融走的是裁片元路线裁剪完剩下的部分仍然是不透明的深度写入照常工作。所以同样一句Shader里用clip或discard的渲染结果比单纯调alpha值的方案可靠得多。代价也很明确被裁掉的像素不代表不存在GPU还是会跑到片元阶段才判断要不要扔掉。后面讲性能时我会再说怎么减少这种无效消耗。1.2 “动态着色”到底在给效果加分什么如果只是把clip阈值拉低、把模型吃掉一部分边缘会是一条单纯被切开的截面看起来像做了个布尔运算和游戏里那种“高温烧蚀”的质感差很远。动态着色的价值在于让颜色和消融进度形成联动越靠近裁切边界的像素越亮或者从一种灼烧核心色过渡到高亮边缘色消融进度往前推高亮带也跟着往前跑。很多新手写Shader时会把边缘颜色用一个固定值写死那样在不同光照下和不同消融阶段看起来都特别“假”。我这里说的“动态”既指颜色本身随阈值变化也建议你用一张渐变纹理或一组可调色来做过渡而不是把逻辑焊死。2. 准备素材和Shader输入设计做消融不一定要多复杂的节点核心输入其实就两类颜色来源的主纹理以及决定“哪里先消失”的腐蚀掩码图。腐蚀掩码可以是一张贴图也可以用程序噪声实时算但考虑到不同平台表现一致性我强烈建议准备一张可复用的灰度图。工程落地的时候你还得决定自己用的渲染管线和Shader怎么写。很多项目现在切到了URPShader代码里包含文件和宏命名都和内置管线不一样这部分不提前确认后面容易白写一大段。2.1 主贴图之外准备一张合适的腐蚀掩码腐蚀掩码的作用是告诉Shader模型表面哪些区域优先被烧掉。一般用R通道灰度图黑色代表“先消失”白色代表“留到最后”。贴图选择上不是越花哨越好。噪声太细会在模型表面产生细碎的麻点边缘不稳定看起来像模型发霉而不是消融。建议使用低频的Perlin噪声、云状噪声或者自己拿雕刻笔刷在灰度图上刷出大块的斑驳分布。如果希望消融从物体下方往上蔓延可以让掩码上半部分偏白、下半部分偏黑如果希望从中心向外扩散就往中心放白、四周放黑。还有一个容易踩的细节模型UV如果接缝明显一张平铺噪声贴图会顺着接缝露出“贴纸感”。解决的办法是用模型的世界坐标参与采样或者把噪声图的平铺Tiling调大让接缝因为采样区域不连续而变得不明显。但对大多数角色来说直接在模型UV下采样只要掩码够平滑效果就已经够用。2.2 参数规划阈值、边缘宽度、边缘色Shader参数设计直接决定这个效果之后能怎么被玩法侧的同事调节。我习惯把这几个参数全部暴露到Properties里参数类型作用_ThresholdFloat0到1控制消融进度由脚本驱动_EdgeWidthFloat0.001到0.3控制高亮边缘的范围大小_EdgeColorColor边缘火焰高亮色_BurnColorColor靠近内侧的灼烧暗色_GlowIntensityFloat0到5边缘发光强度_Threshold是全局进度脚本从0往1推模型会从掩码黑色区域开始逐渐消失。_EdgeWidth决定边缘色带多宽值太小时高亮可能只有一两个像素在低分辨率下会闪值太大整个保留区域会泛白失去“从边界向内渐暗”的层次。_EdgeColor和_BurnColor如果我建议用一个词形容就是“冷暖搭配”。_EdgeColor偏橙黄_BurnColor偏暗红或黑色交界的视觉说服力会比单一颜色好很多。想让效果更丰富时还可以再加一张火焰渐变纹理用“离边缘的距离”去采样这张纹理后面3.5会细说。2.3 渲染管线和Version兼容要提前确认如果你项目用的是URP手写Shader时文件头建议直接includeURP的Core.hlsl。SRP环境下材质参数如果要兼容SRP Batcher还要包一层CBUFFER。内置管线写法用CGPROGRAM和UnityCG.cginc虽然也能跑但项目升级管线后就得重写一遍。另外属性声明之后C#侧通常通过名称做索引这些名字前后要保持一致。我遇到团队协作时最常见的问题是美术在Shader里改了属性名但程序脚本还在SetFloat旧名字导致运行时报“Property not found”或者效果无变化。最好约定属性名命名后用全局静态字符串常量管理别在几个脚本里各写一遍魔法字符串。3. 从零写一份可运行的消融Shader代码这部分我基于URP管线的Unlit风格来写因为消融通常作为特效而非正式场景光照的一部分用Unlit能让边缘颜色表现更直接不受光照角度干扰。想接光照的可以在这个基础上换成Lit的输入结构但核心的clip和边缘计算是通用的。完整Shader如下你可以直接建一个Shader文件测试Shader Custom/DissolveUnlit { Properties { _MainTex (Main Texture, 2D) white {} _NoiseTex (Dissolve Mask, 2D) white {} _Threshold (Threshold, Range(0, 1)) 0.0 _EdgeWidth (Edge Width, Range(0.001, 0.5)) 0.1 _EdgeColor (Edge Color, Color) (1, 0.6, 0.2, 1) _BurnColor (Burn Color, Color) (0.1, 0.05, 0.05, 1) _GlowIntensity (Glow Intensity, Range(0, 8)) 1.5 } SubShader { Tags { QueueAlphaTest RenderTypeTransparentCutout IgnoreProjectorTrue } Pass { HLSLPROGRAM #pragma vertex vert #pragma fragment frag #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl struct Attributes { float4 positionOS : POSITION; float2 uv : TEXCOORD0; }; struct Varyings { float4 positionHCS : SV_POSITION; float2 uv : TEXCOORD0; }; TEXTURE2D(_MainTex); SAMPLER(sampler_MainTex); TEXTURE2D(_NoiseTex); SAMPLER(sampler_NoiseTex); CBUFFER_START(UnityPerMaterial) float4 _MainTex_ST; float4 _NoiseTex_ST; float _Threshold; float _EdgeWidth; float4 _EdgeColor; float4 _BurnColor; float _GlowIntensity; CBUFFER_END Varyings vert(Attributes IN) { Varyings OUT; OUT.positionHCS TransformObjectToHClip(IN.positionOS.xyz); OUT.uv TRANSFORM_TEX(IN.uv, _MainTex); return OUT; } half4 frag(Varyings IN) : SV_Target { half4 albedo SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv); half mask SAMPLE_TEXTURE2D(_NoiseTex, sampler_NoiseTex, IN.uv).r; half offset mask - _Threshold; clip(offset); half edgeFactor 1.0 - saturate(offset / max(_EdgeWidth, 0.001)); half3 edgeMix lerp(albedo.rgb, _EdgeColor.rgb, edgeFactor); edgeMix lerp(edgeMix, _BurnColor.rgb, edgeFactor * edgeFactor); half glow edgeFactor * edgeFactor * _GlowIntensity; half3 finalColor edgeMix _EdgeColor.rgb * glow; return half4(finalColor, 1.0); } ENDHLSL } } }3.1 顶点函数保持原样重心放在片元阶段这个Shader的顶点阶段没有做特殊处理只做常规坐标变换和UV传递。原因很简单消融的裁剪是逐像素判断顶点阶段没法决定哪个三角形的小部分该消失只能把所有顶点照常送进去到片元阶段再决定取舍。顶点函数代码量少不代表可以省略。TransformObjectToHClip是URP下把模型坐标转到裁剪空间的标准方式如果你的项目用的是内置管线这里要换成UnityObjectToClipPos。第一次从内置管线迁到URP时很多人栽在这个宏名上。3.2 片元阶段的核心逻辑用mask和threshold算offset片元阶段做了三件事第一采样主纹理得到albedo这是模型本身的颜色。第二采样噪声贴图R通道得到mask这个值的范围一般是0到1。第三用mask减去阈值得出offset如果offset小于0说明该像素所在区域应该被消融掉。clip(offset)是整段代码的执行开关。offset为负数的片元会被丢弃剩下的片元才能继续算颜色。为什么要用减法再clip而不是直接把threshold塞到clip里因为offset在后续还要用来计算“离边缘的距离”。用一个值承担两件事可以避免重复计算也让边缘宽度和裁切边界在同一个坐标空间里对齐。3.3 边缘色带的算法不要反过来写edgeFactor的计算是消融效果里最容易写晕的地方。思路是从边界向内部补色offset在0附近时像素正好卡在裁切边缘上edgeFactor接近1整个像素会强烈显示边缘色offset大于_EdgeWidth后像素离边缘很远应该保留原本纹理色所以edgeFactor收敛到0。我用的是half edgeFactor 1.0 - saturate(offset / max(_EdgeWidth, 0.001));反过来如果直接用saturate(offset / _EdgeWidth)那边缘最亮的地方会出现在靠内部区域边界外反而被裁掉看不见效果会恰恰相反。这里加max(_EdgeWidth, 0.001)是为了防止美术把_EdgeWidth拉到0时出现除以0的异常Shader虽然不会崩但结果不可控。3.4 灼烧暗色和发光的叠加顺序拿到edgeFactor后我把_EdgeColor和_BurnColor分开处理half3 edgeMix lerp(albedo.rgb, _EdgeColor.rgb, edgeFactor); edgeMix lerp(edgeMix, _BurnColor.rgb, edgeFactor * edgeFactor); half glow edgeFactor * edgeFactor * _GlowIntensity;这样在边缘最外侧edgeFactor最大先混入亮色再乘一次edgeFactor让_BurnColor在更靠近边缘的极小范围内出现形成“暗红核心 橙黄外圈”的分层。_BurnColor用乘方曲线而不是线性混入是因为直接线性混会显得边缘很脏用二次曲线能把暗色压缩到更窄的一圈远看就更像高温熔断的截面。3.5 边缘渐变改成动态渐变纹理采样这里加一个进阶技巧。如果需求方总说固定颜色不够好看我会给Shader加一张一维渐变纹理_GradientTex让颜色沿边缘距离连续变化half edgeFactor 1.0 - saturate(offset / max(_EdgeWidth, 0.001)); half3 gradientColor SAMPLE_TEXTURE2D(_GradientTex, sampler_GradientTex, float2(edgeFactor, 0.5)).rgb; half3 finalColor lerp(albedo.rgb, gradientColor, edgeFactor);渐变纹理上左边放暗红、中间放亮橙、右侧放偏白的高光色效果会比两个固定Color丰富很多。美术调渐变纹理也更直观不用在Shader里反复改数值。这种“用变量去采样一维贴图”的做法其实就是动态着色最实用的扩展方向之一。4. 用Shader Graph做一套快速效果如果团队里没有专职TA或者你只是想快速验证代码版效果Shader Graph也可以搭出消融。URP下右键Create - Shader Graph - URP - Lit Shader Graph然后把Surface Type设为Opaque启用Alpha Clipping。4.1 基础连线思路新建两个Sample Texture 2D节点一个采样主纹理一个采样噪声贴图。取噪声贴图R通道减去Threshold属性输出到Fragment阶段的Alpha通道同时把Alpha Clip Threshold设为0。Shader Graph会把小于0的Alpha像素裁掉和手写clip(offset)等价。颜色部分用Lerp节点混合主纹理和边缘色Lerp的Alpha输入来自平滑后的边缘宽度范围。手写Shader里我用offset算edgeFactorShader Graph里可以用Smoothstep节点EdgeWidth做上下限offset经过Smoothstep后再和1相减得到边缘因子。4.2 Shader Graph的坑点Shader Graph的Alpha Clip单位是最终Alpha不是噪声通道所以你如果用Step节点输出0或1到Alpha边缘只有硬切没有过渡。正确做法是把mask - threshold接Smoothstep再输出到Alpha才能让边缘保留渐变信息。另外如果Shader Graph的Lit Shader开了阴影投射而噪声贴图采样没有同步到ShadowCaster Pass里就会看到模型本体已经消掉一块但地上的影子还完整。我一般直接关掉Cast Shadows或者在ShadowCaster侧加同样的噪声减阈值逻辑具体看项目需要。5. 把消融接到玩法里的注意点Shader写完后C#侧要考虑的其实更多。例如材质共享导致所有怪物一起消失、消融到最后一层皮迟迟不结束、或者多个对象并排时消失花纹完全一样这些都是我实战里碰到过的。5.1 用C#驱动消融进度最直观的驱动方式是拿材质实例改参数public float duration 1.5f; public float delay 0f; private Material mat; private float startTime; void Start() { mat GetComponentRenderer().material; mat.SetFloat(_Threshold, 0f); } void Update() { float t Mathf.Clamp01((Time.time - startTime - delay) / duration); mat.SetFloat(_Threshold, t); }这个方法的问题是GetComponent ().material会创建新的材质实例如果场景里有大量怪物同时消融实例化材质数量会增多。但好处是每个对象的_Threshold互不影响适合数量不多的特效演出。如果怪物数量多建议改用MaterialPropertyBlock它不会产生材质实例private MaterialPropertyBlock block; void Update() { if (block null) block new MaterialPropertyBlock(); GetComponentRenderer().GetPropertyBlock(block); block.SetFloat(_Threshold, t); GetComponentRenderer().SetPropertyBlock(block); }5.2 消融到末尾的残留问题Threshold距离1很近时模型表面可能只剩几小片孤立的“碎屑”。这些碎屑因为掩码中存在偏白的噪点而残留视觉上很像贴纸没撕干净。解决办法是把Threshold从逻辑上限制到0.98脚本端到达这个值后直接播放一个碎屑粒子然后SetActive(false)。不要真把Threshold拉到1尤其当噪声图里有纯白像素时会因为浮点精度问题导致那部分永远消不掉让一个空物体粘在原地。5.3 阴影与相机裁剪同步手写Shader如果只写了颜色Pass没有ShadowCaster Pass光照会计算正确但阴影不会配合消融。角色在墙边消失时墙上的投影可能还保持完整的人形非常出戏。解决办法是补一个ShadowCaster Pass并在其中复制同样的噪声采样与clip逻辑。对于URP项目如果直接使用Lit Shader或Shader Graph影子会使用材质透明度裁切逻辑。手动管理时务必给SubShader补上LightMode ShadowCaster的通道。5.4 常见问题速查表现可能原因处理办法边缘大面积闪烁噪声贴图高频细节过多或没有生成Mipmap换低频噪声勾选Generate Mip Maps放大UV平铺高亮边缘过窄、几乎看不到_EdgeWidth取值太小或贴图采样过滤不柔和增大_EdgeWidth到0.05以上采样方式改双线性多个怪物一起消失用了同一个Material实例并直接SetFloat改用MaterialPropertyBlock或实例化材质内部颜色发黑没有过渡edgeMix叠加顺序不对检查_BurnColor乘方项不要先压暗再混亮地上的影子不跟着消失缺少ShadowCaster裁剪逻辑补ShadowCaster Pass复制clip计算载入时Shader报错管线宏不匹配检查URP Core.hlsl引用或Shader Graph目标管线6. 效果再进阶让“消失顺序”更有故事性很多朋友做完基础消融后会觉得效果“能用但不惊艳”。问题往往出在mask选择上——它决定了消失顺序是否有趣。如果只是全表面随机噪点观感会偏向“被虫子吃掉”很少有叙事性。想让角色从脚下开始蒸发可以在mask之上再叠加一个高度权重half heightFactor saturate(IN.positionWS.y / _MaxHeight); half maskWithHeight saturate(heightFactor * 0.6 noiseMask * 0.4);这样越靠上的部分越容易保留越靠下的部分越先消失适合“升天”“被地面吞噬”的演出。反过来用1减高度可以做成沙化或上半身先消失。权重比例要根据实际模型调如果模型中心点放在脚下通常0.5比0.4更能拉开层次。如果场景里有多个结构相同的敌人又在同一时间消融噪声图采样的uv相同会导致花纹完全一样观感很假。解决思路是给uv加一个随机偏移block.SetFloat(_MaskOffsetX, Random.Range(0f, 1f)); block.SetFloat(_MaskOffsetY, Random.Range(0f, 1f));Shader里把这两个值和uv相加让同一张贴图在不同物体上错开位置。对于大量的小兵“同时灰飞烟灭”那类演出这个小细节非常值得提前加入。另外如果项目需要的是“溶解出一个洞然后人物倒地”建议把消融范围限定在一个局部区域而不是让全模型都消失。做法是把噪声阈值改为一张局部遮罩在遮罩区域内裁切遮罩区域外始终保留。这样玩家能清楚看到命中位置伤害反馈更明确。7. 性能心态与真机验证的一点提醒clip在PC上很廉价但在移动端部分机型上片元阶段的discard会阻止某些GPU优化并且所有裁掉的像素仍要跑一遍片元函数前的插值计算。所以消融对象数量一多填充率就会被吃掉。我通常建议同一时刻主动消融的对象不超过四到五个其余对象用本身透明度淡出或播放死亡动画来过渡。写Shader时也要注意采样数量的控制。每一步tex2D都在增加移动端带宽压力。这里一个消融Shader至少两次纹理采样主纹理、噪声纹理如果加了渐变纹理还得多采一次。要是放在大量角色上可以把主纹理去掉直接用单色和渐变来表现省一半带宽。最后给一个真机验证建议不要只在编辑器里看效果尤其不要在Scene视图打开“Always Refresh”时看到效果好就认为没问题。把Shader打到一个低端Android包上检查火焰边缘在远景镜头下有没有摩尔纹、消失过程中是否掉帧。消融这类效果在编辑器里永远比真机看起来平滑因为编辑器会忽略很多移动端GPU的执行代价。我之前有个项目就是开发机里洋洋洒洒做了全套渐变、多次采样一到测试机上模型少于10帧。后来把渐变改成查表噪声降为一次采样把额外的高光计算挪到C#侧控制才把性能拉回正常范围。做效果的技术人员最怕的往往不是Shader复杂而是太晚知道自己为“华丽”付出了多少代价。所以基础消融效果跑通后先别急着堆更多节点。你先关掉V-Sync再看帧率再切手机模式看发热最后再考虑要不要加更花哨的火焰扭曲和粒子爆点。这套流程走完效果才真正经得起验收。