[Shader筆記] 邊緣光特效 Fresnel Effect

Shader遊戲特效魔法師工作坊筆記

詹閔翔
Eric’s publication
5 min readSep 23, 2019

--

前言:

shader graph 的出現提供給任何人都可以在短時間製作出一個複雜特效的能力,但是在使用(或者說熟練)這個工具以前其實還是需要最基本的Shader入門知識,包括渲染管線、包括貼圖原理、深度測試…

所以如果你是沒有任何基礎的人也可以參考我之前寫的文章
[Shader筆記] 連你阿罵都能看得懂的Shader介紹
[Shader筆記]透明物體(Z-Test、Z-Write、Z-Buffer、Alpha Blending)
[Shader筆記] 程序化圖案 Procedural pattern
[Shader筆記]頂點動畫和紋理動畫
[Shader筆記]法向量Normal Vector
[Shader筆記]基礎光照模型
可能可以幫助你對底下這篇文章有更深入的理解
當然你也可以直接硬啃我相信應該還是吃得消XD

Fresnel特效製作

簡述:幾何物體的邊緣光

原理:

菲涅爾反射:

是由法國物理學家菲涅爾推導出的一組光學方程式,用於描述光在兩種不同折射率的介質傳播時的反射與折射。方程式中所描述的反射被稱作「菲涅耳反射」。(wiki節錄)

代表視線的“入射角”同時也是我們的view vector
代表幾何物體表面朝向的“法線”也就是法向量 normal vector

以及這個菲涅爾反射對特效的意義

1.顏色黑色表示越接近球的中心,表示入射角和反射角的和越小(大於0)
2.顏色白色表示越接近球的邊緣,表示入射角和反射角的和越大(小於180)

於是乎我們就得出球體的邊緣拉~

實作

雖然這一part是屬於實作的,不過在開始之前我們需要先觀察一下
Fresnel effect 的所有輸入屬性

Normal : 法向量
View Dir : 視線方向也就是代表入射角的向量
Power:Fresnel 特效的強度

公式

Out = pow((1.0 — saturate(dot(normalize(Normal), normalize(ViewDir)))), Power)

好的,讓我們一個一個來

View Dir
其實就是我們攝影機的朝向,直得一提的是如果按空白鍵在叫一個
view direction你可以得到一個可以自由選擇要輸出世界座標空間、物件座標空間、切線座標空間的向量

Normal
雖說只要填入法線貼圖就好(空白鍵+搜尋Texture),但這邊有一個小知識點

「由於我們的View Dir是世界座標空間下的向量,
但是貼圖進來的法象量是切線空間,
所以這裡進來的Normal必須轉換成世界座標!!!
所以這裡進來的Normal必須轉換成世界座標!!!
所以這裡進來的Normal必須轉換成世界座標!!!」

很重要所以重複三次

By the way PBRSubgraph不是什麼神秘的功能,裡面長這樣

只不過是幫你多做Tiling、Offset

Power
Pow 白話文解釋就是強度,不過這邊的pow 是指數的意思,配合公式當pow越小邊緣光的範圍就越大

pow = 1

Pow = 0.5

Pow = 2

全部長這樣

參考資料:

--

--

詹閔翔
Eric’s publication

專注於各種可能的技術解決方案,喜歡從技術的角度解決問題,也喜歡接觸各種新科技跟open source專案與時代一起進化,並樂於將所見所聞製作成人人都能輕鬆理解的教學文章分享於網路平台。https://studio-frontend-one.vercel.app/