【游戲開發實戰】教你在Unity中實作模型消融化為灰燼飄散的效果（ShaderGraph | 消融 | 粒子系統 | 特效）

一、前言

嗨，大家好，我是新發，
有小伙伴在提問區給我提了這個問題，想要做一個模型消融化作灰燼飄散的效果，

我之前寫過一篇ShaderGraph的教程：《ShaderGraph使用教程與各種特效案例》
里面實作了多種常見的特效效果，也包括消融的效果，不過沒有實作灰燼飄散的效果，今天，我就嘗試使用ShaderGraph來實作這個效果吧~

本文我實作了兩種效果，最終如下：

話不多說，我們開始吧~

二、ShaderGraph環境準備

因為本文我使用的是Unity的ShaderGraph來實作上面的效果的，需要先安裝ShaderGraph相關插件，并做一些基礎設定，
可以查看我之前這篇博客《ShaderGraph使用教程與各種特效案例》的環境準備部分，這里我就不贅述具體操作了，

三、模型準備：原神角色模型

本文我使用的是原神的角色模型，我之前寫過一篇文章講如何從原神官網下載角色模型并制作成FBX格式匯入Unity的教程，感興趣的同學可以看下：《【游戲開發實戰】下載原神模型，PMX轉FBX，匯入到Unity中，卡通渲染，系結人形影片（附Demo工程）》

四、實作思路

在講具體操作之前，我先說一下實作思路，本文我實作了兩種效果，這里分別講一下，

1、效果一的實作思路

效果一

思路：使用Alpha Clip對模型進行裁切，切口處做一層隨機噪聲來控制Alpha Clip，并使用隨機噪聲對消融的頂點做坐標擾動，最后混合一個顏色即可，

畫個思維圖，

2、效果二的實作思路

效果二

思路：依然是使用Alpha Clip對模型進行消融控制，在此基礎上，再添加一個粒子效果，粒子的噴射Shape使用角色的網格，粒子加一些噪聲擾動，達到風吹的效果，再根據滑塊的值分別控制消融進度和粒子的噴射屬性即可，

注：這個效果并不是那些消融的碎片作為灰燼飄散，而是粒子單獨去噴射一個灰燼的效果，其實有點障眼法，這是我想到的一個取巧的辦法，如果你有更好更逼真的辦法，歡迎交流，

畫個思維圖，分兩個，一個是模型的，如下

還有一個是粒子的，粒子的稍微簡單一點，就是貼圖采樣，然后混合頂點顏色，再使用貼圖采用的Alhpa通道來控制Alpha，

五、ShaderGraph具體實作

1、效果一

1.1、創建Unlit Shader Graph

這里我不考慮光照效果，所以創建Unlit的Shader，在Project視窗右鍵點擊選單Create / Shader / Universal Render Pipeline / Unlit Shader Graph，如下

雙擊創建的檔案即可打開Shader Graph編輯器，

1.2、獲取頂點坐標的y軸坐標

我們先通過Position節點拿到頂點坐標（注意我這里取的是Object空間下的坐標），再通過Split拿到G分量，也就是頂點坐標的y坐標，

1.3、滑塊控制

創建一個float節點，命名為disolve，并轉為屬性，型別選擇Slider（即滑塊）,用它與剛剛的頂點坐標的y分量做一次平滑階躍，得到的這個輸出可以作為后面顏色混合和頂點擾動的輸入，

1.4、邊緣噪聲

接著我們創建一個噪聲節點Simple Noise，通過定時器控制UV偏移，如下，這個噪聲用于對邊緣進行擾動，

1.5、AlhpaClip控制

我們把噪聲與滑塊值相加，再與定點坐標的y分量做一個Step階躍，得到顆粒感的邊界，最后反一下，作為AlphaClip的輸入，

需要注意Alpha與Alpha Clip的關系：當Alpha Clip的值比Alpha大的時候，像素顏色就會被丟棄，一般我會把Alpha設定為0.5，

1.6、邊緣漸變色

把步驟1.3的輸出拿過來，與一個顏色混合，再進行加強，得到一個邊緣漸變色，

1.7、輸出基礎色

對貼圖進行采樣，與邊緣漸變色混合，作為基礎色輸出到片元著色器的Base Color，

1.8、頂點坐標擾動

我想要消融的地方的頂點有一個坐標擾動的效果，我構造了一個坐標擾動的噪聲，如下，這里的擾動規則可自行發揮，我是采用Simple Noise對x、y軸進行擾動，使用Gradient Noise對y軸進行擾動，

1.9、插值計算頂點坐標

我們把噪聲與頂點坐標相加，再通過滑塊控制線性插值，得到最終頂點坐標，輸出給頂點著色器的Position，

1.10、完整節點圖

最終完整的節點圖如下，肯定看不清，只是給大家看下整體結構，想要看細節的同學可下載本文的工程原始碼進行查看，

2、效果二

2.1、創建Unlit Shader Graph

同理是先創建一個Unlit Shader Graph，雙擊打開，

2.2、雙噪聲疊加擾動

消融效果需要一個噪聲，我這里采用了雙噪聲疊加的方式，分別對噪聲一噪聲二的UV的V分量做相反反向的偏移，最侄訓合出一個雙噪聲混合的效果，

