Pixel Bender Toolkit 学习

Pixel Bender 着色器基础知识

Posted by admin | Filed under RIA相关

原文：http://www.pixelbender.cn/?p=43

Pixel Bender 着色器使用简介

    Adobe Pixel Bender 是一种编程语言，用于创建或操作图像内容。您可以使用 Pixel Bender 创建一个内核 （在本文档中亦称之为着色器 ）。着色器定义了一个可对图像的每个像素单独执行的单一函数 。对该函数的每次调用 都将得到图像中该像素坐标处 的输出颜色 。可通过指定输入图像 和参数值 来自定义该操作。在着色器的单次执行 中，输入值 和参数值 是不变 的。唯一发生变化的是像素（其颜色 是函数调用 的结果 ）的坐标。
    对多个 输出像素坐标调用着色器函数时，将尽可能采用并行 方式。这样会改进着色器性能，提供高性能的处理能力。
    在 Flash Player 和 Adobe AIR 中，使用着色器可轻松创建三种类型的效果：
    * 绘制 填充
    * 混合 模式
    * 滤镜

    * “Generic number crunching” ：使用shader可以处理一组数据（包含复杂的数学运算），功能强，速度快。跟平常使用shader不同，你传递二进制数据 进去，用指定的算法处理这些数据，然后返回处理后的二进制数据 。
    着色器也可以按独立模式执行。使用独立模式 时，将直接访问着色器的结果 ，而非预先指定着色器的用途。结果可以按图像数据 或者二进制 或数值数据 的形式访问。该数据完全不必是图像数据。这样一来，您可以为着色器输入一组数据。着色器将处理该数据，然后您可以访问着色器返回的结果数据。

Pixel Bender 着色器常见任务

以下是您可能会在 ActionScript 中使用滤镜完成的任务：
    * 将着色器加载到正在运行的 SWF 应用程序中，或者在编译时嵌入着色器并在运行时访问它。
    * 访问着色器元数据
    * 为着色器标识并指定输入值 （通常为图像）
    * 为着色器标识并指定参数值
    * 着色器有以下几种使用方法：
          o 用于绘制 填充
          o 用于混合 模式
          o 用作滤镜
          o 按独立模式 使用

重要概念和术语

以下参考列表包含本章中会遇到的重要术语：

    * 内核 ：对于 Pixel Bender 而言，内核指的就是着色器 。通过 Pixel Bender，您的代码定义了一个内核，它定义了可对图像的每个像素单独执行的单一函数 。
    * Pixel Bender 字节代码：编译 Pixel Bender 内核时，会将其转换为 Pixel Bender 字节代码 。Flash Player 或 Adobe AIR在运行时访问并执行字节代码 。
    * Pixel Bender 语言：用于创建 Pixel Bender 内核的编程语言。
    * Pixel Bender 工具包：用于依据 Pixel Bender 源代码创建 Pixel Bender 字节代码文件的应用程序。您可以使用该工具包编写、测试和编译 Pixel Bender 源代码。
    * 着色器：在本文档中，着色器是指采用 Pixel Bender 语言编写的一组功能。着色器的代码会创建视觉效果或执行计算。在任一情况下，着色器都返回一组数据（通常为图像的像素）。着色器对每个数据点执行相同的操作，唯一的区别在于输出像素的坐标不同。
      着色器不是用 ActionScript 编写的。它用 Pixel Bender 语言 编写，并编译为 Pixel Bender 字节代码。着色器可在编译时嵌入 SWF 文件，也可在运行时作为外部文件加载。无论采用上述哪一种方式，都要在 ActionScript 中访问着色器 ，方法是先创建一个 Shader 对象 ，然后将其链接到着色器字节代码。
    * 着色器输入 ：一种复杂的输入，通常为位图图像数据 ，该数据提供给着色器供其计算之用。对于着色器中定义的每个输入变量，着色器的整个执行过程都使用单一变量值（即，一个图像或一组二进制数据）。
    * 着色器参数 ：提供给着色器供其计算之用的单一值（或限定的值集合）。着色器的每次执行中都会定义各个参数值，该值在着色器的整个执行过程中保持不变 。

数据类型简介：

• 基本类型：bool、int、float，相当于as里的Boolean、int、Number（使用float的时候必须带小数点，不然编译不通过）
• 四通道 ：红（red）、绿（green）、蓝（blue）、透明（alpha）
• 通道值范围 ：0 – 1
• image4 ：代表一张具有四通道的位图
• pixel4 ：代表一个具有四通道的像素
• float2 ：存放2个float变量（float3、float4 依次类推）
• pixel4.r ：获取红色通道的值（pixel4.g、pixel.b.、pixel4.a 依次类推）
• float4.x ：获取float4中的第一个值（float4.y、float4.z、float4.w 依次类推）
• myPixel.rgb ：返回一个pixel3 变量，包含red、green和blue通道值
• pixel3(0.5) ：表示rgb三个通道的值都是0.5

