使用Pixel Bender Toolkit制作特效——多像素采样(Part 4)

 要求

用户级别

初级

必需产品

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

范例文件

• pixel_bender_04.zip (5 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内核，将同一图像的像素组合使用。如果你是从本教程的第一篇文章开始学习的话，你已经在每一小节的学习之后，得到了本节所需要的文件。这次，我们将按照 本系列第一篇文章的步骤，创建一种新的过滤器。

这是本系列的第四部分，本系列是讲述如何使用Pixel Bender Toolkit在位图上渲染视觉效果的教程。在前一节中，你已经学习到了如何给过滤器添加参数来创建一个滑动条接口，以及如何使滑动条影响预览窗口中图像的效果。你也了解到如何给参数添加元数据，确保显示特效的一致性。在本节中，你会学习到如何从同一图像中采样多个像素。

设置文件

如果你希望检查一下代码，下载提供的样例文件。按照如下步骤开始我们的学习：

1. 选择File > New Kernel创建新的过滤器。
2. 加载YellowFlowers.png，按照第一部分的描述修改内核的元数据。
3. 点击Run按钮，运行过滤器。
4. 检查没有语法错误之后，选择File > Save Filter。
5. 将文件命名为Exercise4.pbk，然后将其存在你的桌面上的pixel_bender文件夹中。

添加浮点参数。

在本节中，你将需要利用你在第三节学到的知识，在代码中加入参数。按照如下步骤：

1. 找到这行代码：

output pixel4 dst;

2. >在这行代码之后，添加一个 浮点 参数 amount:

parameter float amount;

3. 在上行代码之后，将参数的元数据设置为如下值：

< minValue: -5.0; maxValue: 5.0; defaultValue: 0.0; >;

注意： 打开样例文件中的Exercise4FilterB.pbk，你会发现它已经修改完毕了。

4. 修改过代码之后，应该是如下样子：

<languageVersion : 1.0;> kernel Part4Filter < namespace : "com.adobe.devnet.pixelbender"; vendor : "Kevin's Filter Factory"; version : 2; description : "Playing around with pixels"; > { input image4 src; output pixel4 dst; parameter float amount < minValue: -5.0; maxValue: 5.0; defaultValue: 0.0; >; void evaluatePixel() { dst = sampleNearest(src,outCoord()); } }

5. 如果你遇到错误，将你的代码和上面的例子进行比较。然后进行必需的修改。

采样第二个像素

在这一节中，你会学到如何编写代码采样第二个像素，并且将值储存在你声明的一个新变量中，按照如下步骤：

1. 找到采样代码：

dst = sampleNearest(src,outCoord());

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

pixel4 dst2 = sampleNearest(src, outCoord()+float2(amount, amount));

3. 点击Run按钮，运行过滤器。如果出现语法错误，将你的代码和上述代码进行比较。图像不会发生改变，因此现在你还没有修改存储在变量dst中的输出像素。
4. 如果你没有遇到语法错误，选择File > Save Filter存储过滤器。

   注意： dst2是一个新变量，它存储的是图像中坐标为（amount，amount）的像素的值。

5. 将这行代码加入到evaluatePixel 函数之后：

dst += dst2;

6. 做出这些改变之后，检查你的代码，应该和如下代码类似：

Dst Void evaluatePixel() { dst = sampleNearest(src, outCoord()); pixel4 dst2 = sampleNearest(src, outCoord()+float2(amount, amount)); dst += dst2; }

7. 点击Run按钮，运行过滤器。
8. 检查没有语法错误之后，选择File > Save Filter。
9. 当你将滑动条的游标置于默认位置的时候，图像看起来亮度会是之前的两倍。当你移动游标的时候，它会导致图片看起来像如下的样子（见图1）。

图1.预览窗口中的过饱和的图像

在运行过滤器的时候，图像的两条黑色边显示出来了，因为在图片的边界采样返回的颜色是透明的黑色。

削减像素值

现在的过滤器因为是将像素值相加，所以会导致色彩的过饱和。在这节中，你将会学到如何改正这个问题，将饱和度返回到原来的级别。

按照如下步骤：

1. 找到如下代码：

dst += dst2;

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

dst /= 2.0;

3. 点击Run按钮，运行过滤器。
4. 检查没有语法错误之后，选择 File > Save Filter 储存过滤器。

注意，如果你将滑动条的游标置于默认位置，图像是没有发生改变的。只有当你修改代码，将像素值相加并且将其和除以2.0之后（将饱和度削减为原来级别）之后才会看到效果。

当你移动游标的时候，偏移效果如下，颜色看起来并不是很亮（见图2）。

图2.图像的偏移效果

按照本系列第二部分 的教程，将Pixel Bender代码导出，这样你可以在Flash中使用它们，按照如下步骤：

1. 选择 Build > Turn on Flash Player Warnings and Errors。这个选项能够让Flash Player在运行的时候检查过滤器，帮助你检查问题所在。
2. 点击Run按钮，运行过滤器。
3. 检验过滤器能否不报错误地成功运行。
4. 选择 File > Export Kernel Filter for Flash Player。

在Export对话框中输入过滤器的名字： Exercise4Filter.pbj，然后将其存储在你的桌面上的pixel_bender文件夹中。