文章目錄
- 一、前言
- 二、2D描邊效果
- 1、匯入一張png素材圖片
- 2、創建一個Unlit Graph
- 3、使用Sample Texture 2D采樣圖片
- 4、顯示描邊的思路
- 5、使用Tilling And Offset節點控制UV，實作圖片平移
- 6、得到輪廓描邊
- 7、描邊與原圖相加
- 8、最終顯示
- 三、描邊升級版
- 1、帶顏色的描邊
- 2、描邊加噪聲
- 3、再加點變化
一、前言
我之前寫了一篇文章：ShaderGraph使用教程與各種特效案例：Unity2020（持續更新）
又有小伙伴私信我給我提出了難題，
這個真的難到我了，如此藝術性的描邊效果，以我目前的水平，實在無法使用ShaderGraph的Unlit Graph做出來，
不過，關于2D描邊效果，我覺得可以講一下，
本文的最終效果：
本文的Demo工程已上傳GitHub，地址：https://github.com/linxinfa/UnityShaderGraphOutlineEffect
感興趣的同學可以自行下載學習，
二、2D描邊效果
1、匯入一張png素材圖片
匯入一張png素材圖片到Unity工程中，
如下，注意勾選上Alpha Is Transparency，不要勾選Generate Mip Maps，
2、創建一個Unlit Graph
由于我們要處理的是2D圖片，所以使用Unlit Graph，在Project檔案夾中右鍵滑鼠點擊選單Create - Shader - Unlit Graph，創建一個Unlit Graph，
如下：
3、使用Sample Texture 2D采樣圖片
我們使用Sample Texture 2D對圖片進行采樣，顯示出來的效果，會看到是下面這樣子：
Alpha通道的顯示有問題，這個時候用到AlphaClipThreshold了，
規則：AlphaClipThreshold的值比Alpha大，則對應的像素不顯示，
如下，就可以正常顯示一張帶alpha的圖了，
4、顯示描邊的思路
我們可以把圖片朝各個方向分別平移n個像素，然后疊加，
然后再減去原圖，這樣就得到了描邊輪廓了，
5、使用Tilling And Offset節點控制UV，實作圖片平移
根據上面的思路，我們現在要做的是從各個方向平移圖片，而平移圖片，就需要用到Tilling And Offset節點了，
因為朝各個方向平移，需要用到一些共用的變數：原圖、偏移值，所以我們先定義兩個變數，
如下，就是對應朝左上角平移，
以此類推，得出各個方向的平移，
6、得到輪廓描邊
做種疊加后取alpha通道，再與原圖的alpha通道做相減，這樣就得出了邊界輪廓了，
7、描邊與原圖相加
有了描邊，就可以與原圖相加了，
8、最終顯示
最后再利用AlphaClipThreshold即可正常顯示描邊效果了，
三、描邊升級版
1、帶顏色的描邊
描邊與一個顏色相乘，最后再作用到原圖上，
2、描邊加噪聲
通過兩個Simple Noise分別做Step在相乘，得到一個混合的噪聲，
把噪聲與描邊相乘，則得到一個帶噪聲的描邊效果了，
最終顯示
3、再加點變化
我們可以再加點動態的變化，效果如下，感興趣的同學可以下載我的Demo學習下，
最終效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/266020.html
標籤：其他
上一篇：iOS常用預處理指令（移除程式中的identifier、發布模式關閉NSLog、匯出和隱藏符號）
下一篇：階加遞回法