2.2、計算AlphaClip

我們創建一個float節點，作為滑塊，與剛剛的噪聲做一個階躍，輸出結果作為AlphaClip，

片元著色器的Alpha設定為0.5，

2.3、計算描邊

滑塊與噪聲做一個階躍，再與剛剛計算的AlphaClip相減，就可以得到噪聲的描邊了，再混合一個顏色即可，

2.4、基礎色

對貼圖進行采樣，然后與描邊色混合，最終輸出到片元著色器的Base Color，

2.5、完整節點圖

最終完整的節點圖如下，肯定看不清，只是給大家看下整體結構，想要看細節的同學可下載本文的工程原始碼進行查看，

2.6、粒子的節點圖

粒子的ShaderGraph比較簡單，主要控制在粒子系統的引數本身，Shader Graph節點圖如下，

六、材質球設定

本文的角色的材質球分了多個，比如頭發、衣服、表情等，

我們分別給每個材質球設定對應的shader，設定貼圖等，

因為消融的時候要統一控制disolve屬性，下文我們就是用C#代碼來對齊進行統一控制好了，

七、粒子系統設定

效果二需要一個粒子效果，貼圖我自己畫了一個，作為灰燼的貼圖，如下

粒子的設定關鍵的一步就是設定Shape，是用角色的網格作為Mesh，如下，

這樣粒子噴射的時候就是以網格的形狀來噴射了，

還有就是粒子的噪聲擾動，可以對粒子運動軌跡、旋轉、大小進行擾動，

另外是一些生命周期內的屬性控制，比如作用力、顏色、大小等，

關于粒子系統的教程，我之前寫過幾篇文章，感興趣的同學可以看下：
《【游戲開發實戰】Unity使用ParticleSystem粒子系統模擬藥水在血管中流動（粒子碰撞）》
《【游戲開發實戰】手把手教你使用Unity制作一個飛機噴射火焰尾氣的粒子效果》
《【學Unity的貓】第十五章：Unity粒子系統ParticleSystem，下雪啦下雪啦》
《【游戲開發實戰】Unity使用ShaderGraph配合粒子系統，制作子彈拖尾特效（Fate/stay night金閃閃的大招效果）》
《【游戲開發實戰】Unity ShaderGraph溶解效果運用到粒子系統中（利用頂點色的alpha通道控制）》
《【游戲開發實戰】權游紅袍女在火中看到了什么，我看到了…（Unity | 粒子系統 | 火焰特效 | ParticleSystem | 手把手制作）》

八、C#代碼控制材質球屬性

我們做一下簡單的UI界面，弄一個Slider滑塊，如下，

創建一個PlayerMaterialCtrler.cs腳本，用于控制角色材質球屬性，
代碼很簡單，如下

using UnityEngine;
using UnityEngine.UI;

public class PlayerMaterialCtrler : MonoBehaviour
{
    [SerializeField]
    private Slider disolveSlider;
    private Material[] materials;
    private int disolveId;

    void Start()
    {
        var renderer = gameObject.GetComponentInChildren<Renderer>();
        materials = renderer.materials;
        disolveId = Shader.PropertyToID("disolve");
        disolveSlider.onValueChanged.AddListener((v) =>
        {
            for (int i = 0, len = materials.Length; i < len; ++i)
            {
                materials[i].SetFloat(disolveId, v);
            }
        });
    }
}

我們再創建一個ParticleSystem.cs腳本，用于控制粒子的噴射，代碼如下，

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ParticleCtrler : MonoBehaviour
{
    [SerializeField]
    private Slider slider;

    [SerializeField]
    private ParticleSystem ptc;

    void Start()
    {
        var emission = ptc.emission;
        var ptcMain = ptc.main;
        emission.rateOverTime = 0;
        slider.onValueChanged.AddListener((v) =>
        {
            if (v > 0.7f)
            {
                emission.rateOverTime = 0;
            }
            else if (v < 0.35f)
            {
                emission.rateOverTime = (int)(v * 1000);
                ptcMain.startSize = 0.07f * v;
            }
            else
            {
                emission.rateOverTime = (int)((0.7f - v) * 2000);
                ptcMain.startSize = 0.07f * v;
            }
        });
    }
}

把PlayerMaterialCtrler.cs腳本掛到角色根節點上，并賦值Slider物件，

把SparkParticle.cs腳本掛到粒子節點上，并賦值成員物件，如下

九、最終運行效果

運行Unity，最終效果如下，

十、工程原始碼

本文工程原始碼我已上傳到GitCode，感興趣的同學可自行下載學習，
地址：https://codechina.csdn.net/linxinfa/UnityDissolveAshEffect
注意：我使用的Unity版本是2021.1.7f1c1，使用的ShaderGraph版本是11.0.0，如果你使用的版本與我不同，可能會有兼容問題，

十一、完畢

好啦，就到這里吧~
我是林新發：https://blog.csdn.net/linxinfa
原創不易，若轉載請注明出處，感謝大家~
喜歡我的可以點贊、關注、收藏，如果有什么技術上的疑問，歡迎留言或私信~