常用函数：

outCoord ()：获取当前像素的坐标值。

^?[Copy to clipboard]View Code C

;

sampleNearest ()：对图片像素点进行取样，第一个参数是输入图片，第二个参数是float2坐标值，找到最接近 float2的那个像素，返回该像素值

^?[Copy to clipboard]View Code C

;

sampleLinear ()：（sample ()）找到最接近取样点的四个像素 ，然后取他们的平均值 （采用双线性内插值法），效果更圆滑

distance ()：计算两个float2之间的距离

^?[Copy to clipboard]View Code C

; float dist = distance(center, pos);

sin (x), cos (x), tan (x), asin (x), acos (x), atan (x), exp (x)(e的x次方), log (x), pow (x, y)(x的y次方), sqrt (x)

min(x, y, a) ：返回对x和y进行线性插值即（x * (1.0 – a) + y * a）后的结果

参数设置：可以让Pixel Bender在运行时修改变量值

^?[Copy to clipboard]View Code C

float myValue <// 默认最小值0、最大值1 和 开始值0 minValue:0.0; maxValue:100.0; defaultValue:50.0;>;

PS：

1. 以下三组数据等价

• r, g, b, a
• x, y, z, w
• s, t, p, q

2. Pixel Bender Toolkit规定输出 必须是三通道 类型："output pixel3 result"

 

 

Pixel Bender：AS3 加载或嵌入着色器

Posted by admin | Filed under RIA相关

原文：http://www.pixelbender.cn/?p=51 

ActionScript 代码可以通过两种方式访问由 Adobe Pixel Bender 工具包创建的着色器（.pbj 文件 ）： 

在运行时加载 ：可以使用 URLLoader 对象将着色器文件作为外部资源 进行加载。

^?[Copy to clipboard]View Code ACTIONSCRIPT3

; loader.dataFormat = URLLoaderDataFormat.BINARY;loader.addEventListener(Event.COMPLETE, onLoadComplete);loader.load(newURLRequest(&rdquo;myShader.pbj&rdquo;));var shader:Shader;function onLoadComplete(event:Event):void{// Create a new shader and set the loaded data as its bytecode shader = new Shader(); shader.byteCode = loader.data;// You can also pass the bytecode to the Shader() constructor like this:// shader = new Shader(loader.data);// do something with the shader}

嵌入在 SWF 文件中 ：使用 [Embed ] 元数据标签 可以在编译时将着色器文件嵌入在 SWF 文件中。

^?[Copy to clipboard]View Code ACTIONSCRIPT3

 

Pixel Bender：访问着色器元数据

Posted by admin | Filed under RIA相关

原文：http://www.pixelbender.cn/?p=55

假设Pixel Bender 着色器的源代码包括下面的元数据定义 ：

^?[Copy to clipboard]View Code C

kernel NewFilter < namespace :"Adobe::Example"; vendor :"Bob Jones"; version :1; description :"Creates a version of the specified image with the specified brightness";>

则为该着色器创建 ShaderData 对象时将使用以下属性和值 ：

• namespace （字符串）：”Adobe::Example”
• vendor （字符串）：”Bob Jones”
• version （字符串）：”1″
• description （字符串）：”Creates a version of the specified image with the specified brightness”

示例AS代码：

^?[Copy to clipboard]View Code ACTIONSCRIPT3

] privatevar MyShaderClass:Class;   publicfunction PixelTest(){var shader:Shader = new Shader(new MyShaderClass());var shaderData:ShaderData = shader.data;   trace(shaderData.namespace);trace(shaderData.vendor);trace(shaderData.version);trace(shaderData.description);}

调试截图：（Shader.data数据结构 展示）

 

 

Pixel Bender：指定着色器输入和参数值

Posted by admin | Filed under RIA相关

 原文：http://www.pixelbender.cn/?p=59 

使用 Shader 对象的 data 属性可以设置着色器输入和参数，还可以确定特定着色器是否需要输入或参数。 

识别着色器输入和参数

^?[Copy to clipboard]View Code ACTIONSCRIPT3

; // 着色器输入var inputs:Vector.<ShaderInput> = new Vector.<ShaderInput>();// 着色器参数varparameters:Vector.<ShaderParameter> = new Vector.<ShaderParameter>();// 着色器元标签，namespace、vendor等var metadata:Vector.<String> = new Vector.<String>();for(var prop:Stringin shaderData){if(shaderData[prop]is ShaderInput){ inputs[inputs.length] = shaderData[prop];}elseif(shaderData[prop]is ShaderParameter){parameters[parameters.length] = shaderData[prop];}else{ metadata[metadata.length] = shaderData[prop];}}// do something with the inputs or properties

