Strumpy Shader Editor入門教程

   對於3D遊戲來講，有不少絢麗的效果，都是靠shader（着色器）來實現的。不過不少朋友估計都不會編寫shader，阿趙我本身也只是看了個入門，明白了它的原理，不少具體的效果都寫不出來的。此次來介紹一個Unity3D的第三方shader編輯器：Strumpy。這個編輯器是徹底可視化編輯，使用起來相對簡單一點。

先來看看咱們此次須要作的例子：

咱們須要使用Strumpy，編輯出這樣一個shader：包括了漫反射通道、法線通道、高光通道，以及在模型的邊緣運動的光效。

很顯然，Unity3D自帶的shader沒有能直接實現這樣的功能的，最多也只能使用法線和高光通道而已。

 

      因爲這個例子稍微複雜，因此咱們先來作一個更簡單的例子，來熟悉一下strumpy的界面和基本操做。

 

首先確定是要先下載Strumpy插件了。在Asset Store裏面有，免費下載的。我這裏使用的是4.0a版本。

下載完以後導入，會看到多了一個選項：

 

 

選擇以後打開了Strumpy的編輯窗口： 

 

Flie的功能很直觀，新建，讀取，保存和導出的功能，咱們能夠先看看讀取功能

 

插件自帶了一些已經編輯好的範例，有興趣的朋友能夠逐個看看，會有很大的收益。

 

而後咱們來正式開始作這個簡單的例子，咱們準備了一張帶有透明通道的貼圖（拿斬首大刀的阿趙），接下來咱們作一個shader，把這張貼圖顯示在一個面片上面，使它實現漫反射通道和透明通道的顯示。

 

咱們新建一個着色器編輯： 

 注意看，新建時，在Settings的標籤是紅色的，而後Shader Name也是紅色的，這是提醒咱們，每個shader必需要先有一個名稱，而這個名稱就是之後你在材質欄裏面選擇的材質名稱了。好比你能夠用「myshader/test」，這樣test材質會出如今myshader下面。

 

 

輸入材質名詞以後，咱們先來Inputs裏面，新建一個輸入。這個輸入，就是咱們日常在Unity自帶的材質球裏面看到的輸入通道了。假如咱們須要它能調節顏色，那麼就要新建一個顏色的輸入，假如須要調用貼圖，就要新建一個貼圖的輸入。這裏咱們新建一個Unity預設的MainTexture。熟悉用腳本替換材質貼圖的朋友估計很熟悉這個標籤的含義了。

 

 

新建以後，咱們能夠看到，出現了一個貼圖選擇的通道，就像咱們日常操做的自帶材質球同樣。

 

接下來咱們會新建一些節點，而後對他們進行編輯。

建立節點的方式有兩種：

第一種是在Nodes裏面選擇相應的節點：

 

第二種是在節點編輯的窗口鼠標右鍵單擊，選擇相應的節點。 

我我的比較習慣第二種方法。

 

咱們選擇了一個Sampler2D的輸入 

剛生成的時候，這個節點是紅色的，由於咱們沒有指定輸入的來源。想起剛纔咱們新建的Input了吧？那個MainTexture指定在這裏。

 

在選中該節點的狀況下，來到Node的標籤，會看到提示錯誤了

 

咱們選擇_MainTex

 

這時候，節點就再也不是紅色了，而是出現了兩項輸出，分別是2D採樣和UV信息。節點名稱裏面，也會相應的顯示出_MainTex，也就是咱們剛纔新建的Input的名稱。

 

接下來咱們新建一個Tex2D方法節點。

 

而後像上圖同樣，用鼠標把他們之間連起來。

 

 這時候，把咱們預先準備好的貼圖指定在貼圖通道里面

 

點擊預覽窗口的Update Preview，會看到預覽的物體上面出現了咱們的貼圖

 

爲了便於觀察，咱們選擇一個片面模型。這時候，漫反射通道已經完成了，接下來咱們繼續作透明通道。

 

如上圖同樣，把A鏈接到Alpha通道。

 

而後來到Settings，按上圖設置一下。

 

打開背景顯示，會看到透明通道已經生效了。

 

在完成了以上的小例子以後，咱們正式來解釋一下Strumpy各個部分的意思吧。 

在master裏面，分別是各個通道的最終輸出。

 

節點是經過有方向性的線條來鏈接的，分爲輸入端和輸出端，上圖是一個單向輸入輸出的例子。

 

再來是一個運算的例子，Add是相加的操做，這裏是兩個輸入端進入了相加，而後輸出一個結果。

