Unity中 ShaderGraph 實現(xiàn)旋渦傳送門效果入門級教程(推薦)
若你的工程還沒有進行基礎(chǔ)配置,請查看我的博文Unity 之 ShaderGraph入門使用詳解,按照步驟操作完成配置即可,還能順便學(xué)習(xí)一下基礎(chǔ)操作流程哦~
本文手把手教你制作旋渦效果,入門級教程,還不快動手試試?
一,最終效果展示
老規(guī)矩,直接上效果圖:
二,創(chuàng)建PBRGraph
在Project面板右鍵 --> Create --> Shader --> PBRGraph:
重命名:RPAShaderGraph(隨意)
雙擊RPAShaderGraph打開編輯界面
三,實現(xiàn)原理介紹
通過Twirl 旋轉(zhuǎn)節(jié)點對Gradient Noise 梯度噪聲節(jié)點進行操作,就可得到一個旋轉(zhuǎn)的旋渦效果。
然后我們添加時間節(jié)點調(diào)整Twir的偏移量,讓其自動轉(zhuǎn)起來,這個動態(tài)的旋渦效果基本就實現(xiàn)了。
四,完整效果實現(xiàn)
就接著三種的效果,繼續(xù)說吧:
在“PBRGraph”面板空白處 右鍵 --> 選擇“Create Note” 創(chuàng)建Twirl(直接搜索名字即可)。
同理創(chuàng)建“Gradient Noise” 和 “Time” 節(jié)點,然后將其輸入輸出連接如下圖:
現(xiàn)在我們已經(jīng)有了一個動態(tài)的旋渦,在一中的效果圖上我們可以看到,它并不是黑白色的,下面修改一下顏色:
創(chuàng)建“Color”顏色節(jié)點 和 “Multiply”乘法節(jié)點,我們將“Gradient Noise”節(jié)點的輸出 和 “Color”顏色節(jié)點的輸出都連接到“Multiply”乘法節(jié)點的輸入上:
然后修改下“Color”節(jié)點的顏色,就可以得到一個其他顏色的旋渦了:
接下來,將帶有顏色旋渦的“Multiply”乘法節(jié)點輸出,連接到”PBR Master”主節(jié)點的Albode
輸入上,即可在預(yù)覽圖上看到旋渦的效果上了:
現(xiàn)在預(yù)覽效果上顯示的是一個正方形的,這個樣子看起來有點丑奧~ 而且和想要的效果也不一致,那怎么辦呢?
添加一個圓形的遮罩不就行了:添加“Ellipse” 圓形節(jié)點,將其輸入節(jié)點的寬高調(diào)整為0.8,然后將輸出節(jié)點,連接到”PBR Master”主節(jié)點的Alpha
輸入上:
然后在點擊Master 主節(jié)點的“設(shè)置”按鈕,將“Surface”屬性設(shè)置為“Transparent” 透明的,即可得到被遮罩的效果了:
其實這時的旋渦效果以及完成了,下面我們添加兩個變量,來對旋轉(zhuǎn)時間和旋渦的大小進行控制,這樣我們就可以在材質(zhì)球上進行數(shù)值修改,從而方便的得到想要的效果。
在“Blackboard” 上創(chuàng)建一個“Verctor1”的變量,將其拖拽到空白處,并賦值給“Twirl”的“Strength”輸入,操作步驟如下:
同理我們在創(chuàng)建一個“Verctor1”變量,然后創(chuàng)建一個“Multiply” 乘法節(jié)點,將其“Time”和"V1"相乘后,輸出給“Twirl”的“Offset”輸入:
至此全部制作就完成了,完整RPA Graph如下:
PS:注意需要將主節(jié)點的“Surface”屬性設(shè)置為“Transparent”透明的,上圖并沒有體現(xiàn)出來哦~
五,應(yīng)用到場景中
在“RPA Graph” 編輯界面右上角,點擊“Save Asset” 保存一下。然后創(chuàng)建材質(zhì)球,將其材質(zhì)選定為剛剛保存的這個“RPAShaderGraph”。
這里提供一個快捷創(chuàng)建材質(zhì)球的方法,鼠標選中我們保存的“RPAShaderGraph”文件,然后右鍵創(chuàng)建材質(zhì)球,這樣我們創(chuàng)建出來的材質(zhì)球,就自動使用這個Shader了。
最后一步,創(chuàng)建“Plane”將其材質(zhì)賦值為上面創(chuàng)建的材質(zhì)球,可以得到最終效果,這時我們可以編輯之前設(shè)置好的“Streght”和“Time”屬性的值,就可以直接調(diào)節(jié)想要的效果了:
到此這篇關(guān)于Unity中 ShaderGraph 實現(xiàn)旋渦傳送門效果入門級教程(推薦)的文章就介紹到這了,更多相關(guān)Unity ShaderGraph旋渦傳送門內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在C#中調(diào)用VBScript、javascript等腳本的實現(xiàn)代碼
在C#中調(diào)用VBScript、javascript等腳本的實現(xiàn)步驟,需要的朋友可以參考下。2009-11-11