前言
上一篇的時候我們將大致上的雲朵以及顏色等等設定完成,這一篇主要是要加強霧氣以及整體模型形狀呈現的問題,因為地球是圓的所以我們看天空的時候其實也是圓的,所以整個形狀不應該是呈現這麼圓平的,其實應該是要比較像碗公的形狀。
Step 1 . 要製作碗公形狀需要四個主要的Node, Normal Vector 、Object、Position、Distance,建立好這四個Node以後先將Object 以及Position串到Distance的A、B通道,而Normal Vector 則需要新增另一個Multiply來串接,將剛剛串好的Distance串到 Multiply 的B 通道, Normal Vector 串到 Multiply 的A通道。
接著我們在新增一個Add Node接收剛剛的資訊以及從Vertex offset 串到Unlit master的Position上看一看。

我們看到這個形狀變成很像漏斗,不是我們想要的效果,而且目前也沒有屬性可以調整,所以目前的測試是可以改變我們材質呈現出來形狀的改變。

Step 2. 接著我們來將剛剛的狀況變好,首先先新增一個Divide 去分裂,接著我們建立一個Vector 1 屬性當作控制形狀改變的Node,這邊我叫他Curvature Radius。
接著建立一個Power node 串到原本Multiply的B通道,而 Multiply的A通道則接收原本建立好的Normal Vector,這邊串好後我們將原本的Add當作整Position,
所以我們要將Multiply串到Add的A通道,Add的B通道則是接收原本Vertex offset的資訊,串好後我們一樣 Unlit master的Position。

這時候可以save Asset以後回到Scene調整一下 Curvature Radius 的數值,看起來起作用了。

這邊隨便調整一下數值看看,整個雲霧的形狀真的很像碗公。

Step 3. 目前的雲霧看起來已經越來越像一回事了,顏色上面雖然有一些亮度以及深淺,但是在現實世界的狀況不可能越遠的地方看到的顏色還是一樣,我們就來解決這個問題吧。
如果有玩3D材質的人應該對於Fresnel Effect不陌生,我們就是要用Fresnel Effect來改變目前看到的狀況。
首先建立一個Fresnel Effect Node,在這個node power的部分我們建立一個Vector 1 屬性來控制 Fresnel Power,接著建立一個Multiply 接收Combine Noise的資訊當作A通道,而B通道則接收 Fresnel Effect Node out,這邊我們還需要建立一個 Vector 1 屬性來控制 Fresnel 的Opacity, 建立好以後在新增一個 Multiply Node,這邊的 Fresnel 是要控制 Color 以及Emission,所以我們先新增一個Add接收整個 Fresnel 資訊當作B通道,而原本的color也是要保留所以當作Add的A通道,最後串到 Unlit master的 color就完成了我們的顏色部分。
而Emission 的部分將 整個 Fresnel 資訊 給原本Emission的A通道當作主要資訊,串好以後 串到 Unlit master的 Emission。

這邊可以看到 Fresnel 的兩個數值調整的不同
Fresnel power 數值大小代表著在哪邊會有Fresnel 的效果強度
Fresnel opacity 數值則調整了 有Fresnel 的效果 部分是否更加發光的部分

以下圖片數值為 Fresnel Power :26.9 Fresnel Opacity:500

以下是我調整玩一下覺得還不錯的效果,可以看到邊界的地方比較亮也比較白,而離鏡頭越近的地方則是色彩陰影越明顯,果然 Fresnel 還是很強大的。

Step 4. 目前的雲霧看起來覺得不夠霧,所以再來我們來利用一些Node來讓雲的霧氣看起來更多一些。
首先霧氣的感覺要用Alpha的通道來呈現,所以我們先將Unlit Master的設定更改一下。
- Surface Type 改為 Transparent
- Double – Sided 打勾

接著我們來串Alpha所需要的node,首先先新增一個Screen Position 並將Mode更改為Raw,並串到Split去分裂只取A通道串接到Subtract Node的A通道,在來新增一個Scene Depth Node並將Mode改為Eye 串到另一個新增的 Subtract Node的A通道,而這個 Subtract Node 的B通道則是接收原本Screen position取出的A資訊,在來新增一個Split 去接收這兩個合在一個Subtract 資訊當作 A通道,因為我們需要可以調整雲霧的Node,所以新增一個Vector 1 屬性控制 Split 的B通道,然後新增一個Saturate接收這些資訊後餵給Smooth Step的 In,最後我們就完成了, 把 Smooth Step的 out 串到Unlit Master Alpha 儲存即可。

串好以後我們可以看到Alpha的功用發揮了作用,shader Graph真的是很神奇的東西呢!

小結:
這次的練習有別以往的練習,這次有利用到的建模的方式配合Shader Graph才有辦法呈現雲霧的效果,同時這次的練習也是可以用到許多自然流動的物理現象上面,如果讓波動以及顏色上的調整期時就蠻像海浪的樣子,對於未來建立場景上多少有些幫助,最重要的是學習到越多的Node串好以後就會因應需求更快的串接出想要呈現的效果了。

Reference: https://www.youtube.com/watch?v=Y7r5n5TsX_E&list=PLVmb_qp6XRczuNNbmr_nSPVUH3OOTrkjB&index=7