整體思路:
部分思路有參考壹些文章與視頻教程。
項目安裝並配置好通用渲染管線(URP),新建壹個Lit Shader Graph:
我使用的URP版本為10.6.0,暫時沒升級到新版本,不過只要思路壹致,新版本的操作應該也差不了太多。
打開新建的ShaderGraph,傳送門需要透明顯示,並且前後兩面都要渲染,在Graph Settings修改這兩個配置項:
先來做紋理的旋轉與扭曲。依然是用Voronoi節點,其他的紋理也可以,好看就行。Twirl節點可以將紋理旋轉扭曲,Strength參數決定了扭曲的力度:
通過調整Twirl的Offset參數可以讓它動起來,新建壹個TwirlSpeed屬性,值先隨便填個0.2,與Time節點的值相乘連入Offset,順便把其他要在外部調整的屬性壹並創建好,並在Node Settings中設置好它們的值:
觀察可以發現,這樣的旋轉扭曲在視覺上並不是統壹往壹個方向流動。個人覺得這個效果不錯,但還不是非常OK,需要讓整個圖像真正地旋轉起來。
新建壹個Rotate節點,並新建壹個名為RotateSpeed的Float屬性(值為2),將其與Time相乘,然後連到Rotate節點的Rotation參數中,之後Rotate節點的輸出連到Twirl節點的UV輸入:
這部分就完成了,將TwirlSpeed臨時調為0,可以更清楚地看到旋轉效果。
接下來挖空中間與邊緣部分,需要用到壹張紋理做遮罩。新建壹個名為Mask的Texture2D屬性,設置默認值為自帶的Default-Particle紋理:
用Sample Texture 2D節點對其采樣,並用Voronoi的輸出減去采樣結果:
中間出現了空洞,但不夠明顯,對Mask的采樣結果做進壹步處理,先用乘壹個正數擴大中心,再用指數函數減小邊緣:
如果希望這部分可以在外部調整,可以將兩個Float變量轉換為屬性。
在挖空邊緣之前,先來控制壹下圖形中紋理的溶解程度。新建壹個Dissolve的Float屬性(值為2),將Subtract節點的輸出做壹個Saturate,然後用指數函數控制溶解:
因為之前做了減操作,可能會出現負數,Saturate用來將輸入限制在0到1範圍內,避免Power節點出錯。
溶解這壹步不是很有必要(我後來又把Desolve改回1了),如果希望能調整條紋的稀疏程度,讓它們看起來變厚(調小)或變薄(調大),可以加上。
接下來挖空邊緣,依然是利用Mask,將采樣結果與另壹個正數相乘,讓它變得大壹些:
再與紋理部分相乘:
邊緣挖空也完成了。
最後染色並查看效果,新建壹個Color屬性,模式設置為HDR,這樣才能閃閃發亮,調壹個喜歡的顏色(如果太亮了就把強度調低點):
混合顏色並輸出到Fragment:
以這個ShaderGraph新建壹個材質:
場景中新建Global Volume,開啟Bloom後處理:
相機的後處理也記得開壹下:
場景中新建壹個Quad,拖入材質可以看到效果:
如果沒在動的話,把Always Refresh勾上:
調整後的各項屬性值:
可以嘗試不同的屬性值,以達到不同的效果:
完整的ShaderGraph:
粒子效果基本照抄印度小哥的教程,根據個人需求有壹些修改。
單獨的環繞粒子效果:
環繞粒子需要發光,新建壹個粒子材質,Shader選擇Universal Render Pipeline/Particles/Unlit,按如下配置:
在Quad下新建壹個Particle System,Renderer中拖入剛才創建的粒子材質,其他大致這樣配置:
粒子的配置比較隨意,根據個人喜好可以有不同的配法。這裏為了讓粒子環繞中心旋轉,用的是甜甜圈形狀,如果運動要更隨機壹些,可以再加上Noise。
這個感覺可加可不加,比較簡單就不說明了。
最終效果:
壹些傳送門的模型會給出特效所在的Mesh,這種情況下只要將傳送門材質拖上去,適當調整粒子的形狀即可。另外記得關閉陰影投射,避免影子穿幫:
項目中用到的素材:
Portal by Vetech82
Sand portal by Yarelon
壹個題外話,mac上如果出現ShaderGraph編輯界面卡頓掉幀的情況,可以嘗試在Player設置中臨時使用OpenGLCore圖形API並重啟編輯器,ShaderGraph會變得很絲滑,但缺點是運行遊戲時可能會死機。