使用Pixel Bender Toolkit制作特效——创建vintage tone过滤器(Part 2)

 

在本文中，你会学到如何编写一个Pixel Bender过滤器，从而能够将源图像渲染出vintage tone效果。你可以将修改更新过的过滤器导出以便在Adobe Flash工程中使用。

这是本系列关于如何使用Pixel Bender Toolkit在位图上渲染视觉效果的教程。在前面一节中，你已经知道了如何使用Pixel Bender IDE创建，运行以及保存过滤器。在本节中，你将会学习如何创建一个更加复杂的过滤器，你需要编写代码来控制所加载图像的色值。

需求

为了完成本文中绝大部分的教程，你需要以下软件和文件：

Flash Player 10

• 下载

Flash CS4 Professional

• 试用版
• 购买正式版

Pixel Bender Toolkit

• Pixel Bender Toolkit for Macintosh （DMG， 31 MB）
• Pixel Bender Toolkit for Windows （ZIP， 33.4 MB）

样例文件：

• pixel_bender_02.zip (ZIP, 8 KB)

设置文件

如果你已经阅读过本系列的第一部分，那么打开你之前创建的过滤器。否则的话，下载提供的样例文件，然后打开Excercise2FilterA.pbk文件。

在编辑窗口有可能会显示类似如下代码的内容：

kernel Part2Filter < namespace :"com.adobe.devnet.pixelbender"; vendor : "Kevin's Filter Factory";version : 1; description : "Playing around with pixels"; > { inputimage4 src; output pixel4 dst; void evaluatePixel() { dst =sampleNearest(src,outCoord()); } }

注意：如果你在前一节的教程时，更改过字符串，那么现在的代码可能会有些许不同。

图1即为预览窗口的图像。

图1 预览窗口中的输入图像

修改图像的红色通道

在本节中，你会学习到如何编写代码修改输入图像的红色通道值。

1. 找到类似如下代码行的位置：

   dst = sampleNearest(src,outCoord());

2. 在这行代码之后添加一行新的代码：

   dst.r += 0.1;

3. 更改之后，evaluatePixel函数将会变为：

   void evaluatePixel() { dst = sampleNearest(src,outCoord()); dst.r += 0.1; }

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

当你预览图像的时候，红色通道被稍稍加强了（见图2）

图2. 运行红色过滤器之后，被加强了红色通道的图像。

选择File > Save Filter保存过滤器。将其命名为Excercise2.pbk，然后存到桌面ixel_bender文件夹下。

如果你希望渲染出更加惊叹的效果，试试看如下步骤：

1. 将红色通道的增值由0.1加到0.5。
2. 点击Run按钮。
3. 保存过滤器。

做完这个试验，这张图片会显示出非常强烈的红色色调（见图3）。

图3. 大幅增强图像的红色通道之后的样子

注意：默认的新内核会将默认图像为4个通道，然后在保存为结果的时候创建一个四通道的图像。这四个通道分别是：红，绿，蓝以及alpha（透明信息）。每一个通道的值为0.0到1.0之间的浮点值。

修改图像的蓝色通道

按照如下的步骤来修改输入图像的蓝色通道。

1. 找到修改红色通道的代码：

   dst.r += 0.5;

2. 在上述行之后，加入此行代码：

   dst.b -= 0.4;

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

在预览图显示的是蓝色通道削弱之后的图像。这个效果混合了增强的红色通道，结果图像会呈偏黄（见图4）。

图4 同时应用蓝色通道修改器和红色通道修改器之后的图像：黄色增强。

修改图像的绿色通道

按照如下的步骤来修改输入图像的绿色通道。

1. 找到类似如下代码行的位置：

   dst.b -= 0.4;

2. 在上述行之后，加入此行代码：

   dst.g -= 0.1;

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

当你预览图像的时候，图像的绿色通道被稍稍削弱了。这个效果混合了之前对其他颜色通道的修改，这样创建出了vintage-tone效果（见图5）。

图5 应用红色通道，蓝色通道和绿色通道过滤器之后的图片：vintage tone效果。

为Flash Player准备一个过滤器。

在本节中，你会学到如何设置过滤器，使之能够在Flash Player 10中运行。当然，我们需要认识到FlashPlayer的早期版本并不支持Pixel Builder Toolkit创建的过滤器。请确认你的机器上安装的是Flash Player10或者更新的版本。

按照如下步骤：

1. 选择 Build > Turn on Flash Player Warnings and Errors。这个选项能够让Flash Player在运行的时候检查过滤器，帮助你检查问题所在。
2. 点击Run按钮，运行过滤器。
3. 检验过滤器能否不报错误地成功运行。
4. 选择File > Export Kernel Filter for Flash Player。
5. 在Export对话框中输入过滤器的名字：Exercise2Filter.pbj
   
6. 保存pbj文件到你桌面上的pixel_Bender文件夹中。

注意：Flash Player 10只支持Pixel Bender语言的一个子集。请阅读Pixel Bender Toolkit文档获取更多信息。

下一步将做什么

在熟悉了Pixel Bender接口之后，继续本系列的第三部分，在那里你将会学习到如何给过滤器添加参数。

点击以下资源了解更多关于Pixel Bender Toolkit的内容。

• Pixel Bender论坛
• Pixel Bender basics for Flash
• Pixel Bender basics for Flex and AIR

关于作者

Kevin Goldsmith是Adobe核心技术团队中图像基础组的工程经理。他在2004年加盟Adobe。他的博客是blogs.adobe.com/kevin.goldsmith， 并且管理@pixelbender Twitter帐号。

本文来自:InfoQ

 

【国内下载】Flex 3 Builder :http://g.csdn.net/5120749
【国内下载】Adobe Flash Builder 4 :http://g.csdn.net/5105812
【官方下载】Flex 3 Builder :http://g.csdn.net/5121278
【官方下载】Adobe Flash Builder 4 :http://g.csdn.net/5120750