前言

????這期我們繼續(xù)練習(xí)ShaderGraph。今天我們要使用ShaderGraph制作龍巻風(fēng)效果。這期的內(nèi)容來自油管一位大神，B站有同學(xué)將視頻搬運(yùn)過來了。我在下面貼了視頻的地址，有需要的小伙伴可以對照學(xué)習(xí)。這期需要使用Blender和PS制作素材，Up使用的是Blender 2.79。所以使用2.8版本的同學(xué)要注意一下差異問題。另外我們這里還要使用一款Blender插件，UvSquares。

????下載地址如下：https://github.com/Radivarig/UvSquares

????安裝方法可以參考之前的筆記，這里不多贅述。

具體步驟

????首先我們打開Blender，將場景中的方塊刪除掉。選中方塊按X鍵或者Delete鍵。

????在Create選項(xiàng)中找到Cylinder（或者在場景中按Shift+A鍵選擇圓柱體）。

????將Vertives的值改為160。

????我們點(diǎn)擊Tools工具欄Shading下面的Smooth按鈕。讓圓柱體變得光滑。

????我們再點(diǎn)擊這個改為Edit Mode（編輯模式），（或者按Tab鍵）。我們按G鍵，沿著Z軸移動。

????我們點(diǎn)擊上圖的圖標(biāo)來切換至面片的編輯（或者按Ctrl+Tab鍵切換）。旋轉(zhuǎn)到可以看到底部的角度，選擇下面的圓形面片，點(diǎn)擊X鍵或者Delete鍵刪除面片。同樣方法再刪除最頂部的圓形面片。

????我們再切換到點(diǎn)編輯，環(huán)選（按住Alt鍵同時點(diǎn)鼠標(biāo)右鍵）最下方的點(diǎn)，縮小圓的大小。再環(huán)選最上方的一圈點(diǎn)，縮小圓的大小。編輯成類似下面的結(jié)果。

????接著我們按Ctrl+R鍵將環(huán)切，將圓柱體縱向細(xì)分。滾動鼠標(biāo)中鍵，增加分段數(shù)量，大概分出67段左右。

????我們再用環(huán)選選擇一條縱向的截面，按Ctrl+E鍵選擇Mark Seam（標(biāo)記接縫）。

????我們再點(diǎn)擊分出一個窗口。

????將窗口設(shè)為UV/Image Editor。

????在編輯模式下全選，點(diǎn)選U鍵，選擇Unwrap，將UV展開。

????我們可以在UV編輯器窗口看到UV已經(jīng)展開。

????如果我們安裝好UvSquares這個插件后，可以在UV編輯器中按T鍵打開工具欄，找到Mics的選項(xiàng)卡，點(diǎn)擊UV Squares下面的To Grid By Shape按鈕。將網(wǎng)格根據(jù)形狀轉(zhuǎn)換成方形。

????點(diǎn)擊后可以看到網(wǎng)格并沒有覆蓋整張圖，我們再使用S鍵縮放網(wǎng)格比例，按S鍵后再按X鍵或Y鍵可以控制縮放的軸向，我們將網(wǎng)格調(diào)整覆蓋整張圖大小。如下圖：

????下面我們切換到3D視窗，在編輯模式下，環(huán)選最頂部一圈的點(diǎn)，我們再打開Proportional Editing（比例編輯），設(shè)置為Enable（可用）。

????再將右側(cè)的Proportional Editing Falloff（比例編輯衰減）設(shè)置為Linear（線性）。

????我們確認(rèn)選擇最頂端的一圈點(diǎn)，按R鍵，再按Z鍵鎖定在Z軸旋轉(zhuǎn)，滾動鼠標(biāo)中鍵，控制可以影響旋轉(zhuǎn)的范圍。我們轉(zhuǎn)動180度左右。

????我們按A鍵全選，再按Ctrl+E鍵，選擇Clear Seam，清除標(biāo)記線。

????我們退出編輯模式，按R鍵，再按X鍵，讓物件繞X軸旋轉(zhuǎn)90度。再按Ctrl+A鍵選擇Rotation & Scale。

????接著我們導(dǎo)出FBX文件。按下面選項(xiàng)設(shè)置：

????下面我們打開Unity，將FBX文件導(dǎo)入進(jìn)去。

????打開Unity之前我們先要找一打龍巻風(fēng)的無縫貼圖，我們就利用視頻的截圖來制作一張無縫貼圖。下面這張是視頻的貼圖。

????下面我們打開PS，我們點(diǎn)選背景層，給圖片復(fù)制一個圖層。

????????下面是關(guān)鍵的一步來啦，我們選擇濾鏡>其它>使用位移濾鏡改變圖像查看其變化。

????????切換到仿制圖章工具對其過度部位進(jìn)行涂抹，直至看不出合并的接口。

????重復(fù)以上兩個步驟，直至出現(xiàn)圖片不在出現(xiàn)合并的接口。如果縫合的不好的話，在位移圖像會出現(xiàn)不自然的接縫，如果沒有下面就可以保存圖像，再次使用時已經(jīng)是無縫貼圖了。

????下面我們制作龍卷風(fēng)的Shader，附予材質(zhì)的步驟以前的筆記寫得很詳細(xì)了，我們這里不再贅述。我們只把關(guān)鍵的部分研究清楚。

????下面這部分輸出給主節(jié)點(diǎn)的Emission和AlphaClipThreshold端口。

????這里附加Fresnel節(jié)點(diǎn)，給物件表面增加一層發(fā)光，從左到右三個變量控制Fresnel的表面力度，發(fā)光強(qiáng)度和發(fā)光顏色。

????上面這張圖添加一張貼圖（我們剛才制作的無縫貼圖），用Time來控制貼圖的偏移，使貼圖可以自動運(yùn)動，這樣可以形龍卷風(fēng)轉(zhuǎn)動的效果，然后這兩個部分用一個Add節(jié)點(diǎn)疊加起來。

????上面這張圖可以控制龍卷風(fēng)的可見度，我們在黑板上創(chuàng)建一個命名為Alpha的Vector1變量并暴露出去（這個變量我們可以考慮用滑桿模式），當(dāng)我們調(diào)整Alpha的變量時（在1和0之間），這部分就可以根據(jù)貼圖的內(nèi)容判斷哪些內(nèi)容可見，哪些內(nèi)容不可見。

????另一個主要部分是連接主節(jié)點(diǎn)的Position端口的節(jié)點(diǎn)群。

????其實(shí)這部分實(shí)現(xiàn)的功能效果只是抖動而已，但卻非常復(fù)雜。原理嘛Up腦殼痛……

Up用縮略圖再顯示一次，如果還看不清，請小伙伴參照下面的視頻組裝。

????最后我們復(fù)制兩個龍卷風(fēng)的物件，嘗試修改物件的Scale值，我們可以讓X和Y保持一致，修改Z值可以產(chǎn)生出不同高度的龍卷風(fēng)，我們再創(chuàng)建兩個新的材質(zhì)球，也給它們附上Tornado的著色器，這樣我們可以分別給這幾個龍卷風(fēng)設(shè)置不同的參數(shù)，這樣龍卷風(fēng)就可以產(chǎn)生多個層次的感覺。

????可能是貼圖精度不高的問題，Up的龍卷風(fēng)還是有點(diǎn)問題。不過大體有點(diǎn)那個意思了。我們可以再調(diào)整一下參數(shù)來獲得更好的效果。