Unity ShaderGraph 可视化节点制作动态火焰特效全流程指南

1. 项目概述为什么选择 ShaderGraph 制作火焰特效如果你是一个 Unity 初学者或者是一个对 Shader 编程望而却步的程序员或美术那么 ShaderGraph 绝对是你的福音。传统上制作一个像火焰这样动态、有体积感的特效需要编写复杂的着色器代码理解光照模型、噪声算法和顶点/片元着色器的流程门槛相当高。但 ShaderGraph 通过可视化的节点连接方式让特效创作变得像搭积木一样直观。这个项目就是带你从零开始用 ShaderGraph 搭建一个逼真的动态火焰特效。整个过程不需要你写一行 ShaderLab 或 HLSL/GLSL 代码你只需要理解几个核心的图形学概念并学会连接节点就能创造出令人惊艳的实时效果。这个特效的核心价值在于其“动态性”和“易用性”。动态性意味着火焰不是一张静态贴图它会模拟真实火焰的摇曳、升腾、消散过程让游戏场景更具生命力。易用性则体现在 ShaderGraph 的节点化操作上你甚至可以在运行时Play Mode调整参数实时看到火焰颜色、强度、扭曲程度的变化这种即时反馈对于迭代和创意实现来说效率极高。无论是用于角色技能、环境氛围如火把、篝火还是 UI 动效这个技能都非常实用。接下来我会手把手带你拆解每一个环节并附上完整的节点图和我踩过坑后总结的避雷指南。2. 核心思路拆解火焰特效的图形学原理在动手连接节点之前我们先花几分钟理解一下火焰特效在图形学上是如何被“模拟”出来的。这能让你在后续操作中不仅知道“怎么连”更明白“为什么这么连”。一个基础的动态火焰通常由以下几个视觉层次构成2.1 基础形状与噪声扰动火焰没有固定的形状其轮廓是随机且不断变化的。我们无法手动去画每一个帧的形状。因此核心方法是使用一个基础形状比如一个从上到下渐变的锥形作为“画布”然后用柏林噪声Perlin Noise或单纯形噪声Simplex Noise对这个画布的 UV 坐标进行采样和扰动。噪声纹理本身具有连续、平滑的随机性通过对它进行滚动Time 节点控制就能模拟出火焰边缘那种摇曳、扭曲的动态效果。简单来说就是用噪声的灰度值来“雕刻”火焰的形状。2.2 多层叠加与体积感真实的火焰不是单薄的一层。它内部有较亮的高温核心区外部有逐渐暗淡、透明的边缘。为了模拟这种体积感和层次感一个非常有效的方法是使用多层不同频率和幅度的噪声进行叠加。例如第一层用低频、大尺度的噪声决定火焰整体的大轮廓摆动第二层用高频、小尺度的噪声在第一层的基础上增加细节的跳动和火星迸溅的感觉。将这两层甚至更多层的结果以某种方式如相乘、相加、屏幕叠加混合就能得到远比单层噪声丰富的细节。2.3 颜色渐变与透明度火焰的颜色从内到外是渐变的中心通常是亮白色或明黄色中间是橙色外围是暗红色甚至透明。在 ShaderGraph 中我们通过一个Gradient渐变节点或Sample Gradient节点来实现。这个节点的输入是一个标量值比如经过噪声处理后的强度值输出则是对应的颜色。我们将噪声处理后的“火焰强度图”作为输入就能让强度高的地方火焰中心映射为亮色强度低的地方火焰边缘映射为暗色或透明色。2.4 动态与时间控制所有的“动态”都离不开时间变量。Unity ShaderGraph 提供了Time节点它可以输出自游戏开始以来的时间以秒为单位。我们将这个时间变量乘以一个速度系数然后输入到噪声节点的 UV 偏移或者噪声的缩放参数中就能让噪声纹理动起来从而驱动整个火焰形状和颜色的变化。通常让噪声在垂直方向V方向有一个负向的滚动可以模拟火焰向上燃烧的感觉。理解了这四点再看节点图你就会发现它不再是神秘的黑盒而是一个逻辑清晰的视觉化程序。接下来我们就进入 Unity开始实际的搭建。3. 环境准备与 ShaderGraph 创建工欲善其事必先利其器。在开始连接节点前确保你的 Unity 工程环境是正确的。3.1 确认渲染管线与安装 ShaderGraph 包这是新手最容易踩的第一个坑。ShaderGraph 并非 Unity 的默认内置功能它依赖于可编程渲染管线SRP。目前主流的有两种通用渲染管线URP和高清渲染管线HDRP。对于移动端、PC独立游戏和绝大多数项目URP 是更通用、性能更友好的选择。我们这个教程也基于 URP 进行。检查与创建在 Unity 顶部菜单栏点击Window - Rendering - Render Pipeline Converter可以查看当前项目使用的渲染管线。如果你是新建项目务必在创建时选择Universal Render Pipeline模板。安装 ShaderGraph如果你的项目不是 URP 模板创建的需要手动安装。打开Window - Package Manager在左上角的下拉菜单中选择Unity Registry然后搜索Shader Graph和Universal RP分别进行安装。确保两者版本兼容通常保持最新稳定版即可。注意如果你的项目原本是内置渲染管线Built-in直接安装 ShaderGraph 是无法工作的。你需要进行管线迁移这个过程可能对已有材质造成影响务必在操作前备份项目。对于新手强烈建议直接新建一个 URP 项目来学习。3.2 创建你的第一个 ShaderGraph 资源环境准备好后就可以创建着色器了。在 Project 窗口右键选择Create - Shader - Universal Render Pipeline - Lit Shader Graph。这里选择Lit是因为火焰本身需要接受光照比如环境光来更好地融入场景虽然我们主要靠自发光。你也可以用Unlit Shader Graph但需要自己处理更多光照因素。给新建的 ShaderGraph 文件起个名字比如FireEffect_ShaderGraph。双击这个文件就会打开 ShaderGraph 编辑器窗口。你会看到一个默认的PBR Master节点这是着色器的输出终点我们所有计算的最终结果都要连接到这个节点的各个输入端口上。3.3 理解 ShaderGraph 编辑器界面编辑器主要分为几个区域主图Graph中间最大的区域用于放置和连接节点。黑板Blackboard左侧区域用于定义和管理整个着色器的属性Properties比如颜色、强度、速度等可以在材质球面板上调节的参数。主节点Master Node通常是PBR Master位于图右侧或下方定义了着色器的最终输出如表面颜色、法线、透明度等。创建节点菜单在空白处右键可以搜索并创建所有可用节点。准备工作完成我们的“画布”已经铺好接下来开始绘制火焰。4. 核心节点图搭建全流程现在我们一步步构建完整的火焰特效节点图。我会按照逻辑流程分模块讲解并附上每个模块的意图和关键参数。4.1 构建基础噪声形状这是火焰的“骨架”。创建 UV 与 Tiling/Offset右键创建Texture Coordinate节点和Tiling And Offset节点。将 Texture Coordinate 的 UV 通道连接到 Tiling And Offset 的 UV 输入。调整 Tiling 的 X 和 Y 值例如 1 和 2这相当于缩放噪声纹理。Y 值稍大可以拉伸火焰形状使其看起来更瘦长。添加时间动态右键创建Time节点。再创建一个Vector2节点将其值设为 (0, -0.5)。创建一个Multiply节点将 Time 的输出与这个 Vector2 相乘得到垂直方向向下滚动的速度。再创建一个Add节点将 Tiling And Offset 的 UV 输出与这个速度相加。这样我们就得到了一个随时间向上因为UV的V坐标负向增加滚动的 UV 坐标。采样噪声右键搜索Simple Noise或Perlin Noise节点并创建。将上一步 Add 节点的输出连接到 Noise 节点的 UV 输入。调整 Noise 的Scale例如 5这个值控制噪声的“粒度”值越小噪声越细碎值越大噪声越平滑、块状。这是我们火焰的第一层低频噪声。4.2 叠加多层噪声增加细节单一噪声过于平滑缺乏火焰的躁动感。创建第二层高频噪声复制CtrlD第一套 UV 滚动和 Noise 节点组合。在新的 Noise 节点上将Scale调大例如 15并将时间速度 Vector2 的 Y 值改为 -1滚动更快。这层噪声尺度更大变化更快用于增加大范围的形状变化。混合噪声创建一个Multiply节点。将第一层低频噪声Scale5和第二层高频噪声Scale15的输出都连接到这个 Multiply 节点的输入。相乘Multiply的混合模式会让两者共同作用只有两者都亮值高的区域才会更亮这有助于塑造火焰内部更集中的亮部区域。你也可以尝试Add相加或Screen屏幕模式感受不同效果。重塑火焰轮廓现在得到的还是一个方形的噪声场。我们需要一个上小下大的锥形遮罩。创建一个Split节点连接到最初始的、未经时间偏移的 Texture Coordinate 的 UV即原始的V坐标范围0到1。V坐标从下0到上1递增。创建一个One Minus节点输入原始的V值。这样我们就得到了一个从上1到下0递减的值。再创建一个Power节点将 One Minus 的输出作为 Base创建一个Float属性如Mask Power默认值3作为 Exponent 输入。Power函数可以极大地强化对比度让遮罩的衰减更陡峭形成更明显的火焰尖顶。应用遮罩创建一个Multiply节点。将上一步混合后的噪声输出与这个锥形遮罩Power节点的输出相乘。至此一个基本的、动态的、有形状的火焰灰度强度图就生成了。我们将其称为Fire Mask。4.3 应用颜色与透明度将灰度图变成绚丽的火焰。创建颜色渐变右键创建Sample Gradient节点。在节点的 Gradient 字段点击编辑你会看到一个渐变色条。通常从左对应灰度值0即火焰边缘到右对应灰度值1即火焰中心设置颜色为透明黑 - 暗红 - 橙红 - 亮黄 - 白色。你可以根据喜好调整。连接颜色将我们得到的Fire Mask上一步Multiply的输出连接到Sample Gradient节点的Time输入端口。注意这里的 Time 不是指游戏时间而是采样渐变色的位置参数0到1。然后将Sample Gradient节点的Color输出连接到PBR Master节点的Base Color基础颜色。处理透明度火焰边缘应该是半透明甚至全透明的。将同一个Fire Mask连接到PBR Master节点的Alpha输入端口。这样灰度值低边缘的地方透明度就低更透明灰度值高中心的地方透明度就高更不透明。启用透明度渲染在PBR Master节点上将Surface Type从默认的Opaque不透明改为Transparent透明。将Blend Mode改为Alpha传统的Alpha混合或Additive叠加发光效果更强适合火焰。这里我强烈推荐使用Additive因为它能很好地模拟火焰的自发光和叠加效果即使多个火焰重叠也不会变暗。4.4 添加扭曲与扰动进阶让火焰周围的空气看起来有热浪扭曲的效果。这需要用到渲染纹理Render Texture和顶点偏移稍微复杂但效果拔群。准备扭曲图我们需要一张噪声图来驱动扭曲。可以再创建一组简单的、滚动较慢的噪声节点输出一个 Vector2 的流动场。创建属性与计算在 Blackboard 上创建一个Float属性命名为Distortion Strength扭曲强度。创建一个Multiply节点用扭曲强度属性乘以扭曲噪声的 Vector2 输出。影响屏幕UV这里需要一个关键技巧。我们不是直接修改模型顶点而是修改采样屏幕颜色的UV。创建一个Screen Position节点模式选Default。创建一个Add节点将 Screen Position 的 XY 输出与上一步的扭曲向量相加。这样就得到了一个被扰动的屏幕UV坐标。应用扭曲要使用这个扭曲后的UV去采样场景颜色需要用到Scene Color节点。但请注意Scene Color节点只在后处理阶段或特定渲染队列有效。对于火焰这种通常渲染在透明队列的物体直接使用可能无效。一个更实用的替代方案是将扭曲效果作为一个独立的、应用于全屏的后处理效果来实现这超出了单个材质球的范围。因此对于新手入门我们可以先跳过复杂的屏幕空间扭曲专注于火焰本体。一个折中方案是使用顶点偏移来模拟自身的膨胀感将Fire Mask乘以一个强度属性然后输出到PBR Master节点的Vertex Position的 Y 轴偏移上让火焰顶部有轻微的膨胀动画。至此一个核心的动态火焰着色器已经完成。你可以通过 Blackboard 上暴露的属性如噪声缩放、滚动速度、颜色渐变、扭曲强度等在材质球上实时调节效果。5. 材质与粒子系统应用Shader 写好了但它只是一个“配方”。我们需要把它做成“食材”材质然后交给“厨师”渲染器来烹饪。5.1 创建材质与赋值在 Project 窗口右键选择Create - Material命名为Fire_Material。选中这个材质球在 Inspector 面板顶部点击Shader下拉框选择我们刚刚创建的FireEffect_ShaderGraph。材质球面板上会立刻出现我们在 ShaderGraph Blackboard 中定义的所有属性如Mask Power,Distortion Strength等。调整这些参数你可以在场景中实时看到火焰的变化。5.2 使用粒子系统呈现动态火焰一个静态的平面片Quad贴上火焰材质虽然能动但缺乏生命力。粒子系统Particle System才是让火焰“活”过来的最佳载体。在 Hierarchy 窗口右键选择Effects - Particle System创建一个新的粒子系统命名为Fire_Particle。选中该粒子系统在 Inspector 面板中展开Renderer模块。在Renderer模块下将Material指定为我们刚才创建的Fire_Material。关键设置由于我们的火焰材质是Additive混合在粒子系统的Renderer模块中确保Sorting Fudge值不要为负通常设为0或正数这有助于解决透明物体渲染顺序错乱的问题。同时可以关闭粒子的Cast Shadows和Receive Shadows因为自发光火焰通常不参与阴影计算。5.3 配置粒子参数模拟火焰现在来调整粒子系统的主要模块使其行为像一团火焰Main Module主模块Duration: 3-5 秒火焰持续时间。Looping: 勾选循环播放。Start Lifetime: 1-2 秒单个粒子的寿命。Start Speed: 0 或一个很小的值火焰主要向上飘而不是向前发射。Start Size: 使用曲线Curve让粒子在出生时较小中间变大死亡时变小。例如一个在0.5秒处达到峰值如3的钟形曲线。Start Rotation: 可以给一些随机值。Max Particles: 根据性能调整20-50通常足够。Emission发射模块Rate over Time: 10-20每秒发射的粒子数。Shape形状模块Shape: Sphere球体或 Cone锥体。如果是 Cone将Angle调小如10度形成一个从底部小口向上发射的形态更符合火焰。Velocity over Lifetime生命周期速度这是让火焰“向上飘”的关键。将 Y 轴分量设为正值如2并给一些随机性。X和Z轴可以给很小的随机值模拟晃动。Color over Lifetime生命周期颜色虽然材质自己有颜色但这里可以叠加一个从白到透明的渐变让粒子在消亡时淡出得更自然。Size over Lifetime生命周期大小使用曲线让粒子在生命中期最大出生和死亡时较小。Render Alignment渲染对齐在 Renderer 模块中设置为View面向摄像机这样无论从哪个角度看火焰都是完整的。通过以上设置你就得到了一个不断生成、向上飘动、大小颜色动态变化的火焰粒子群每个粒子都渲染着我们精心制作的 ShaderGraph 材质。6. 避坑指南与性能优化在实际操作中你肯定会遇到一些问题。以下是我总结的常见“坑点”和解决方案。6.1 效果不显示或显示异常问题材质球是粉红色Missing。排查检查项目渲染管线。确保安装了正确的 URP 包和 ShaderGraph 包并且材质球选择的 Shader 名称正确。问题火焰是黑色方块或不透明。排查检查PBR Master节点的Surface Type是否设置为Transparent。检查Blend Mode是否设置为Alpha或Additive。检查连接Alpha端口的节点输出值是否正确应在0到1之间。可以用一个Float节点输入1测试。检查粒子系统 Renderer 的材质是否赋值正确。问题火焰没有动态效果。排查检查Time节点是否被正确连接到了噪声节点的 UV 偏移上。确保你没有将 Time 节点错误地连接到了 Gradient 的 Time 输入。6.2 性能优化建议ShaderGraph 虽然方便但不当使用也会带来性能开销。控制节点复杂度避免无意义的复杂节点网络。每多一个节点GPU 就需要多执行一次运算。对于移动平台尤其要精简。谨慎使用高级节点像Scene Depth、Scene Color、复杂的Custom Function节点开销较大非必要不使用。优化噪声使用噪声节点尤其是Gradient Noise比较耗。如果有多处使用相似噪声考虑使用一个Sample Texture 2D节点采样一张预制的噪声贴图并通过滚动其 UV 来模拟动态这通常比实时计算噪声更高效。粒子系统优化严格控制Max Particles数量。在不需要时通过代码或触发器停止粒子发射ParticleSystem.Stop()。使用 LODLevel of Detail系统在远处使用粒子数更少、材质更简化的版本。6.3 艺术效果调整技巧火焰颜色发“脏”检查 Gradient 的颜色设置。避免在低亮度区域使用饱和度过高或偏冷的颜色。从透明黑到暗红再到亮黄的过渡通常比较自然。可以尝试在 Gradient 中间加入一点白色提升中心亮度。形状太规整或太破碎调整噪声的Scale尺度和层数。尺度大则形状大而平滑尺度小则细节多而破碎。多层噪声叠加时尝试不同的混合模式Multiply, Add, Screen和混合权重。动态速度不自然调整控制 UV 滚动的速度 Vector2。通常只需要在 Y 轴V方向有一个负值。可以添加一个Sine Time节点乘以一个很小的系数再加到速度上模拟火焰燃烧时的脉动感。7. 完整节点图参考与参数解读由于无法直接嵌入图片我将核心节点连接逻辑以文字流程图的形式描述并列出关键属性值供你参考[Texture Coordinate] UV - [Tiling And Offset] (Tiling: (1, 2)) - UV1 [Time] - [Multiply] (With Vector2: (0, -0.5)) - Speed1 UV1 Speed1 - [Simple Noise 1] (Scale: 5) - Noise_LowFreq [Texture Coordinate] UV - [Tiling And Offset] (Tiling: (1, 2)) - UV2 [Time] - [Multiply] (With Vector2: (0, -1.0)) - Speed2 UV2 Speed2 - [Simple Noise 2] (Scale: 15) - Noise_HighFreq Noise_LowFreq * Noise_HighFreq - [Multiply] - Mixed_Noise [Texture Coordinate] UV - [Split] - V V - [One Minus] - (1-V) (1-V) - [Power] (Exponent: [Property: Mask Power, Default: 3]) - Fire_Mask Mixed_Noise * Fire_Mask - Final_Mask_Strength Final_Mask_Strength - [Sample Gradient] (Gradient: 黑透|暗红|橙|亮黄|白) [Sample Gradient] Color - [PBR Master] Base Color Final_Mask_Strength - [PBR Master] Alpha [PBR Master] Settings: - Surface Type: Transparent - Blend Mode: Additive - Alpha Clipping: Off关键属性在 Blackboard 中创建Mask Power(Float): 控制火焰锥形遮罩的尖锐程度。值越大火焰顶部越尖。建议范围 2-5。Noise Scale 1(Float): 第一层低频噪声的尺度。建议范围 3-8。Noise Scale 2(Float): 第二层高频噪声的尺度。建议范围 10-20。Scroll Speed 1(Vector2): 第一层噪声滚动速度通常为 (0, -0.3) 到 (0, -0.8)。Scroll Speed 2(Vector2): 第二层噪声滚动速度通常为 (0, -0.8) 到 (0, -1.5)。Color Gradient(Gradient): 火焰颜色渐变。这是调整视觉效果最直观的属性。按照这个结构和思路你在 ShaderGraph 编辑器中应该能顺利连接出整个网络。最大的秘诀就是多调参数实时观察场景视图的变化感受每个参数对最终效果的影响。火焰特效没有绝对的标准答案调整到你认为最符合项目美术风格的样子就是最好的。