前言

      上篇文章中学习了如何根据世界坐标/屏幕坐标对纹理进行采样（还有坑没能力填啊怎么办啊好难过），这一次我们来学习一下如何制作一个溶解效果。

溶解效果

---

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
        }

添加溶解颜色的溶解

结语

      溶解世界后面的效果很棒，但是。。。。本人能力有限，后面关于程序生成噪声图已经想象不出来了。所以这个系列如果不出意外的话应该就要暂时止步于此了，等我以后变得更强之后可能会回来继续实现后面的溶解效果吧。。。