今天我們來實現(xiàn)下面這樣一個溶解效果
Dissolve_All.gif
- 思路：先說下思路，主要是運用clip()函數(shù)，裁掉像素，來實現(xiàn)溶解。Clip(x) 當 x<=0時 ，像素就會被裁掉。
我們可以一張溶解紋理作為輸入，然后定義一個_Clip變量。
用紋理的R通道和 和 _Clip變量 做比較。即Clip（_DissolveTex.r - _Clip）當_Clip從0變到1時，即可看到模型溶解的過程。
好，有了思路，我們來實現(xiàn)以下。先上初步代碼
Shader "Unlit/NewUnlitShader"
{
Properties
{
_MainTex ("MainTex", 2D) = "white" {}
_DissolveTex("DissolveTex",2D) = "" {}
_Clip("Clip",Range(0,1)) = 0
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _DissolveTex;
float4 _DissolveTex_ST;
float _Clip;
float4 _RampColor;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
UNITY_TRANSFER_FOG(o,o.vertex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
fixed4 dissolveCol = tex2D(_DissolveTex,i.uv);
clip(dissolveCol.r - _Clip);
return col;
}
ENDCG
}
}
}
如下圖可以看到有初步溶解的效果了，但是不太明顯。為了加強效果，我們可以定義一個溶解顏色，
然后在（_Clip,_Clip + 0.1）的小范圍內(nèi)加上溶解顏色。這樣就可以看到溶解周圍有這個溶解顏色。而且
隨著溶解度的增大，上一幀顯示的溶解小范圍也被溶解掉了。
Dissolve_First.gif
好，我們加多一個_RampColor
Properties
{
_MainTex ("MainTex", 2D) = "white" {}
_DissolveTex("DissolveTex",2D) = "" {}
_Clip("Clip",Range(0,1)) = 0
_RampColor("RampColor",Color) = (0,0,0,0)
}
//Pass 里面也要加下聲明
float4 _RampColor;
然后在(clip~ clip+0.1) 范圍內(nèi)加上我們的_RampColor
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
fixed4 dissolveCol = tex2D(_DissolveTex,i.uv);
clip(dissolveCol.r - _Clip);
fixed maxEdge = _Clip + 0.1;
if(dissolveCol.r < maxEdge)
{
col += _RampColor * smoothstep(_Clip,maxEdge,dissolveCol.r);
}
return col;
}
可以看到效果如下
Dissolve_Second.gif
嗯，效果好一點了。不過溶解區(qū)塊有點大，這里我們可以讓溶解貼圖的Tilling和Offset生效，通過這兩個來調(diào)節(jié)溶解顆粒度。
首先，Pass代碼塊加上_DissolveTex_ST
sampler2D _DissolveTex;
float4 _DissolveTex_ST; // 注意要_ST結(jié)尾。因為接下來要用的TRANSFORM_TEX函數(shù)規(guī)定了要以_ST結(jié)尾
接著在frag()方法里對uv加上Tilling和Offset
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
i.uv = TRANSFORM_TEX(i.uv,_DissolveTex);//加了這句代碼。這句代碼等同于下面的代碼
//i.uv = i.uv * _DissolveTex_ST.xy + _DissolveTex_ST.zw; 上面的代碼相當于這句代碼的簡寫
fixed4 dissolveCol = tex2D(_DissolveTex,i.uv);
clip(dissolveCol.r - _Clip);
fixed maxEdge = _Clip + 0.1;
if(dissolveCol.r < maxEdge)
{
col += _RampColor * smoothstep(_Clip,maxEdge,dissolveCol.r);
}
return col;
}
加完之后，就可以看到Tilling和Offset生效了。可以把溶解區(qū)域調(diào)得更細。如下圖
Dissolve_Thrid.gif
- 好的，效果參不多了。一般來說，溶解效果是一個開關(guān)選項。一般是實體死亡時，才出現(xiàn)的效果。所以，我們接下來加一個開關(guān)。
//Properties 里加上這句
[Toggle]_DissolveEffect("DissolveEffect",float) = 0
//pass代碼塊里加上這句。注意，這個的名字和上面定義的_DissolveEffect相同。但是要全部改成大寫，而且要加上_ON后綴
#pragma multi_compile _ _DISSOLVEEFFECT_ON
//最后給溶解代碼塊加上 #if #endif標簽。就可以在外面用開關(guān)來控制了
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
#if _DISSOLVEEFFECT_ON
i.uv = TRANSFORM_TEX(i.uv,_DissolveTex);
//i.uv = i.uv * _DissolveTex_ST.xy + _DissolveTex_ST.zw; 上面那句代碼相當于這局代碼的簡寫.
fixed4 dissolveCol = tex2D(_DissolveTex,i.uv);
clip(dissolveCol.r - _Clip);
fixed maxEdge = _Clip + 0.1;
if(dissolveCol.r < maxEdge)
{
col += _RampColor * smoothstep(_Clip,maxEdge,dissolveCol.r);
}
#endif
return col;
}
如圖，可以看到開關(guān)確實起到了作用。
Dissolve_Forth.gif
-
好了，最后貼上完整代碼和溶解貼圖
- 代碼
Shader "Unlit/NewUnlitShader"
{
Properties
{
_MainTex ("MainTex", 2D) = "white" {}
_DissolveTex("DissolveTex",2D) = "" {}
_Clip("Clip",Range(0,1)) = 0
_RampColor("RampColor",Color) = (0,0,0,0)
[Toggle]_DissolveEffect("DissolveEffect",float) = 0
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile _ _DISSOLVEEFFECT_ON
//注意，這里要一定要以_ON結(jié)尾
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _DissolveTex;
float4 _DissolveTex_ST;
float _Clip;
float4 _RampColor;
float _DissolveEffect;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
UNITY_TRANSFER_FOG(o,o.vertex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
#if _DISSOLVEEFFECT_ON
i.uv = TRANSFORM_TEX(i.uv,_DissolveTex);
//i.uv = i.uv * _DissolveTex_ST.xy + _DissolveTex_ST.zw; 上面那句代碼相當于這局代碼的簡寫.
fixed4 dissolveCol = tex2D(_DissolveTex,i.uv);
clip(dissolveCol.r - _Clip);
fixed maxEdge = _Clip + 0.1;
if(dissolveCol.r < maxEdge)
{
col += _RampColor * smoothstep(_Clip,maxEdge,dissolveCol.r);
}
#endif
return col;
}
ENDCG
}
}
}
-
貼圖
dissolveTex.png 好的，這次分享就到這里了。下次再見~
