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 Graph）ShaderGraph。我们从头开始搭建。
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端口连接到扰动后的UV，Texture端口连接到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通道作为遮罩，与扰动强度相乘。确保火焰顶部的扰动弱于底部。 |
| 火焰边缘有锯齿（Aliasing） | 1. 火焰贴图本身分辨率不足或边缘太硬。 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，成本很低，但收益非常高。
