Unity Shader - 入门级 - 火烧 2D 旗帜 的溶解效果
文章目录
- 需求
- 思路
- 效果
- Ramp 纹理
- Shader
- 集成到 UGUI Shader 中
- Project
美术提的需求比较简单，但是之前没整过，当作记录一丢丢效果集中
需求
- 从图片的 下方往上 燃烧溶解
- 溶解边缘要有指定的颜色过度
思路
- 从图片的 下方往上 燃烧溶解 - 只要控制 uv.y 方向的溶解即可
- 溶解边缘要有指定的颜色过度 - 可以使用一张 ramp 纹理做采样过度即可
效果
先来个溶解边缘带过渡色（如下）
溶解边缘阔度设当调整（如下）
还是差那么一丢丢，再调大一些，嗯，这次好一些，但是变换的混合差么一些（如下）
嗯，着会稍微好很多了（如下）
我们可以将动画调整慢一些，便于查看细节（如下）
最后带上粒子好一些（如下）
Ramp 纹理
- Dissolve Edge Ramp Tex - 主要用于控制 边缘过度色相的着色 ramp 纹理
- Disslove Edge Ramp Tinted Control Tex - 主要控制 着色强度的 ramp 纹理
这两张纹理我们可以根据效果需求，自行在 photoshop 中制作，使用 填充工具 即可，如下图：
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