Unity Shader - 入门级 - 火烧 2D 旗帜 的溶解效果

文章目录

  • 需求
  • 思路
  • 效果
  • Ramp 纹理
  • Shader
  • 集成到 UGUI Shader 中
  • Project


美术提的需求比较简单,但是之前没整过,当作记录一丢丢效果集中


需求

  • 从图片的 下方往上 燃烧溶解
  • 溶解边缘要有指定的颜色过度

思路

  • 从图片的 下方往上 燃烧溶解 - 只要控制 uv.y 方向的溶解即可
  • 溶解边缘要有指定的颜色过度 - 可以使用一张 ramp 纹理做采样过度即可

效果

先来个溶解边缘带过渡色(如下)
请添加图片描述

溶解边缘阔度设当调整(如下)
请添加图片描述
还是差那么一丢丢,再调大一些,嗯,这次好一些,但是变换的混合差么一些(如下)
请添加图片描述

嗯,着会稍微好很多了(如下)
Unity Shader - 入门级 - 火烧 2D 旗帜 的溶解效果_第1张图片

我们可以将动画调整慢一些,便于查看细节(如下)
请添加图片描述

最后带上粒子好一些(如下)
Unity Shader - 入门级 - 火烧 2D 旗帜 的溶解效果_第2张图片


Ramp 纹理

Unity Shader - 入门级 - 火烧 2D 旗帜 的溶解效果_第3张图片

  • Dissolve Edge Ramp Tex - 主要用于控制 边缘过度色相的着色 ramp 纹理
  • Disslove Edge Ramp Tinted Control Tex - 主要控制 着色强度的 ramp 纹理

这两张纹理我们可以根据效果需求,自行在 photoshop 中制作,使用 填充工具 即可,如下图:
Unity Shader - 入门级 - 火烧 2D 旗帜 的溶解效果_第4张图片


Shader

// jave.lin 2022/06/01 : 带方向的 2D 溶解

