前言
上篇文章中学习了如何根据世界坐标/屏幕坐标对纹理进行采样（还有坑没能力填啊怎么办啊好难过），这一次我们来学习一下如何制作一个溶解效果。
溶解效果
1.一个最最最简单的溶解效果
我们还是从最简单的溶解效果开始做起，其实关于溶解的教程也有很多了，溶解的主要原理是根据某一些特定的规则，抛弃掉物体上的一些像素，随着抛弃的像素越来越多，对应的显示的纹理也就越来越少。比较普遍的做法是使用一张噪声纹理，根据噪声纹理中的r通道来控制像素。下面是我这次使用的噪声纹理（网上瞎找的）：
噪声纹理
然后是我们的代码：
Shader "Custom/DissolveWorld" {
Properties {
_BurnAmount ("Burn Amount", Range(0.0, 1.0)) = 0.0
_MainTex ("Base (RGB)", 2D) = "white" {}
_BurnMap("Burn Map", 2D) = "white"{}
}
SubShader {
Tags { "RenderType"="Opaque" "Queue"="Geometry"}
Pass {
Tags { "LightMode"="ForwardBase" }
Cull Off
CGPROGRAM
#include "Lighting.cginc"
#include "Dissolve.cginc"
#pragma multi_compile_fwdbase
#pragma vertex vert
#pragma fragment frag
fixed _BurnAmount;
sampler2D _MainTex;
sampler2D _BurnMap;
float4 _MainTex_ST;
float4 _BurnMap_ST;
struct a2v {
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float2 uvMainTex : TEXCOORD0;
float2 uvBurnMap : TEXCOORD1;
float3 worldPos : TEXCOORD2;
};
v2f vert(a2v v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uvMainTex = TRANSFORM_TEX(v.texcoord, _MainTex);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
o.uvBurnMap = CalBurnMapUV( v.normal, o.worldPos);
return o;
}
fixed4 frag(v2f i) : SV_Target {
fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;
clip(burn.r - _BurnAmount);
fixed3 albedo = tex2D(_MainTex, i.uvMainTex).rgb;
return fixed4(albedo, 1);
}
ENDCG
}
}
FallBack "Diffuse"
}
和上一篇相比，我们新增了一个_BurnAmount 变量，用来控制溶解的程度，_BurnMap就是我们使用的噪声纹理。clip()函数就是我们用来舍弃像素的函数，当传入的参数小于0的时候，这个像素就不会被渲染。这里我们使用采样后的噪声纹理的r通道和_BurnAmount参数一起来控制像素的渲染与否。CalBurnMapUV()函数就是我们上一篇使用过的世界空间采样计算uv值，我把它写在了Dissolve.cginc内（这个函数不是必要的，只是因为之前写过了，所以就拿来用了。完全可以使用TRANSFORM_TEX(v.texcoord, _BurnMap)取代），下面是函数的具体实现：
inline float2 CalBurnMapUV(float3 normal, float3 worldPos){
float3 worldNormal = mul(unity_ObjectToWorld, normal);
float NX = dot(worldNormal, float3(1.0, 0.0, 0.0));
float NY = dot(worldNormal, float3(0.0, 1.0, 0.0));
float NZ = dot(worldNormal, float3(0.0, 0.0, 1.0));
return worldPos.yz * NX + worldPos.zx * NY + worldPos.xy * NZ;
}
上面的代码贴到一个cube上之后是这样的：
简单溶解cube
2.添加一个阴影支持
其实上面的效果已经还可以啦，但是我们可以看到，阴影在地上是会穿帮的，所以我们要来处理一下地上的阴影。这里我们需要新加一个pass专门来处理阴影。阴影的处理也很简单，其实还是按照上面的方式对噪声纹理采样，然后丢弃掉一些相同位置的像素就可以了。
如果上面使用了TRANSFORM_TEX(v.texcoord, _BurnMap)，那么下面计算uv坐标也要使用同样的函数进行计算。
新增的pass使用的都是unity内置好的阴影处理函数，我们只需要按照规则调用就可以了，添加ShadowCaster光照模式，开启multi_compile_shadowcaster宏，联合使用V2F_SHADOW_CASTER;，TRANSFER_SHADOW_CASTER_NORMALOFFSET(o)，SHADOW_CASTER_FRAGMENT(i)就可以了。代码如下：
Pass {
Tags { "LightMode" = "ShadowCaster" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_shadowcaster
#include "UnityCG.cginc"
#include "Dissolve.cginc"
fixed _BurnAmount;
sampler2D _BurnMap;
float4 _BurnMap_ST;
struct v2f {
V2F_SHADOW_CASTER;
float2 uvBurnMap : TEXCOORD1;
};
v2f vert(appdata_base v) {
v2f o;
TRANSFER_SHADOW_CASTER_NORMALOFFSET(o)
float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
o.uvBurnMap = CalBurnMapUV( v.normal, worldPos);
return o;
}
fixed4 frag(v2f i) : SV_Target {
fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;
clip(burn.r - _BurnAmount);
SHADOW_CASTER_FRAGMENT(i)
}
ENDCG
}
带有阴影的溶解效果
番外：为我们的溶解添加一点小效果
感觉这篇溶解效果在溶解世界的源文章中已经讲过了，所以感觉没什么可记录的。但是为了显得字数多一点，还是决定给我们的溶解加一个边缘的溶解颜色的小效果。我们使用两个颜色进行插值，分别用来表示开始溶解的地方和正在溶解的地方，还加入了一个变量来控制溶解的范围。
Shader "Custom/DissolveWorld" {
Properties {
_BurnAmount ("Burn Amount", Range(0.0, 1.0)) = 0.0
_MainTex ("Base (RGB)", 2D) = "white" {}
_BurnMap("Burn Map", 2D) = "white"{}
_LineWidth("Burn Line Width", Range(0.0, 0.2)) = 0.1
_BurnFirstColor("Burn First Color", Color) = (1, 0, 0, 1)
_BurnSecondColor("Burn Second Color", Color) = (1, 0, 0, 1)
}
SubShader {
Tags { "RenderType"="Opaque" "Queue"="Geometry"}
Pass {
Tags { "LightMode"="ForwardBase" }
Cull Off
CGPROGRAM
#include "Lighting.cginc"
#include "Dissolve.cginc"
#pragma multi_compile_fwdbase
#pragma vertex vert
#pragma fragment frag
fixed _BurnAmount;
sampler2D _MainTex;
sampler2D _BurnMap;
fixed _LineWidth;
fixed4 _BurnFirstColor;
fixed4 _BurnSecondColor;
float4 _MainTex_ST;
float4 _BurnMap_ST;
struct a2v {
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float2 uvMainTex : TEXCOORD0;
float2 uvBurnMap : TEXCOORD1;
float3 worldPos : TEXCOORD2;
};
v2f vert(a2v v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uvMainTex = TRANSFORM_TEX(v.texcoord, _MainTex);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
o.uvBurnMap = CalBurnMapUV( v.normal, o.worldPos);
return o;
}
fixed4 frag(v2f i) : SV_Target {
fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;
clip(factor);
fixed3 albedo = tex2D(_MainTex, i.uvMainTex).rgb;
//先根据溶解范围对宽度插值
fixed t = 1 - smoothstep(0.0, _LineWidth, burn.r - _BurnAmount);
//根据上面插值结果对两种颜色进行插值
fixed3 burnColor = lerp(_BurnFirstColor, _BurnSecondColor, t);
burnColor = pow(burnColor, 5);
//最后对物体颜色和溶解中的颜色进行插值
fixed3 finalColor = lerp(albedo, burnColor, t * step(0.0001, _BurnAmount));
return fixed4(finalColor, 1);
}
ENDCG
}
添加溶解颜色的溶解
结语
溶解世界后面的效果很棒，但是。。。。本人能力有限，后面关于程序生成噪声图已经想象不出来了。所以这个系列如果不出意外的话应该就要暂时止步于此了，等我以后变得更强之后可能会回来继续实现后面的溶解效果吧。。。
网友评论