1. 项目概述为什么选择ShaderGraph做火焰特效最近在做一个独立游戏项目里面有个篝火场景需要火焰特效。一开始我打算用粒子系统调了半天效果是有了但总觉得差点意思——要么动态感不够自然要么性能开销有点大移动端上跑起来帧率波动明显。后来我琢磨着能不能用Shader来实现毕竟GPU干这个活儿是专业对口。但一想到要手写Shader代码头皮就有点发麻各种数学计算和管线状态管理调试起来太费时间。就在这时我注意到了Unity的ShaderGraph。这玩意儿是个可视化着色器编辑器不用写代码靠连接节点就能做出复杂的Shader效果。对于像我这种更偏向玩法和逻辑的程序员或者美术同学来说简直是福音。我决定拿火焰特效这个经典案例来试试水目标很明确用一张静态的火焰贴图配合ShaderGraph的几个核心节点在5分钟内拼出一个能实时动态变化的、效果不错的火焰特效。这个思路的核心优势在于它极大地降低了技术美术的门槛让动态效果的创作变得像搭积木一样直观并且因为是基于Shader的所以性能通常比复杂的粒子系统更优尤其适合需要大量重复实例的场景比如战场上的火星、魔法阵的边缘光效等。2. 核心思路拆解一张贴图如何“动”起来传统上一个静态的贴图在模型上是“死”的。我们要让它模拟出火焰燃烧时那种摇曳、扭曲、上升的动态关键就在于对贴图的UV坐标进行“扰动”。简单来说UV坐标决定了贴图上的哪个像素被采样并显示到模型的哪个位置上。如果我们能让UV坐标随着时间变化那么即使贴图本身是静态的其呈现出来的画面也就“动”了。ShaderGraph实现这个目标的思路非常清晰主要分为三个步骤我把它称为“动态火焰三要素”制造基础扰动这是动态的源头。我们需要一个随时间变化的、连续的噪声Noise图案。ShaderGraph提供了多种噪声节点比如Simple Noise或Gradient Noise。这些噪声图本身具有随机但连续的特性我们让它的采样坐标随着时间偏移就能得到一个不断流动变化的噪声场。这个噪声场就是我们用来扰动UV的“力量”。应用扰动到UV将上一步生成的、随时间变化的噪声值叠加到原始的UV坐标上。比如原始UV是(u, v)我们加上一个由噪声生成的(noiseX, noiseY)新的UV就变成了(u noiseX, v noiseY)。这样采样贴图的位置每一帧都发生微小的、不规则的变化静态火焰贴图的边缘就会产生扭曲、摇曳的效果。这里通常会对V方向通常是向上的方向施加更强的扰动模拟火焰向上窜动的感觉。塑造火焰形态与动态单纯的UV扰动会让整个贴图都“糊掉”。我们需要控制扰动的强度和范围。通常我们会利用一张灰度图作为遮罩Mask比如一个从下到上从白到黑的渐变。在遮罩白色值大的区域扰动强度大火焰扭曲剧烈在遮罩黑色值小的区域扰动强度小甚至没有火焰保持相对稳定。这样就能塑造出火焰底部扰动强、顶部逐渐消散的自然形态。同时我们还会让这个遮罩或整个扰动场沿着V方向缓慢滚动模拟火焰向上燃烧、更新的过程。基于这个思路我们需要的核心节点其实并不多一张噪声图或噪声节点、一张静态火焰贴图、一个用于混合扰动的Lerp节点、一个提供时间输入的Time节点以及进行数学计算的Add、Multiply节点。下面我们就进入实战环节看看如何用这些“积木”搭出火焰。3. 实战步骤5分钟节点连接指南打开Unity创建一个URP Lit或Built-in管线下的PBR GraphShaderGraph。我们从头开始搭建。3.1 准备输入与贴图首先在Blackboard变量列表中创建几个属性方便我们在材质球上调节Flame Texture(Texture2D): 这就是我们那张静态的火焰贴图。建议使用带有透明通道Alpha的PNG这样火焰边缘才能柔和。Noise Scale(Vector1): 控制噪声的“密度”或“缩放”。值越大噪声图案越细小、密集。Distortion Strength(Vector1): 控制UV扰动的整体强度。Scroll Speed(Vector1): 控制噪声或遮罩向上滚动的速度。然后将关键的系统节点拖入画布Time节点提供不断增长的时间值是所有动画的驱动源。UV节点提供模型原始的纹理坐标。Sample Texture 2D节点用于采样我们的Flame Texture和噪声图。3.2 构建动态噪声场拖入一个Gradient Noise节点。将其UV端口连接到UV节点。将Blackboard中的Noise Scale变量连接到Gradient Noise节点的Scale输入端口。你可以先设置为50左右看看效果。为了让噪声“流动”起来我们需要让它的采样坐标随时间变化。创建一个Vector 2类型的节点。将Time节点的Time输出端口注意不是Sine Time乘以Scroll Speed得到一个随时间增长的值。将这个值作为Vector 2的Y分量X分量设为0因为我们主要希望火焰向上运动。将这个Vector 2与原始的UV相加然后将结果连接到Gradient Noise节点的UV端口。现在Gradient Noise节点采样的是一个随时间向上移动的坐标其输出的噪声值就会产生连续的、向上流动的变化。注意这里有一个常见技巧。直接使用Time * Speed会导致数值快速增长可能造成UV偏移过大、效果失真。一个更稳定的做法是使用Fraction节点对Time取小数部分让数值在0-1之间循环这样动画就是无缝循环的。但对于火焰这种不需要精确循环的自然现象直接用Time问题也不大。3.3 应用扰动与遮罩现在我们将动态噪声应用到UV上。将Gradient Noise节点的Out端口一个0-1的灰度值乘以Distortion Strength比如0.1以控制扰动强度。将这个强度值转换为一个二维向量。通常火焰在水平方向U和垂直方向V的扰动可以不同。我们可以创建两个Float参数Distort X和Distort Y分别乘以噪声值再组合成Vector 2。为了简单起见这里我们可以直接用同一个强度值创建一个Vector 2比如(强度, 强度*1.5)让垂直方向的扰动稍强一些更符合火焰向上窜的物理直觉。将这个扰动向量与原始的UV相加得到被扰动后的新UV坐标。使用这个扰动后的UV去采样Flame Texture。将Sample Texture 2D节点的UV端口连接到扰动后的UVTexture端口连接到Flame Texture属性。此时如果你将生成的材质赋给一个面片Quad应该已经能看到一个扭曲的、动态的火焰了。但它可能看起来像一团均匀扭曲的云缺乏火焰底部强烈、顶部柔和的形态。3.4 塑造火焰形态我们需要一个遮罩来定义火焰的形状和扰动强度分布。最常用的方法是使用UV节点的V通道即Y坐标。因为UV的V值从下到上通常是0到1这正好对应火焰从根部到顶部的衰减。拖入一个Split节点连接到UV节点取其G通道即V值。我们可以对这个V值进行一些处理。比如用一个Power节点对其做幂运算例如0.5可以让底部区域值小的范围扩大顶部衰减更快从而改变火焰的形状比例。关键一步用这个处理后的V值我们称之为Mask去调制扰动强度。将之前计算好的扰动向量与Mask值相乘。这样在V值小底部的地方扰动被保留甚至增强如果Mask设计得当在V值大顶部的地方扰动被减弱为0火焰贴图恢复原始采样形成逐渐消散的效果。将调制后的扰动向量再与原始UV相加用于最终采样。此外为了让火焰有“向上生长”的生命感我们还可以让这个Mask本身也随时间缓慢上移。将Time * Scroll Speed的一个较小值加到UV的V分量上再去做拆分和计算就能实现火焰形态整体的向上滚动。3.5 最终合成与输出经过扰动和遮罩处理后采样得到的火焰颜色连接到Master Stack或Fragment上下文的Base Color。火焰贴图的透明通道Alpha是控制火焰边缘渐隐的关键。将Sample Texture 2D节点的Alpha输出端口连接到Master Stack的Alpha。确保材质的渲染模式Surface Type设置为Transparent混合模式Blend Mode设置为Alpha或Additive相加混合适合发光体。重要技巧为了让火焰更生动我们可以用噪声对Alpha通道也进行轻微的扰动或乘法操作。例如将采样到的Alpha乘以一个由另一组噪声生成的、范围在0.8到1.2之间的值可以让火焰的透明部分产生不均匀的、闪烁的效果更像真实火焰。至此一个基本的动态火焰ShaderGraph就搭建完成了。从创建Graph到连接完主要节点熟练的话确实可以在5分钟内搞定框架。剩下的就是微调参数Noise Scale控制火焰细节的粗细、Distortion Strength控制扭曲的剧烈程度、Scroll Speed控制燃烧的快慢以及遮罩的曲线直到获得满意的视觉效果。4. 节点深度解析与参数调优心得虽然节点连接起来了但每个节点的参数设置都大有讲究。这里分享一些我踩过坑后总结的调优心得。4.1 噪声节点的选择与参数ShaderGraph提供了Simple Noise和Gradient Noise等。对于火焰Gradient Noise梯度噪声产生的噪声图案更平滑过渡更自然非常适合模拟流体、烟雾、火焰这种有机形态。强烈推荐作为首选。它的Scale参数控制频率值越小噪声块越大火焰的“大结构”越明显值越大噪声越细碎火焰更像小火苗。Simple Noise对比更强烈边缘更硬。如果想做那种带有尖锐火星爆裂感的火焰可以尝试混合一点Simple Noise。一个高级技巧是使用多层噪声。用一个大Scale如30的噪声控制火焰整体的大幅度摆动再用一个小Scale如150的噪声叠加在上面控制细节的小幅度颤动。将两层噪声以不同的速度和强度混合能立刻让火焰的动态层次感丰富起来。混合时可以使用Add节点但要注意加和后可能超过1需要用Clamp节点或乘以一个小于1的系数来限制范围。4.2 UV扰动向量的艺术扰动向量(distortX, distortY)的设置直接决定火焰的“性格”。对称扰动distortX distortY火焰会向各个方向均匀扭曲像在水中扩散的墨水缺乏方向性。非对称扰动distortY distortX例如2:1。这是模拟火焰的关键。因为热空气上升火焰整体形态是向上的所以垂直方向的扰动应该占主导。这能自然形成火焰向上窜动的视觉趋势。扰动与遮罩的联动绝对不要用固定的扰动强度。一定要用基于UV V值的遮罩去调制它。我常用的公式是最终扰动 基础扰动向量 * (Mask ^ MaskPower)。这里的MaskPower是一个可调参数。当MaskPower小于1时Mask的衰减曲线变缓底部强扰动区域变大火焰显得粗壮、稳定当MaskPower大于1时衰减曲线变陡强扰动区域集中在很窄的底部火焰显得细长、跳跃。4.3 颜色与发光增强基础的火焰贴图可能颜色不够鲜艳。我们可以在ShaderGraph里进行后期处理颜色曲线在采样贴图后连接一个Color类型的属性Flame Tint用Multiply节点混合可以随时调整火焰的整体色调如偏向橙红或蓝紫。内部亮度火焰中心应该更亮。我们可以利用Mask即UV的V值但可以取反1-V让根部值大来创建一个中心亮、边缘暗的效果。将Mask连接到Emission自发光端口并乘以一个强度系数。这样火焰就能自发亮了在暗场景中效果拔群。边缘软化采样到的Alpha通道可以直接用但如果想让火焰边缘更柔和可以对其使用Smoothstep节点。Smoothstep需要三个值边缘阈值、边缘阈值、平滑度。通过调节可以让Alpha从0到1的过渡更加平滑自然避免出现锯齿状的硬边。5. 性能考量与常见问题排查5.1 性能优化要点用ShaderGraph做的特效虽然比粒子系统省但不当使用也会成为性能瓶颈。纹理采样次数检查你的Graph。每多一个Sample Texture 2D节点就多一次纹理采样Texture Fetch这是GPU上的重要开销。本例中我们只采样了一次火焰贴图。噪声是通过程序化节点Gradient Noise生成的这比采样另一张噪声贴图要高效得多。尽可能使用程序化噪声节点而非噪声贴图。节点计算复杂度Fraction、Sin、Noise这类数学运算节点开销相对较低。但要避免在片段着色器Fragment中进行非常复杂的、全屏性的计算。我们的计算主要基于UV且每个像素的计算量是恒定的、可控的。渲染状态Transparent渲染类型和Alpha Blending意味着物体需要从后往前排序渲染可能造成Overdraw过度绘制。如果场景中有大量火焰面片尽量合并Batch或使用GPU Instancing。对于移动平台可以评估是否能用Cutout镂空替代半透明或者使用更简单的Additive混合。面片数量与大小用一个面片配合Shader模拟火焰通常比用几十个粒子来模拟要高效。但面片本身不要太大以免覆盖过多像素。5.2 常见问题与解决方案下面是一个快速排查表格列出了我实战中遇到的一些典型问题问题现象可能原因解决方案火焰全黑或不显示1. 主纹理Sample Texture 2D节点未正确连接。2. 材质球未正确赋值纹理。3. 渲染模式错误如Opaque。1. 检查节点连线确保UV和Texture输入正确。2. 在材质Inspector面板检查贴图引用。3. 将材质的Surface Type改为Transparent。火焰没有动态效果1.Time节点未参与计算。2. 噪声节点的UV输入没有随时间变化。3.Scroll Speed等参数为0。1. 确保Time节点输出连接到影响UV或噪声偏移的计算中。2. 检查噪声UV输入端是否连接了UV (Time * Speed)的结构。3. 调大Scroll Speed和Distortion Strength参数。火焰扭曲过度变成一团乱码Distortion Strength参数值过大。逐步减小Distortion Strength从0.01开始尝试。扰动是细微调整不是大幅位移。火焰形态僵硬像一张纸片缺乏基于V轴的遮罩控制扰动均匀作用于整个面片。引入UV的V通道作为遮罩与扰动强度相乘。确保火焰顶部的扰动弱于底部。火焰边缘有锯齿Aliasing1. 火焰贴图本身分辨率不足或边缘太硬。2. Alpha通道过渡不平滑。1. 使用更高质量、边缘柔和的源贴图。2. 在ShaderGraph中对采样的Alpha使用Smoothstep函数进行平滑处理。在游戏窗口中看效果正常但构建后失效可能使用了Built-in管线的ShaderGraph但项目是URP或反之。确保创建的ShaderGraph与项目渲染管线匹配。URP项目应使用Universal Render Pipeline/Lit等模板。多个火焰实例动态完全一样所有实例共享同一套基于全局Time的动画缺乏随机性。在扰动计算中引入每个实例的独有ID。可以通过脚本将_Time偏移一个随机值传递给材质或在ShaderGraph中获取物体的世界坐标参与噪声计算让每个火焰的“相位”不同。关于“随机性”的补充让每个火焰实例动态不同是提升真实感的关键。除了通过脚本传递随机偏移一个纯Shader的方法是将模型的世界空间位置World Position的XZ分量忽略Y避免上下移动导致变化作为噪声的额外输入。例如扰动UV 原始UV Time * Speed WorldPos.xz * 0.1。这样位置不同的火焰其噪声起点就不同动态自然就区分开了。最后再分享一个让火焰“活”起来的小技巧除了主扰动可以再添加一个频率很高、强度很弱的次级噪声专门用来乘以最终输出的颜色或Alpha的某个通道。这个高频噪声模拟的是火焰表面极其细微的、快速的闪烁和抖动能极大增强视觉上的细节感和真实感。这个技巧几乎适用于所有需要表现动态流体的Shader成本很低但收益非常高。