作者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
1F:推 suPerFlyK:感谢 05/23 13:55
2F:推 ComicMan:太实用了 感谢 05/24 15:35