Unity的ShaderGraph制作烟雾特效

本篇文章拆分了Unity官方案例中常见的2D烟雾特效制作手法，个人水平有限有错误欢迎指正Ovo

这里用LineRenender来制作烟的效果

1.设置5个折线的点，宽度：开始长度1.0，后面4.0

2.颜色下面是左右同色，上面是左右为0alpha，中间两个地方为满alpha

3.取消use world space，增加边角的细分：Corner vertices从0开始加

ShaderGraph制作烟雾

参数解释：

1. Smoke Color Thickness (烟雾颜色浓度)，控制烟雾与背景的混合

2. Smoke Detail Scroll Speed (烟雾细节滚动速度) 烟雾纹理本身的动画速度 

3. Refraction Blend Amount (折射混合强度) 背景扭曲效果的强度 

4. Refraction Scroll Speed (折射滚动速度) 控制折射噪声的移动速度。让扭曲效果也"动起来" 

5. Refraction Noise Scale (折射噪声缩放) 控制噪声图的大小 

1.创建一个SpriteUnlit的Shader

2.烟雾的ShaderGraph分为上下两条线，分别分析：

3上面一条线：扭曲效果

Scroll Noise UV Over Time：用来生成随时间滚动的UV坐标

Time是累计时间从0,1,2开始，与Refraction Scroll Speed相乘，所以得出的答案是(0.1*Time,0.1*Time)

Tiling And Offset (平铺和偏移节点)：UV(2)：原始 UV 坐标（比如模型顶点传入的 UV0）

Tiling(2)：每个方向的缩放比例（放大 > 1，缩小 < 1）

Offset(2)：平移距离（决定贴图偏移的位置）

现在速度是0.1,0.1所以是向右上缓慢移动

前面给了一个Vector2的偏移值，用于控制噪声UV偏移量，

梯度噪声（Gradient Noise）节点，UV坐标 × Scale = 新的采样位置

Out(1) 输出的是一个0到1之间的浮点数，代表特定位置（UV坐标）的随机噪声强度

前面的操作是在用噪声图生成随机数

Refraction Blend with Screen Position UV：将原始屏幕UV和噪声扭曲后的屏幕UV进行混合，创建烟雾的折射效果

Screen Position获取当前像素在屏幕上的位置，范围：左下角(0,0)到右上角(1,1)。

扭曲位置 = 屏幕位置 × 噪声值，这里和前面的噪声值进行相乘

Lerp 线性混合，原始图像和扭曲的图像混合

最后输出一个混合后的图像。

Access Camera Sorting Layer Texture and Apply Refraction UV：烟雾折射效果的核心实现，负责扭曲并采样背景纹理

使用扭曲的UV坐标来采样摄像机排序层纹理，获取折射后的背景颜色。

就是把扭曲折射图和背景采样混合，得到扭曲背景图

任何扭曲效果 = 原始UV + 变换函数

Combine Line Renderer Color with Refracted Camera Texture ：将线条渲染器的颜色与折射后的摄像机纹理混合，创建彩色烟雾/线条效果。

将烟雾颜色与扭曲的背景相结合，输出有烟雾颜色的背景扭曲图。

但是注意这里还没有用遮罩切割成有形状的烟雾。

如果只有折射效果，烟雾会是完全透明的，只显示扭曲的背景。但实际上烟雾有自己的颜色。

Combine Smoke Detail with Refracted Camera Texture ：有烟雾颜色的背景扭曲图与滚动的烟雾纹理图（下线给的），由Smoke Color Thickness参数控制混合强度。

直接输出给Base Color

下线：处理烟雾细节纹理（带滚动动画的烟雾图）遮罩图Mask和Alpha

Smoke Detail Scroll UV和Smoke Detail Texture给了一个滚动的烟雾纹理图，通过上面的Blend混合成有颜色的扭曲背景烟雾图。

Smoke Detail Scroll UV（烟雾细节滚动UV）：创建动态滚动的UV坐标，用于采样烟雾细节纹理，实现烟雾的流动动画效果

Smoke Detail Texture（烟雾细节纹理）：使用滚动UV采样烟雾纹理图，获取烟雾的颜色和透明度信息。

这里烟雾纹理图是自己赋值的，RGBA用于上面的混合Combine Smoke Detail with Refracted Camera Texture ，A通道用于制作Mask.

注意：这里A通道同时输出到下面混合代码和最后Fragment的Sprite Mask

Combine Smoke Detail Alpha with Line Renderer Color Alpha：将烟雾细节纹理的Alpha通道与线渲染器的颜色Alpha进行合并/混合

注意：！！！

这里要混合的原因是线渲染器可以设置多段Alpha值，如果不混合的直接使用就是固定透明度效果

• VertexColor节点提供线渲染器的顶点颜色数据

前面分出来的Alpha通道带滚动的图与VertexColor渲染器的Alpha透明度混合

这里直接输出到Alpha通道

下面是烟雾的纹理图