My friends, my life, my style - James S.F. Hsieh

12/15/2009

我的第一個比較像樣的 Pixel Shader - Glow Effect

Pixel Shader 也學了幾個禮拜是該寫個比較能看的東西, 昨晚想到之前在 Fnac 的 Mac 上看到一個很炫的 Slideshow Screensaver 可以用很炫的方式換幕, 它把相片拆成立體的碎片然後旋轉帶到下一張相片... 在網路上又找到另一個有趣的螢幕保護程式 PhotoJoy .... 效果也不錯!! 很寫試著用 Pixel Shader 來寫寫一些效果, 結果... 寫不出來 >_<, 果然, 還不會爬就想飛是不切實際的 :P 所以, 今天就嘗試的來寫 Glow effect 做為我第一個比較像樣一點的 PS.

要怎樣寫 Glow effect 呢? 我想到的特性有幾個:
  1. 發光點會影響周遭不亮的的區域, 並且根據距離遞減影響的效應 (距離平方成反比)
  2. 發光點會有暈光的效果
  3. 較強的點發光反應會比較激烈, 較弱的衰減的比較嚴重
第 1 點與第 2 點的特性我利用了原圖以外的另一張 corona texture 與 20 個散佈於 target 中心點旁的取樣做為光亮遞減的參考, 運算的邏輯是計算出 target 點被周遭 20 個參考點之亮度影響的結果, 該影響根據會依據 corona texture 的 intensity 做為參考的依據 來算出 glow level, 利用貼圖的好處是可以用不同分布的圖形來做為參考, 不過取樣的量不多其實可以使用查表的方式來減少運算量. 以下是我使用的 corona texture.



第 2 種特性我們可以增加參考點與 target 的距離來達成模糊與偏移的效果, 當偏移距離洽當的時候感覺起來就像光線暈開的樣子. 第 3 點特性的做法是, 對光強度的影響利用一個轉換函數來遞減, 由於 glow level 都介於 [0, 1], 所以我選擇了指數函數, 以 glow level 做為底數可調的變數 exp 做為指數, 來調整遞減的程度. 另外 glow 的顏色我選擇了原圖取樣的顏色與自訂的一個色彩做比例上的混合, 這樣可以做出更多的變化.

以下是的三張圖是運算的過程與結果, 左上角是原圖, 右上角是計算出來增加光線的部分, 下圖是疊起來的最後結果! 有像嗎?



這張也是 apply effect 的結果, 原圖可以參考這裡