今天我们来实现下面这样一个溶解效果
Dissolve_All.gif
- 思路：先说下思路，主要是运用clip()函数，裁掉像素，来实现溶解。Clip(x) 当 x<=0时 ，像素就会被裁掉。
我们可以一张溶解纹理作为输入，然后定义一个_Clip变量。
用纹理的R通道和 和 _Clip变量 做比较。即Clip（_DissolveTex.r - _Clip）当_Clip从0变到1时，即可看到模型溶解的过程。
好，有了思路，我们来实现以下。先上初步代码
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）的小范围内加上溶解颜色。这样就可以看到溶解周围有这个溶解颜色。而且
随着溶解度的增大，上一帧显示的溶解小范围也被溶解掉了。
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) 范围内加上我们的_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
嗯，效果好一点了。不过溶解区块有点大，这里我们可以让溶解贴图的Tilling和Offset生效，通过这两个来调节溶解颗粒度。
首先，Pass代码块加上_DissolveTex_ST
sampler2D _DissolveTex;
float4 _DissolveTex_ST; // 注意要_ST结尾。因为接下来要用的TRANSFORM_TEX函数规定了要以_ST结尾
接着在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生效了。可以把溶解区域调得更细。如下图
Dissolve_Thrid.gif
- 好的，效果参不多了。一般来说，溶解效果是一个开关选项。一般是实体死亡时，才出现的效果。所以，我们接下来加一个开关。
//Properties 里加上这句
[Toggle]_DissolveEffect("DissolveEffect",float) = 0
//pass代码块里加上这句。注意，这个的名字和上面定义的_DissolveEffect相同。但是要全部改成大写，而且要加上_ON后缀
#pragma multi_compile _ _DISSOLVEEFFECT_ON
//最后给溶解代码块加上 #if #endif标签。就可以在外面用开关来控制了
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;
}
如图，可以看到开关确实起到了作用。
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结尾
#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 好的，这次分享就到这里了。下次再见~