在這裏要說明一下的是，這些操做很大一部分都是數學運算的方法，好比加減乘除、sin、cos之類，各位在學習以前最好要先理解他們的意思。好比相加就是互相疊加，兩張圖相加會整張圖都變得更亮。相乘是波峯波谷的疊加，兩張圖相乘，會使亮的地方更亮，暗的地方更暗。其餘的方法請各位自行百度去查閱了，就不一一說明。

 

再來看看設置的選項 

若是曾經本身寫過shader的朋友，對於這些選項應該是很熟悉的。好比不少朋友問的雙面顯示，其實就是把CullMode選擇爲Off就行。

 

 

介紹完基本功能，咱們正式的來作此次的目標例子了。 

這裏咱們準備了一個模型。

 

模型帶有了漫反射貼圖和法線貼圖。

 

首先新建一個着色器編輯，而後給shader起名爲：myShader

 

按照第一個例子的操做，咱們完成了漫反射通道。

 

爲了應用在咱們的模型上，咱們須要先生成一個shader。選擇導出（Export As）

 

給shader起一個文件名。這個名稱沒有太大的意義。

 

導出以後，咱們來到材質球選擇的地方，會看到了咱們新建的myShader，選擇它。

 

而後指定漫反射貼圖，咱們的模型變成了上圖的效果。

 

接下來，咱們在Inputs裏面新建一個凹凸貼圖的輸入

 

而後完成法線通道節點的編輯。因爲須要使用法線貼圖，因此須要加入一個UnPackNormal的節點。

 

這時候，咱們會發現輸入通道處多了Normalmap通道，咱們把法線貼圖賦予上去。模型變成上圖的效果。

 

咱們再新建一個顏色輸入，做爲高光的顏色。

 

完成高光通道和光澤強度的節點編輯。

這裏我用了一個Multiply（相乘），目的是讓光澤強度範圍的對比度更大，顯得高光會更尖銳一點。高光顏色直接鏈接到Specular通道。

 

如今咱們的模型已經擁有了必定的質感了。因爲模型原來是沒有法線貼圖的，我拿了漫反射貼圖來直接轉換，因此效果差了點，有興趣的朋友能夠本身作法線貼圖加強效果。

 

接下來作有動畫效果的光。

咱們新建了幾個輸入：發光顏色（_LightColor），一個發光顏色的遮罩貼圖（_Light），一個浮點（_dir）做爲光運動的方向，一個範圍選擇（_RimPow）做爲發光強度的控制。

 

這張是發光遮罩貼圖，是一張黑白的梯度圖。

 

這一個步驟的節點編輯有點複雜，基本的思路是將顏色和遮罩貼圖混合在一塊兒，並用時間控制UV動畫：

一、遮罩貼圖我用了ViewDirection和Fresnel結合控制顯示方向，並用_RimPow做爲顯示方向的次冪控制顯示強度。

二、爲了讓光會隨着時間本身作動畫，我是用來Time和_dir相乘，這樣能夠控制動畫的速度和方向。

三、爲了讓UV移動作動畫，我用了UV_Pan。記得UV_Pan須要選擇輸入的軸，這裏我選擇了Y軸。

 

四、最後，我把發光顏色和遮罩運算的結果相乘，達到疊加波峯改變顏色的目的。

 

最後，發佈shader，根據須要選擇相應的遮罩貼圖，指定發光的顏色、強度和方向，咱們的例子就完成了。

 

補充說明幾點：

一、可能不少功能自帶的shader都有，不過有時候你就是會須要一些功能特殊一點的shader，具體須要什麼輸入通道，和怎樣的操做，請根據實際狀況考慮。

二、關於即時鏡面反射的shader，估計不少朋友都很感興趣。不過我這裏不打算詳細介紹，由於unity沒有直接即時反射運算的shader。

簡單說明一下其原理：

在自帶的水面和憤怒機器人場景裏面，咱們都看到了相似鏡面反射的效果，其實這都是一種欺騙。作法不算複雜，實際上是根據了當前攝像機的位置，新建了一個相對角度的反射攝像機，並把反射攝像機看到的內容渲染成RenderTexture。最後把RenderTexture和位置矩陣輸入到普通材質的貼圖通道，達到好像即時反射的效果。水面的例子作法會傻一點，由於它是針對水面物體本身生成了一個反射攝像機，因此的反射效果只會對水面自己有效果，每一個能夠反射的面，都要單獨生成。而憤怒機器人裏面的例子會聰明不少，它會在攝像機的腳本里面根據預先選擇的可反射的圖層，統一輩子成了一張RenderTexture，並讓全部能夠反射的shader使用。

 

結合着即時反射這個例子，能夠看出實際上不少特殊的效果，都不是單獨的shader能直接實現的，還須要到其餘的腳本去配合。