Shader "Test/DirectionalDissolve2D"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _DissolveTex ("Disslove Tex", 2D) = "white" {}
        _DissolveScale ("Dissolove Scale", Float) = 40
        _DissolveNoiseSpeed ("Dissove Noise Speed", Float) = 0
        _DissolvePos ("Dissolove Pos", Float) = 0.5
        _DissolveWidth ("Dissolve Witdh", Float) = 0.2
        _DissolveEdgeRampTex ("Dissolve Edge Ramp Tex", 2D) = "white" {}
        _DissolveEdgeRampTintedControlTex ("Dissolve Edge Ramp Tinted Control Tex", 2D) = "white" {}
        [Toggle] _DISSOLVE_NOISE_PROCEDURE ("Dissolve Noise Procedure", int) = 0
        [Toggle(_DISSOLVE_EDGE_TINTED_OFF)] _DISSOLVE_EDGE_TINTED_OFF ("Dissolve Edge Ramp Tinted Off", int) = 0
        _DissolveEdgeBrightness ("Dissolve Edge Brightness", Range(0, 5)) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue" = "Transparent" }
        Pass
        {
            Cull Off
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma shader_feature _ _DISSOLVE_NOISE_PROCEDURE_ON
            #pragma shader_feature _ _DISSOLVE_EDGE_TINTED_OFF
            #include "UnityCG.cginc"
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
            struct v2f
            {
                float4 vertex : SV_POSITION;
                float4 uv : TEXCOORD0;
            };
            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _DissolveTex;
            half _DissolveScale;
            half _DissolveNoiseSpeed;
            fixed _DissolvePos;
            fixed _DissolveWidth;
            sampler2D _DissolveEdgeRampTex;
            sampler2D _DissolveEdgeRampTintedControlTex;
            half _DissolveEdgeBrightness;

            // simple noise start ========================
            inline float unity_noise_randomValue (float2 uv)
            {
                return frac(sin(dot(uv, float2(12.9898, 78.233)))*43758.5453);
            }

            inline float unity_noise_interpolate (float a, float b, float t)
            {
                return (1.0-t)*a + (t*b);
            }

            inline float unity_valueNoise (float2 uv)
            {
                float2 i = floor(uv);
                float2 tinted = frac(uv);
                tinted = tinted * tinted * (3.0 - 2.0 * tinted);

                uv = abs(frac(uv) - 0.5);
                float2 c0 = i + float2(0.0, 0.0);
                float2 c1 = i + float2(1.0, 0.0);
                float2 c2 = i + float2(0.0, 1.0);
                float2 c3 = i + float2(1.0, 1.0);
                float r0 = unity_noise_randomValue(c0);
                float r1 = unity_noise_randomValue(c1);
                float r2 = unity_noise_randomValue(c2);
                float r3 = unity_noise_randomValue(c3);

                float bottomOfGrid = unity_noise_interpolate(r0, r1, tinted.x);
                float topOfGrid = unity_noise_interpolate(r2, r3, tinted.x);
                float t = unity_noise_interpolate(bottomOfGrid, topOfGrid, tinted.y);
                return t;
            }

            void Unity_SimpleNoise_float(float2 UV, float Scale, out float Out)
            {
                float t = 0.0;

                float freq = pow(2.0, float(0));
                float amp = pow(0.5, float(3-0));
                t += unity_valueNoise(float2(UV.x*Scale/freq, UV.y*Scale/freq))*amp;

                freq = pow(2.0, float(1));
                amp = pow(0.5, float(3-1));
                t += unity_valueNoise(float2(UV.x*Scale/freq, UV.y*Scale/freq))*amp;

                freq = pow(2.0, float(2));
                amp = pow(0.5, float(3-2));
                t += unity_valueNoise(float2(UV.x*Scale/freq, UV.y*Scale/freq))*amp;

                Out = t;
            }
            // simple noise end ========================

            // remap start ========================
            void Unity_Remap_float4(float4 In, float2 InMinMax, float2 OutMinMax, out float4 Out)
            {
                Out = OutMinMax.x + (In - InMinMax.x) * (OutMinMax.y - OutMinMax.x) / (InMinMax.y - InMinMax.x);
            }
            void Unity_Remap_float(float In, float2 InMinMax, float2 OutMinMax, out float Out)
            {
                Out = OutMinMax.x + (In - InMinMax.x) * (OutMinMax.y - OutMinMax.x) / (InMinMax.y - InMinMax.x);
            }
            // remap end ========================

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.uv, _MainTex);
                o.uv.zw = TRANSFORM_TEX(v.uv, _DissolveTex);
                return o;
            }
            fixed4 frag (v2f i) : SV_Target
            {
                // jave.lin : simple noise
                half2 noise_uv = i.uv.zw + _Time.xz * _DissolveNoiseSpeed;

                #ifdef _DISSOLVE_NOISE_PROCEDURE_ON
                    // // jave.lin : method1 - 程序化 noise
                    fixed noise;
                    Unity_SimpleNoise_float(noise_uv, _DissolveScale, noise);
                #else
                    // // jave.lin : method2 - 预计算采样 noise
                    fixed noise = tex2D(_DissolveTex, noise_uv * _DissolveScale).r;
                #endif

                // jave.lin : uv.y 方向溶解
                half dissolvePos = i.uv.y + noise * _DissolveWidth - _DissolvePos;
                clip(dissolvePos);
                // jave.lin : 夹到 0~1
                Unity_Remap_float(dissolvePos, half2(0, _DissolveWidth), half2(0, 1), dissolvePos);
                // jave.lin : 着色部分
                half tinted = step(0.001, dissolvePos) * step(dissolvePos, 0.999);
                // jave.lin : 混合着色
                fixed4 col = tex2D(_MainTex, i.uv.xy);
                fixed2 rampUV = fixed2(1 - dissolvePos, 0.5);
                fixed3 fireCol = tex2D(_DissolveEdgeRampTex, rampUV).rgb;
                #ifdef _DISSOLVE_EDGE_TINTED_OFF
                    fireCol = fireCol * _DissolveEdgeBrightness;
                #else
                    fixed mix_col_intensity = tex2D(_DissolveEdgeRampTintedControlTex, rampUV).r;
                    fireCol = lerp(col.rgb, fireCol * _DissolveEdgeBrightness, mix_col_intensity);
                #endif
                col.rgb = lerp(col.rgb, fireCol, tinted);
                return col;
            }
            ENDCG
        }
    }
}


集成到 UGUI Shader 中

// jave.lin 2022/06/01 : 带放i选哪个的 2D 溶解

