Unity shader 使用噪声实现火光摇曳效果

先声明一点,该效果并非完全原创,偶然发现项目中前辈写的效果,觉得很惊艳,由于shader代码略显晦涩,自己简化之后做的另一版。

再次感谢前辈!

 

先上效果:

Unity shader 使用噪声实现火光摇曳效果

使用到的纹理:

 

 

  • 一张火焰基础形状纹理
  • Unity shader 使用噪声实现火光摇曳效果
  • 一张噪声纹理
  • Unity shader 使用噪声实现火光摇曳效果
  • 一张存储线性插值参数的纹理,r通道存储的是和UV.y 负相关的1 -- 0渐变的值,g通道存储的是 UV.y 非线性负相关的1--0渐变值
  • Unity shader 使用噪声实现火光摇曳效果
  • r通道:
  • Unity shader 使用噪声实现火光摇曳效果
  • g通道:
  • Unity shader 使用噪声实现火光摇曳效果
  • 一张渐变颜色的纹理
  • Unity shader 使用噪声实现火光摇曳效果

实现思路:

  • 在基础的形状纹理上采样火焰基础形状
  • 利用时间轴采样噪声纹理实现火焰形状的动态变化
  • 利用线性插值参数的采样数据控制火焰的摇曳变化(从根部到顶部的摇曳幅度)
  • 根据基础形状灰度值采样颜色渐变纹理

shader代码:

Shader "Custom/fire 1"
{
    Properties
    {
        _MainTex ("fireShape"2D) = "white" {}
        _noiseTex("noiseTex",2D) ="white"{}
        _bottomMask("bottomMask",2D) ="white"{}
        _displaceStrength("displaceStrength",Range(0,1))=0.1
        _colorGridentTex("colorGridentMap",2D)="white"{}
        _time0("time0",FLOAT)=0
        _colorScale("colorScale",Range(0,2))=1
        _alphaScale("alpha",Range(0,2))=1
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent"}
        LOD 100
        blend one oneMinusSrcAlpha
        zwrite off
        ztest on
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
        //    #pragma multi_compile_fog
            
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
            //    UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _noiseTex;
            float _displaceStrength;
            sampler2D _bottomMask;
            sampler2D _colorGridentTex;
            float _time0;
            float _colorScale;
            float _alphaScale;
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                //线性插值参数
                float2 bottomMask_topMask=tex2D(_bottomMask,i.uv).rg;
                float bottomMask=bottomMask_topMask.r;
                float topMask=bottomMask_topMask.g;

                //噪声干扰shape 的uv
                float2 noiseUV=i.uv;
                noiseUV.y*=0.6;
                noiseUV+=float2(0,-(_Time.y*0.8+_time0));
                float noise=tex2D(_noiseTex,noiseUV).r;
                noise -= 0.5;

                //摇曳控制参数
                float discontinueMask=tex2D(_noiseTex,i.uv).r;
                discontinueMask=lerp(discontinueMask,0,bottomMask); 

                //在主纹理中采样火焰轮廓
                fixed4 shapeColor = tex2D(_MainTex,float2 (i.uv.x + noise * discontinueMask ,i.uv.y));

                //绘制静态火焰
                float grayScale = 0.3 * shapeColor.r + 0.6 * shapeColor.g + 0.1 * shapeColor.b;

                //根据灰度值采样色彩纹理
                float4 finalColor=tex2D(_colorGridentTex,float2(grayScale,i.uv.y));
                finalColor=finalColor*1.5*_colorScale;
                finalColor.a = saturate(grayScale * 8)*0.6*_alphaScale;//1.5 8 0.6 这些参数是shader调试过程中的临时变量,用来控制外部变量的印象权重
                finalColor.rgb *= finalColor.a;

                return finalColor;
            }
            ENDCG
        }
    }
}

由于简化的目的在于精简代码,所以很多外部控制变量暂时未接入,如alpha、strength的外部控制。