[Shader筆記] 力場特效 Force Field

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

詹閔翔
Eric’s publication
8 min readSep 30, 2019

--

前言:

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

所以如果你沒有任何基礎也可以參考我之前寫的文章

[Shader筆記] 連你阿罵都能看得懂的Shader介紹
[Shader筆記]透明物體(Z-Test、Z-Write、Z-Buffer、Alpha Blending)
[Shader筆記] 程序化圖案 Procedural pattern
[Shader筆記]頂點動畫和紋理動畫
[Shader筆記]法向量Normal Vector
[Shader筆記]基礎光照模型

應該可以幫助你對底下這篇文章有更深入的理解
當然你直接硬啃應該還是吃得消XD

知識點:

  1. 接觸面高光 (Depth Intersection)
  2. 邊緣高光( Fresnel Combine)
  3. UV動畫 (Pattern Animation)

面板數值:

面板數值

EdgeOffset : 接觸面高光範圍
Pattern : 力場貼圖
TileOffset:
「xy」代表貼圖重複貼的次數(視覺化的理解為數字越大貼圖越小)、
「zw」 UV動畫的方向&速度
Fresnel Power : 「非涅爾反射」效果強度
Color : 力場顏色
Fill Amount : 整體Alpha強度

邊緣高光:Fresnel Effect非涅爾特效

接觸面高光 Depth Intersection

要理解這個特效有兩個步驟

Step1 找到位於邊緣、或有碰撞的點
Step2 對這些點進行貼圖、改變顏色

  • 原理介紹:

引用阿祥的開發日常「一旦深度值近似於像素的世界位置z,則最終顏色將變為相交顏色。」

深度值就是我們的Screen Position
像素的世界位置z則是Scene Depth

所以我們要做的就是將Screen Position、Scene Depth 做相減,一旦趨近於0我們就知道該點位於邊緣

  • 節點介紹:
  1. Screen Position

Mode選擇Raw,返回攝影機空間下的網格頂點座標(View/Eye/Camera Space)

2. Scene Depth

提供目前相機深度緩衝值,這邊Sampling mode選擇eye表示輸出深度值會轉換到攝影機空間

3. Smoothstep

他是一個曲線形狀的插值運算,會把輸入進來的值限制在自定義的範圍並且平滑映射到smooth step函數上

4. One Minus

由於Shader中有很多時候都會使用0~1區間的值,所以當我們對目標數值使用One Minus 時可以把輸入的數值做鏡像映射處理

y=x & y=1-x

UV動畫

  • 原理介紹:

在shader 中我們使用Texture來為我們的3d模型做貼圖、紋理,而這裡的UV動畫即是讓材質每一刻獲得的貼圖都是不一樣但連續的

這邊我們讓貼圖的中心點座標依照我們給定的方向參數不斷的進行平移

  • 節點介紹:

1.split :
這個節點幫助你把原本4個參數的向量拆解成4個分量

2. Combine :把原本四個獨立參數作為輸入,並且可以指定要輸出的向量

3. Tiling And Offset

算是一個整合用節點,它可以幫助你把原本的UV 貼圖重新Scale 、平移

4. Time

特效疊加

全部的Shader graph

--

--

詹閔翔
Eric’s publication

現職專案管理與RD部門經理。畢業於國立台北科技大學 互動設計系。專注於各種可能的技術解決方案,喜歡從技術的角度解決問題,也喜歡接觸各種新科技跟open source專案與時代一起進化,並樂於將所見所聞製作成人人都能輕鬆理解的教學文章分享於網路平台。目前主力為軟體架構工程與系統開發