【Unity Shader】2D火焰UV动画

用噪声图滚动做UV动画，非网格顶点动画，用在UI界面，或者给粒子系统做拖尾材质。比起帧动画更加可控可配置。

实现思路

分作三个主要部分

• 合并两个左右稍作偏移的gradient noise，用作模拟火焰向中间靠拢
• 用内置的gradient节点合并出一个类似火种的形状，用做裁剪，并用simple noise模拟上升的火焰，如果用gradient noise会表现得像气泡上浮，用simple noise效果显得碎片化一些，更贴近火焰的摇曳效果
• 用color mask来控制整个火焰的范围，用step方法生成两个稍小一点的mask并相加，模拟焰芯颜色

Tricks

shader graph配合UI组件

• 在shader graph中用vertex color节点读取到的颜色即是ui组件在inspector中设置的颜色
• 要给shader graph一个_MainTex属性，即使没有用上也要设置这个属性，否则在发布到Android平台的时候会出现编译失败

手动修改shader graph生成的代码

用unlit shader graph生成的shader如果直接放在UI组件的材质中，会显示不出颜色，于是把shader graph生成的shader代码拷贝一份当作“手写的”shader， 仅保留代码里面的第一个pass ，把shadow caster pass 和depth only pass手动删除掉，作为UI界面元素不需要这两个pass。

Pass{
    ...
    ZTest Off//若不关闭，则post processing depth of field效果下图像会变残缺
    ZWrite Off
    ...
}
/*移除两个不必要的pass使得shader正常渲染ui组件
Pass{
    Name "ShadowCaster"
    Tags 
        { 
            "LightMode" = "ShadowCaster"
        }
    ...
}
Pass{
    Name "DepthOnly"
    Tags 
        { 
              "LightMode" = "DepthOnly"
        }   
    ...
}
*/

这个trick的好处是shader graph自动生成代码代替手写调试，缺点是每次修改完shader graph之后都要再次把第一个pass的代码拷贝到“手写的”shader中。

Sprite Unlit Graph替代Unlit Graph

使用unity2019.3里面的Sprite Unlit Graph代替Unlit Graph即可避免颜色异常和编译异常 ，或者说对于UI组件就不应该使用常规的Unlit Graph，Sprite Graph才是首选。

shader unity3d