使用Pixel Bender Toolkit制作特效——给过滤器增加参数(Part 3)

 要求

用户级别

初级

必需产品

• Flash Player 10
• Flash Professional CS4 (下载试用版)

范例文件

• pixel_bender_03.zip (7 KB)

其他要求

Pixel Bender Toolkit

• Pixel Bender Toolkit 2.0 for Macintosh (DMG, 77 MB)
• Pixel Bender Toolkit 2.0 for Windows (ZIP, 48.8 MB)

在本文中，你将会学到如何给内核添加参数，这样能够在过滤器运行的时候动态地调整渲染效果。你也会学到如何使用Pixel Bender的vector类型让数学计算更加方便快捷。

这是本系列的第三部分，本系列是讲述如何使用Pixel Bender Toolkit在位图上渲染视觉效果的教程。在前一节中，你学会了如何操控预览窗口中图像的红绿蓝通道。本节中你会学到如何通过另外一种更加强有力的方法来控制特效：参数法。给过滤器添加元数据和参数之后，你可以通过一个接口来控制过滤器渲染出的效果。

设置文件

如果你一直遵循本系列教程，那么你可以在之前的文件上进行修改。否则的话，下载提供的样例文件，在Pixel Bender IDE中打开Exercise3FilterA.pbk。

在上一节中，你编写的vintage tone过滤器应该是类似于这样：

<languageVersion : 1.0;> kernel Part3Filter < namespace : "com.adobe.devnet.pixelbender"; vendor : "Kevin's Filter Factory"; version : 1; description : "Playing around with pixels"; > { input image4 src; output pixel4 dst; void evaluatePixel() { dst = sampleNearest(src,outCoord()); dst.r += 0.5; dst.b -= 0.4; dst.g -= 0.1; } }

添加浮点参数

既然你已经载入代码（可能是你在第二部分创建的或者是样例文件中的），你现在可以修改代码，加入参数了。

按照如下步骤，将参数加入到过滤器中：

1. 找到如下代码：

output pixel4 dst;

2. 在这行之后加入如下代码：

parameter float amount;

3. 点击Run按钮，运行过滤器，在右边的面板上会出现一个滑动条（见图1）。
4. 滑动游标来测试。

图1.编辑代码之后，在右边面板上显示出滑动条

注意图像并没有发生改变。虽然右边出现了滑动条，但是游标值还没有任何处理。你可以在下一节中学会如何使用这个值。

将参数合并到过滤器

现在你已经加入了一个滑动条，下面你将学会如何使用滑动条来调整效果。按照如下步骤：

1. 找到如下代码：

dst.r += 0.5;

2. 将代码改成如下形式：

dst.r += (0.5 * amount);

3. 点击Run按钮，运行过滤器。
4. 这时，预览窗口的图像会发生改变。移动游标，看看游标值是如何影响图像的。
5. Try modulating the other channels by changing the amount parameter. Make the following changes to make the evaluatePixel function look like this:

dst = sampleNearest(src,outCoord()); dst.r += (0.5*amount); dst.b -= (0.4*amount); dst.g -= (0.1*amount);

6. 点击Run按钮，运行过滤器。

随着你移动右边面板上的滑动条，预览窗口的图像会非常明显地随之而变。因为所有的三个色彩通道都被同时修改，当游标移到最左边的时候，图像没有发生改变。当游标移到最右边时，过滤器渲染的效果最大化。

设置参数元数据

在本节中，你会学到如何给你添加的过滤器参数设置元数据。代码的完整版本在样例文件Excel3FilterE.pbk中。按照如下步骤：

1. 找到这行代码：

parameter float amount;

2. 添加如下代码，修改浮点参数的声明：

parameter float amount < minValue: -1.0; maxValue: 1.0; defaultValue: 0.0; >;

3. 点击Run按钮，运行过滤器。

   滑动条游标的默认位置现在是在中间了。如果移动游标到左侧，你可以看到过滤器的效果被削弱了。而移动到右侧的时候，过滤器渲染的效果最大化。

   注意： 添加元数据不是必须的；没有元数据也是可以的。但是，如果你不设置元数据，每个应用程序会使用它自己的缺省的最大，最小和默认值。因此，最好还是设置参数的元数据来控制参数以及获得一致的结果。

4. 选择File > Export Kernel Filter for Flash Player存储过滤器。
5. 在对话框中，将名字命名为Exercise3Filter.pbj，然后保存在桌面上的pixel_bender文件夹。

使用vector简化数学运算

本节中，你会学习到如何在过滤器中使用vector。在Pixel Bender Toolkit中添加vector是一件非常容易的事情：

1. 找到如下代码：

dst.r += (0.5*amount); dst.b -= (0.4*amount); dst.g -= (0.1*amount);

2. 将上述三行代码用如下代码替换：

dst += float4(0.5*amount, -0.4*amount, -0.1*amount, 0.0);

3. 点击Run按钮，运行过滤器。修改过的过滤器渲染的效果和之前一样。

除了分别修改dst的三个值之外，你可以创建一个新的vector，然后将其和dst相加。新vector最后的0.0是因为做算术运算的时候，vector的元素个数是必须相等的。你也注意到了，这里输入的是0.0而不是0。Pixel Bender不会自动进行类型转换，你必须使用正确的类型，否则的话会报错。

简化数学运算

在这一节中，你会学到如何使得等式中的数学运算更加简洁和可控。按照如下步骤：

1. 在代码窗口中找到这一行代码：

dst += float4(0.5*amount, -0.4*amount, -0.1*amount, 0.0);

2. 将代码修改成：

dst += float4(0.5, -0.4, -0.1, 0.0) * amount;

3. 点击Run按钮，运行过滤器。
4. 当预览图片的时候，修改过的过滤器渲染的效果和之前一样。
5. 保存过滤器。

注意： 将vector和一个数n相乘等于将这个vector乘以一个每个元素都为n的vector。

下一步阅读方向

在熟悉了Pixel Bender接口之后，继续学习本系列的第四部分，在那里你会学到如何编写代码在图像中进行多像素取样。