Unity shader 使用噪聲實現火光搖曳效果

先聲明一點，該效果並非完全原創，偶然發現項目中前輩寫的效果，覺得很驚豔，由於shader代碼略顯晦澀，自己簡化之後做的另一版。

再次感謝前輩！

 

先上效果：

使用到的紋理：

 

 

• 一張火焰基礎形狀紋理
• 一張噪聲紋理
• 一張存儲線性插值參數的紋理，r通道存儲的是和UV.y 負相關的1 -- 0漸變的值，g通道存儲的是 UV.y 非線性負相關的1--0漸變值
• r通道：
• g通道：
• 一張漸變顏色的紋理

實現思路：

• 在基礎的形狀紋理上採樣火焰基礎形狀
• 利用時間軸採樣噪聲紋理實現火焰形狀的動態變化
• 利用線性插值參數的採樣數據控制火焰的搖曳變化（從根部到頂部的搖曳幅度）
• 根據基礎形狀灰度值採樣顏色漸變紋理

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的外部控制。