Shader "Test/DirectionalDissolve2D"
{
	Properties
	{
		[PerRendererData] _MainTex ("Texture", 2D) = "white" {}
		_Color ("Tint", Color) = (1, 1, 1, 1)
		[NoScaleOffset] _DissolveTex ("Disslove Tex", 2D) = "white" {}
		_DissolveScale ("Dissolove Scale", Float) = 40
		_DissolveNoiseSpeed ("Dissove Noise Speed", Float) = 0
		_DissolvePos ("Dissolove Pos", Float) = 0.5
		_DissolveWidth ("Dissolve Witdh", Float) = 0.2
		[NoScaleOffset] _DissolveEdgeRampTex ("Dissolve Edge Ramp Tex", 2D) = "white" {}
		_DissolveEdgeRampTintedControlTex ("Dissolve Edge Ramp Tinted Control Tex", 2D) = "white" {}
		[Toggle] _DISSOLVE_NOISE_PROCEDURE ("Dissolve Noise Procedure", int) = 0
		[Toggle(_DISSOLVE_EDGE_TINTED_OFF)] _DISSOLVE_EDGE_TINTED_OFF ("Dissolve Edge Ramp Tinted Off", int) = 0
		_DissolveEdgeBrightness ("Dissolve Edge Brightness", Range(0, 5)) = 1

		[Header(UGUI Props)]
		_StencilComp ("Stencil Comparison", Float) = 8
		_Stencil ("Stencil ID", Float) = 0
		_StencilOp ("Stencil Operation", Float) = 0
		_StencilWriteMask ("Stencil Write Mask", Float) = 255
		_StencilReadMask ("Stencil Read Mask", Float) = 255

		_ColorMask ("Color Mask", Float) = 15

		[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
	}
	SubShader
	{
		Tags
		{
			"Queue"="Transparent"
			"IgnoreProjector"="True"
			"RenderType"="Transparent"
			"PreviewType"="Plane"
			"CanUseSpriteAtlas"="True"
		}
		Pass
		{
			Stencil
			{
				Ref [_Stencil]
				Comp [_StencilComp]
				Pass [_StencilOp]
				ReadMask [_StencilReadMask]
				WriteMask [_StencilWriteMask]
			}

			Cull Off
			Lighting Off
			ZWrite Off
			ZTest [unity_GUIZTestMode]
			Blend SrcAlpha OneMinusSrcAlpha
			ColorMask [_ColorMask]
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"
			#include "UnityUI.cginc"
			#include "../../Shaders/Includes/CG/SG_SimpleNoise.cginc"
			#include "../../Shaders/Includes/CG/SG_Remap.cginc"

			#pragma shader_feature _ _DISSOLVE_NOISE_PROCEDURE_ON
			#pragma shader_feature _ _DISSOLVE_EDGE_TINTED_OFF

			#pragma multi_compile __ UNITY_UI_CLIP_RECT
			#pragma multi_compile __ UNITY_UI_ALPHACLIP
			struct appdata
			{
				float4 vertex : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
				UNITY_VERTEX_INPUT_INSTANCE_ID
			};
			struct v2f
			{
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                float2 texcoord  : TEXCOORD0;
                float4 worldPosition : TEXCOORD1;
                UNITY_VERTEX_OUTPUT_STEREO
			};
			sampler2D _MainTex;
			fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
			float4 _MainTex_ST;
			sampler2D _DissolveTex;
			half _DissolveScale;
			half _DissolveNoiseSpeed;
			fixed _DissolvePos;
			fixed _DissolveWidth;
			sampler2D _DissolveEdgeRampTex;
			sampler2D _DissolveEdgeRampTintedControlTex;
			half _DissolveEdgeBrightness;

			v2f vert (appdata v)
			{
				v2f OUT;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                OUT.worldPosition = v.vertex;
                OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
				OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
				OUT.color = v.color * _Color;
				return OUT;
			}
			fixed4 frag (v2f IN) : SV_Target
			{
				// jave.lin : simple noise
				half2 noise_uv = IN.texcoord + _Time.xz * _DissolveNoiseSpeed;

				#ifdef _DISSOLVE_NOISE_PROCEDURE_ON
					// // jave.lin : method1 - 程序化 noise
					fixed noise;
					Unity_SimpleNoise_float(noise_uv, _DissolveScale, noise);
				#else
					// // jave.lin : method2 - 预计算采样 noise
					fixed noise = tex2D(_DissolveTex, noise_uv * _DissolveScale).r;
				#endif

				// jave.lin : texcoord.y 方向溶解
				half dissolvePos = IN.texcoord.y + noise * _DissolveWidth - _DissolvePos;
				clip(dissolvePos);
				// jave.lin : 夹到 0~1
				Unity_Remap_float(dissolvePos, half2(0, _DissolveWidth), half2(0, 1), dissolvePos);
				// jave.lin : 着色部分
				half tinted = step(0.001, dissolvePos) * step(dissolvePos, 0.999);
				half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

                #ifdef UNITY_UI_CLIP_RECT
                color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                #endif

                #ifdef UNITY_UI_ALPHACLIP
                clip (color.a - 0.001);
                #endif

				fixed2 rampUV = fixed2(1 - dissolvePos, 0.5);
				fixed3 fireCol = tex2D(_DissolveEdgeRampTex, rampUV).rgb;
                #ifdef _DISSOLVE_EDGE_TINTED_OFF
                    fireCol = fireCol * _DissolveEdgeBrightness;
                #else
                    fixed mix_col_intensity = tex2D(_DissolveEdgeRampTintedControlTex, rampUV).r;
                    fireCol = lerp(col.rgb, fireCol * _DissolveEdgeBrightness, mix_col_intensity);
                #endif
				color.rgb = lerp(color.rgb, fireCol, tinted);
				return color;
			}
			ENDCG
		}
	}
}


Project

  • Test_DirectionalDissolve_2D_Unity_2021_3_11f1

你可能感兴趣的:(unity,unity-shader,unity,火烧溶解,溶解边缘着色,2D图片溶解)