作者cjcat2266 (CJ Cat)
看板Flash
標題[心得] Pixel Bender 語法與運作機制初步探討
時間Thu May 22 15:05:26 2008
目前這台電腦沒有安裝Pixel Bender
我憑印象打的,如果有打錯字請見諒
以下src代表來源圖片(被修改的圖片)
dst代表目標圖片(輸出結果)
首先,Pixel Bender(PB)與Flash內部的DisplacementMapFilter(DMF)思考方向不太一樣
DMF是把src上面各個像素按照一個map來移動到新的位置
然後拼出一張新的圖,這就是dst
而PB是定義 "每一個dst像素" 的換算公式
所以如果我定義 "dst的像素是src像素的-2相對位置"
那麼結果就是 dst相當於把src往右邊移動兩個像素
大致就是這樣,機制講完了,就來講一下簡單的語法
基本上用PB開一個新的檔案之後
code的基本架構都幫你寫好了
第一行是languageVersion,顧名思義,就是PB語言版本
接下來是一些作者個人資料
可以填自己的名字、這個特效的名字等等
整個特效檔的定義以關鍵字 kernal [EffectName] 開頭
像是我之前寫了一個Tint,就寫 kernal Tint
接下來裡面有唯一的一個函式evaluatePixel
這就是定義dst像素的地方
PB的基本資料類型有 float, float2, float3, float4
這些就是基本的 一維~四維 浮點數向量
float就是一般程式語言在用的float
float2~float4則是兩個到四個float被組合起來
然後每個向量都有分量
假如果宣告一個float3
float3 vec3;
那麼vec3的三個分量分別可以用vec3[0], vec3[1], vec3[2]來存取
或者可以依照以下的key來存取
可用的key分成特定群組
1. x, y, z, w
2. r, g, b, a
3.(還有一組key我忘記了...)
所以vec3[0]可以寫成vec3.x或者vec3.r
也可以用這些key混搭來產生新的float向量,像這樣:
float2 vec2 = vec3.rb;
//相當於 float2 vec2 = float2(vec3[0], vec3[2]);
以上就是大致的float向量語法
接下來是PB定義dst像素的方式
在evaluatePixel()前面有兩個被傳入的參數
image4 src;
float4 dst;
src是一個"完整的圖片資料",也就是你傳入的資源圖檔
dst則是一個float4向量,代表輸出像素的RGBA值
在自動產生的evaluatePixel()裡面有這一行
dst = sampleNearest(src, outCoord());
這行就是單純的把src的像素copy到dst的像素
所以只是複製原本的圖片而已
sampleNearest的第一個參數是個image4資料
outCoord()則會回傳這個dst像素所對應的座標(float2)
所以sampleNearest()就是回傳src離目標像素座標最近的像素RGBA值(float4)
這邊目標像素座標是outCoord()
你也可以用自己的float2向量來指定座標
↑通常都是要這樣才有辦法做進階效果
除了smapleNearest()以外還有一個sample()或者sampleLinear()
如果你傳的float2座標不是整數值
sample()或者sampleLinear()會對周圍的四個像素作線性內插
回傳比較smooth的像素值
相對的,這樣也比較消耗運算資源
image4輸入資料可以不只一個
你也可以再定義一個image4資料
然後由這兩個資料決定dst的運算方式
最後說明一下參數(parameter)
顧名思義,參數就是要讓你調整用的
也就是當你用Flash讀取pbj特效檔的時候,可以調整的數值
參數定義於kernal與evaluatePixel()中間
以下有一個float3的範例
parameter float3 colorRGB
<
minValue: float3(0.0, 0.0, 0.0);
maxValue: float3(1.0, 1.0, 1.0);
defaultValue: float3(0.5, 0.5, 0.5);
>;
以上就會生成一個叫做colorRGB的float3參數
其值的範圍只能在(0, 0, 0)和(1, 1, 1)之間變動
而預設值是(0.5, 0.5, 0.5);
所有的parameter都會在PB成功compile並且執行你的code以後
出現在右方的parameter inspector欄位中
可以手動調整,也可以直接數入數值
好啦,以上就是PB的大致的語法與運作機制初步探討
接下來我會陸續po上一些簡單的範例
--
CJ Cat = Croa'J Cat = Cockroach Cat = 西街凱特 = 蜚蠊貓 = 蟑螂貓
Blog
http://cjcat.blogspot.com
Gallery
http://cjcat2266.deviantart.com
ptt2 Board CJWorkshop - 阿多比閃光(Adobe Flash)研討區
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.112.18.189
推 suPerFlyK:感謝 05/23 13:55
推 ComicMan:太實用了 感謝 05/24 15:35