指定着色器输入值 

^?[Copy to clipboard]View Code ACTIONSCRIPT3

;

 指定着色器参数值

^?[Copy to clipboard]View Code ACTIONSCRIPT3

]

 

Pixel Bender：使用着色器作为绘图填充

Posted by admin | Filed under RIA相关

原文：http://www.pixelbender.cn/?p=68 （原文代码有许多错误，请测试时一一校正）

在使用着色器创建绘制填充 时，您将使用绘图 API 方法来创建矢量形状。正如使用绘图 API 可将任何位图图像用作位图填充一样，着色器的输出将用于填充该形状。

^?[Copy to clipboard]View Code ACTIONSCRIPT3

; canvas.graphics.beginShaderFill(myShader); canvas.graphics.drawRect(10,10,150,150); canvas.graphics.endFill();// add canvas to the display list to see the result

beginShaderFill() 方法注意点

• 参数 Shader： 无需 指定图像输入 。
• 调用 clear () 方法会清除填充 。
• 只要绘制 3 个或更多个点 ，或者调用 endFill() 方法时，应用程序就会呈现填充 。

^?[Copy to clipboard]View Code ACTIONSCRIPT3

void { shader = new Shader(loader.data);// 给着色器参数赋值 shader.data.point1.value = [topMiddle.x, topMiddle.y]; shader.data.point2.value = [bottomLeft.x, bottomLeft.y]; shader.data.point3.value = [bottomRight.x,bottomRight.y];this.addEventListener(Event.ENTER_FRAME, updateShaderFill);}   privatefunction updateShaderFill(event:Event):void{ colorAngle += 0.6;var c1:Number = 1/ 3 + 2 /3*Math.cos(colorAngle);var c2:Number = 1/ 3 + 2 /3*Math.cos(colorAngle + d120);var c3:Number = 1/ 3 + 2 /3*Math.cos(colorAngle - d120);// 给着色器参数赋值 shader.data.color1.value = [c1, c2, c3,1.0]; shader.data.color2.value = [c3, c1, c2,1.0]; shader.data.color3.value = [c2, c3, c1,1.0];   canvas.graphics.clear();// 开始绘图，三个点即可 canvas.graphics.beginShaderFill(shader); canvas.graphics.moveTo(topMiddle.x, topMiddle.y); canvas.graphics.lineTo(bottomLeft.x, bottomLeft.y); canvas.graphics.lineTo(bottomRight.x, bottomLeft.y); canvas.graphics.endFill();}

 

 

Pixel Bender：使用着色器作为混合模式

Posted by admin | Filed under RIA相关

 原文：http://www.pixelbender.cn/?p=73

若要将着色器用于混和模式，请将 Shader 对象指派给前景显示对象 的 blendShader 属性。

如果为 blendShader 属性指定非 null 值，显示对象的 blendMode 属性将自动设置 为 BlendMode.SHADER 。 

^?[Copy to clipboard]View Code ACTIONSCRIPT3

;

使用着色器作为混和模式时，着色器必须由至少两个输入 定义。

如示例所示，您未在代码中设置输入值。而是将两个混和后的图像自动用作着色器的输入 。

前景图像 设置为第二个 图像。

背景图像 设置为第一个 输入图像。 

Pixel Bender中变量定义代码： 

^?[Copy to clipboard]View Code C

; input image4 foreground; output pixel4 dst;

as代码：

^?[Copy to clipboard]View Code ACTIONSCRIPT3

// 定义背景图形 var backgroundShape:Shape=newShape();var g1:Graphics=backgroundShape.graphics;var c1:Array=[0x336600, 0x80ff00];var a1:Array=[255,255];var r1:Array=[100,255];var m1:Matrix=newMatrix(); m1.createGradientBox(300,200); g1.beginGradientFill(GradientType.LINEAR, c1, a1, r1, m1); g1.drawEllipse(0,0,300,200); g1.endFill();addChild(backgroundShape);   // 定义前景图形var foregroundShape:Shape=newShape();var g2:Graphics=foregroundShape.graphics;var c2:Array=[0xff8000, 0x663300];var a2:Array=[255,255];var r2:Array=[100,255];var m2:Matrix=newMatrix(); m2.createGradientBox(300,200); g2.beginGradientFill(GradientType.LINEAR, c2, a2, r2, m2); g2.drawEllipse(100,0,300,200); g2.endFill();addChild(foregroundShape);   // 定义前景图形的混合模式 foregroundShape.blendShader=shader; foregroundShape.blendMode=BlendMode.SHADER;

不适用 Pixel Bender的混合模式的截图：

使用 Pixel Bender的混合模式的截图：

 

Pixel Bender：使用着色器作为滤镜

Posted by admin | Filed under RIA相关

 原文：http://www.pixelbender.cn/?p=76

使用着色器作为滤镜时，过滤出的图像（显示对象或BitmapData 对象）将传递给着色器。

着色器使用输入图像 来创建滤镜输出 ，该输出通常为原始图像经过修改的版本。

如果过滤出的对象是 BitmapData 对象，着色器输出将成为 BitmapData 对象的内容，并调用该对象的 applyFilter () 方法。

^?[Copy to clipboard]View Code ACTIONSCRIPT3

; homeButton.filters = [myFilter];

在使用着色器作为滤镜时，着色器必须由至少一个输入 定义。

如示例所示，您未在代码中设置输入值 。而是将过滤出的显示对象 或 BitmapData 对象设置为输入图像 。 

Pixel Bender中变量定义代码： 

^?[Copy to clipboard]View Code C

; output float4 dst;

as代码：  

^?[Copy to clipboard]View Code ACTIONSCRIPT3

; vartarget:Shape=newShape();addChild(target);var g:Graphics=target.graphics;varc:Array=[0x990000, 0x445500, 0x007799];var a:Array=[255,255,255];var r:Array=[0,127,255];var m:Matrix=newMatrix(); m.createGradientBox(400,200); g.beginGradientFill(GradientType.LINEAR,c, a, r, m); g.drawRect(0,0,400,200); g.endFill();// 应用shader滤镜var invertFilter:ShaderFilter=new ShaderFilter(shader);target.filters=[invertFilter];

不适用 Pixel Bender滤镜的截图：

使用 Pixel Bender滤镜的截图：

 

 

Pixel Bender：在独立模式下使用着色器

Posted by admin | Filed under RIA相关

 原文：http://www.pixelbender.cn/?p=79

在独立模式下使用着色器时，着色器处理的运行 独立于其输出结果 的用途。

指定要执行的着色器 、设置输入值 和参数值 ，及指定用于放置结果数据 的对象 。

在以下两种情形中，可以考虑以独立模式使用着色器：

• 处理非图像数据：在独立模式下，您可以选择将任意二进制数据 或数值数据 （而非位图图像数据）传递给着色器。除位图图像数据外，您还可以选择 将着色器结果以二进制数据 或数值数据 的形式返回 。
• 背景处理：以独立模式运行着色器时，着色器默认为异步 运行。这表示，在您的应用程序继续运行的同时，着色器以后台方式运行 ，并在其处理结束时通知您的代码。您可以使用运行耗时的着色器，它在运行时不会导致应用程序用户界面或其它处理响应迟缓。

^?[Copy to clipboard]View Code ACTIONSCRIPT3

// 使用 ShaderJob 对象以独立模式执行着色器 var job:ShaderJob = new ShaderJob(myShader);// 侦听着色器是否处理完成 job.addEventListener(ShaderEvent.COMPLETE, completeHandler);   // 异步方式执行shader job.start();// 同步方式执行shader// job.start(true);   function completeHandler(event:ShaderEvent):void{// 向 ShaderJob 写入操作结果，也可以直接获取 ShaderEvent 的属性值：ShaderEvent.bitmapData、ShaderEvent.byteArray 和 ShaderEvent.vectorvar jobResult:BitmapData = newBitmapData(100,75); job.target = jobResult;}

如果使用 ShaderJob 执行图像处理 ，则为 target 属性指派一个 BitmapData 实例。

如果要处理二进制数据 或数值数据 ，则指派ByteArray 对象或 Vector.<Number> 实例给 target 属性。在该情形下，您必须设置 ShaderJob 对象的 width 和 height 属性，以指定输出到 target 对象的数据量 。亦或者如下： 

^?[Copy to clipboard]View Code ACTIONSCRIPT3

;

其中myTarget 是“在其中写入着色器操作结果 的对象”。此参数必须为 BitmapData 、ByteArray 或 Vector.<Number> 实例。

 

在基于 Eclipse 的工具上写 Pixel Bender 语言

Posted by admin | Filed under 软件使用

 原文：http://blog.joa-ebert.com/pbdt/

以Flex Builder为例，eclipse配置流程一样

1. Flex Builder -> Help -> Software Updates -> Find and Install

2. Search for new features to install

3. New Remote Site -> URL: http://pbdt.joa-ebert.com/update

4. Next, Install, Finish and 重新启动Flex Builder

5. Windows -> Preferences -> PBDT：设置Pixel Bender的一些默认参数

6. 右键项目 -> Add/Remove PixelBender Nature

7. 创建一个Pixel Bender Kernel

8. alt + / ：代码提示，可自动创建一个parameter