Pixel Bender

Adobe Pixel Bender 3D Preview 3

Y.Boy — Sat, 24 Sep 2011 19:29:47 +0800

Adobe Pixel Bender 3D Preview 3 版本修复了一些 bug ，修改了一些公开接口。在发布页里有详细的信息：http://labs.adobe.com/technologies/pixelbender3d/releasenotes.html。

在Adobe实验室上的首页：http://labs.adobe.com/technologies/pixelbender3d/

Adobe Pixel Bender Plug-in for Adobe Photoshop CS5

Y.Boy — Wed, 29 Jun 2011 23:13:33 +0800

Image processing of Pixel Bender filters opened in Photoshop CS5

The Adobe® Pixel Bender® Plug-in for Adobe Photoshop® CS5 supports image processing of Pixel Bender filters opened in Photoshop CS5. These filters can be executed on the graphics card (GPU) or CPU of a computer. Pixel Bender customers as well as members of the Adobe Pixel Bender team have authored the filters that are included in this download.

For more informations: http://labs.adobe.com/technologies/pixelbenderplugin/

Pixel Bender 3D预览版第二版已提供下载

Y.Boy — Thu, 02 Jun 2011 09:48:22 +0800

Pixel Bender 3D 预览版第二版现在已经可以下载。Pixel Bender 3D预览版第二版修复了包括用户在论坛中提交的那些 bug。还实现了附加函数和类，以及提供了附加的事例项目。

Flash Molehill 简单例子

Y.Boy — Fri, 04 Mar 2011 14:33:12 +0800

这几天 Flash Player 11 Incubator 公开测试版放出，最大的功能特色就是 Molehill Low Level 3D API 。Molehill Low Level 3D API 其实非常底层，而且写起来很麻烦又缺乏参考文件。假如单纯只是要做 3D 应用，可以直接用现成的 3D 引擎(Away 3D)等等。我是抱著研究的精神来测试的，顺便作笔记。毕竟Molehill 不光是做 3D 应用，也能作 2D 图像加速或是其它利用 GPU 的运算等等。相信日后一定有很大帮助！

最初参考的例子是从这里来的 polygonal labs – Simple 2D Molehill Example。它的源码里也提供了 AGALMiniAssembler – AGAL (Adobe Graphics Assembly Language) 编译器。这对于测试 Molehill 底层 API 还挺重要的，因為除了需要写 AS3 之外，还需要写 AGAL 用 AGALMiniAssembler 动态编译為 Bytecode 才能执行。

以下是一更简单的 Molehill 2D 绘图的例子：

package {
 import com.adobe.utils.AGALMiniAssembler;

 import flash.display.Sprite;
 import flash.display.Stage3D;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.display3D.Context3D;
 import flash.display3D.Context3DProgramType;
 import flash.display3D.Context3DRenderMode;
 import flash.display3D.Context3DVertexBufferFormat;
 import flash.display3D.IndexBuffer3D;
 import flash.display3D.Program3D;
 import flash.display3D.VertexBuffer3D;
 import flash.display3D.textures.Texture;
 import flash.events.Event;
 import flash.geom.Matrix3D;
 import flash.geom.Rectangle;
 import flash.utils.getTimer;

 public class MolehillExample01 extends Sprite {

  public var stage3D:Stage3D;
  public var cxt3D:Context3D;

  public var shaderProgram:Program3D;
  public var indexBuffer:IndexBuffer3D;
  public var texture:Texture;
  public var vertexBuffer:VertexBuffer3D;

  public function MolehillExample01() {
   addEventListener(Event.ADDED_TO_STAGE, onAddStage);
  }

  public function onAddStage(e:Event):void{
   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.frameRate = 30;

   stage3D = stage.stage3Ds[0];
   stage3D.addEventListener(Event.CONTEXT3D_CREATE, onContext3DCreate);
   stage3D.requestContext3D(Context3DRenderMode.AUTO);
  }

  public function onContext3DCreate(e:Event):void{
   cxt3D = stage3D.context3D;
   if (!cxt3D) return;
   cxt3D.enableErrorChecking = true;

   // index buffer
   indexBuffer = cxt3D.createIndexBuffer(6);
   indexBuffer.uploadFromVector(Vector.<uint>([0, 1, 2, 0, 2, 3]), 0, 6);

   // vertex buffer
   vertexBuffer = cxt3D.createVertexBuffer(4, 5); // x , y , r , g , b
   vertexBuffer.uploadFromVector(Vector.<Number>([
     -1  , 1  ,     0     ,  0  ,     0     ,
     -1  , -1 , 255 / 255 ,  0  ,     0     ,
      1  , -1 , 255 / 255 ,  0  , 255 / 255 ,
      1  , 1  ,     0     ,  0  , 255 / 255
    ]), 0, 4);

   // 設定 va0 為 x , y
   cxt3D.setVertexBufferAt(0, vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_2);
   // 設定 va1 為 r , g , b
   cxt3D.setVertexBufferAt(1, vertexBuffer, 2, Context3DVertexBufferFormat.FLOAT_3);

   // compile vertex shader
   var vertexShader:Array = [
     "m44 op, va0, vc", // 4x4 matrix transform from va0 and vc0 to output position
     "mov v0, va1" // copy rgb color from va1 to v0
    ];

   var vertexAssembler:AGALMiniAssembler = new AGALMiniAssembler();
   vertexAssembler.assemble(Context3DProgramType.VERTEX, vertexShader.join("\n"));

   // compile fragment shader
   var fragmentShader:Array = ["mov oc, v0"];

   var fragmentAssembler:AGALMiniAssembler = new AGALMiniAssembler();
   fragmentAssembler.assemble(flash.display3D.Context3DProgramType.FRAGMENT, fragmentShader.join("\n"));

   shaderProgram = cxt3D.createProgram();
   shaderProgram.upload(vertexAssembler.agalcode, fragmentAssembler.agalcode);
   cxt3D.setProgram(shaderProgram);

   addEventListener(Event.ENTER_FRAME, onRenderFrame);
   stage.addEventListener(Event.RESIZE, onResizeHandler);
   onResizeHandler();
  }

  public function onResizeHandler(e:Event = null):void{
   try {
    cxt3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 2);
   } catch (e:Error) {
    trace(e);
    return;
   }
   stage3D.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
   onRenderFrame();
  }

  public function onRenderFrame(e:Event = null):void{
   cxt3D.clear(1, 1, 1, 1);

   var viewMatrix:Matrix3D = new Matrix3D();
   // 設定 vc0-3，要轉置矩陣 transposedMatrix = true or viewMatrix.transpose();
   cxt3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, viewMatrix, true);
   cxt3D.drawTriangles(indexBuffer, 0, 2);
   cxt3D.present();
  }
 }
}

以下开始逐步介绍 Molehill 绘图步骤

Stage3D

Stage3D 是 Molehill 主要用来表现到画面上的物件，与 StageVideo 有点类似，一般只能画在 Display List 最底层 Stage 上。无法自行建立 Stage3D 物件，只能透过 stage.stage3Ds 取用固定数量的实体。一般好像只有四个可用。

stage3D = stage.stage3Ds[0];

Context3D

拿到 Stage3D 之後再藉由它請求 Context3D 物件

stage3D.addEventListener(Event.CONTEXT3D_CREATE, onContext3DCreate);
stage3D.requestContext3D(Context3DRenderMode.AUTO);

请求成功之后，才正式开始用 Context3D 物件绘图。它的基本绘图方式也是跟 AS3 Graphics.drawTriangles 三角形绘图模式类似的，必须要自己準备好顶点座标阵列、索引阵列。

Index Buffer 顶点索引阵列

本范例仅仅只是画两个三角型组成的矩形，所以建立 index buffer 如下：

indexBuffer = cxt3D.createIndexBuffer(6);
indexBuffer.uploadFromVector(Vector.<uint>([0, 1, 2, 0, 2, 3]), 0, 6);

Vertex Buffer 顶点资料阵列

而 vertex buffer 每个顶点包含 x , y 座标以及用来填色的 r , g , b 值。假如是用材质图片就不需要 r , g , b。所以每个顶点包含五个数值，矩形共有四个顶点，有两个点是藉由 index buffer 索引值重复利用的。vertex buffer 设定方式如下：

vertexBuffer = cxt3D.createVertexBuffer(4, 5); // 四個頂點，各五個數值
vertexBuffer.uploadFromVector(Vector.<Number>([
     -1  , 1  ,     0     ,  0  ,     0     ,
     -1  , -1 , 255 / 255 ,  0  ,     0     ,
      1  , -1 , 255 / 255 ,  0  , 255 / 255 ,
      1  , 1  ,     0     ,  0  , 255 / 255
 ]), 0, 4);

// 設定 va0 為 x , y
cxt3D.setVertexBufferAt(0, vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_2);
// 設定 va1 為 r , g , b
cxt3D.setVertexBufferAt(1, vertexBuffer, 2, Context3DVertexBufferFormat.FLOAT_3);

r , g , b 范围是从 0 ~ 1 。x , y 范围是从 -1 ~ 1。这裡 -1 ~ 1 表示的就是整个 Stage3D 单位大小，并非实际表现在画面的绝对大小。之后还要再利用stage3D.viewPort 设定表现范围。譬如本范例就是从座标 (-1, -1) 到 (1, 1) 绘製矩形，stage3D.viewPort 设為与 stage 一样大，那麼实际看到的矩形就会填满整个舞台。

Vertex Shader 顶点著色器

需要撰写 AGAL 语法。虽然名字叫“著色器”不过实际上主要是用来作座标点的矩阵变形运算，将算出来的座标输出到 op 配合片段著色器最后算出来的色彩值就可以画出来了。以下例子只有将所有的座标点作一次矩阵变形运算就直接输出，然后将内插色值指定到 v0 暂存器，準备给 Fragment Shader 使用：

var vertexShader:Array = [
  "m44 op, va0, vc", // 4x4 matrix transform from va0 and vc0 to output position
  "mov v0, va1" // copy rgb color from va1 to v0
 ];

var vertexAssembler:AGALMiniAssembler = new AGALMiniAssembler();
vertexAssembler.assemble(Context3DProgramType.VERTEX, vertexShader.join("\n"));

Fragment Shader 片段著色器

也是 AGAL 语法。以下例子中没有做什麼运算，仅仅只是把 Vertex Shader 传来的内插色值直接输出到 oc 而已：

ar fragmentShader:Array = ["mov oc, v0"];

var fragmentAssembler:AGALMiniAssembler = new AGALMiniAssembler();
fragmentAssembler.assemble(flash.display3D.Context3DProgramType.FRAGMENT, fragmentShader.join("\n"));

Program3D

将编译好的 Vertex Shader, Fragment Shader 组合成 Program3D：

shaderProgram = cxt3D.createProgram();
shaderProgram.upload(vertexAssembler.agalcode, fragmentAssembler.agalcode);
cxt3D.setProgram(shaderProgram);

Back Buffer 背景缓衝区

在背景中用来暂存点阵资料的，需要预先用 Context3D.configureBackBuffer 设定它的尺寸。假如 Back Buffer 尺寸比 Stage3D.viewPort 小，那麼看起来可能就会出现锯齿状。在网路上看到 Molehill 范例几乎都是配置固定大小的 Back Buffer, viewPort。我特别用 Stage Resize 事件，把这个范例改成自动 resize Stage3D 跟 stage 一样大，并且维持 1:1 解析度

Render Frame

最后是渲染画面的部分，每次渲染之前都要把画面清掉：

cxt3D.clear(1, 1, 1, 1); // 清掉畫面用白色填滿

然后传入一个 3D 矩阵，通常是用来作 Camera 视角的变化用。一定要转置矩阵，否则刚刚写的 Vertex Shader 矩阵乘法就会出错了：

var viewMatrix:Matrix3D = new Matrix3D();
cxt3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, viewMatrix, true);

用一开始建立的 indexBuffer 画三角形到背景缓衝区：

cxt3D.drawTriangles(indexBuffer, 0, 2);

最后才是将背景缓衝区资料表现出来：

cxt3D.present();

实际执行的结果：

可能会发现到与之前设定的座标顏色值上下颠倒，好像是由於座标系 y 轴与一般 2D y 轴定义是相反的。只要用 viewMatrix.appendScale(1, -1, 1); 就可以翻正了。

原文是繁体，大陆用户需要翻墙：http://ticore.blogspot.com/2011/03/flash-molehill-example.html

Pixel Bender 3D 诞生了

Y.Boy — Thu, 03 Mar 2011 17:30:07 +0800

Flash 的 3D API (Molehill) 诞生后，Pixel Bender 3D 应运而生。Pixel Bender 3D 是 pixelbender 语言的另一个版本，你可以使用它来创建顶点(vertex)和片段(fragment)着色器(shader)，这种着色器是运行于支持3D硬件加速的机器上。Pixel Bender 3D 是Pixel Bender 2D 的扩展，如果你对Pixel Bender 2D比较熟悉，那么你会很快上手Pixel Bender 3D的。

在Adobe实验室上查看更多：http://labs.adobe.com/technologies/pixelbender3d/

pixel bender toolkit 2.5 发布了

Y.Boy — Sat, 11 Dec 2010 17:08:38 +0800

pixel bender toolkit 2.5 现在包含一个新的视觉图形编辑器，允许你操作图形结构。

你可以在这里下载到最新版的Pixel Bender及获取更多信息：http://www.adobe.com/devnet/pixelbender.html
在安装前，请阅读这个页面：http://www.adobe.com/devnet/pixelbender/articles/releasenotes.html#articlecontentAdobe_numberedheader_2
Adobe Pixel Bender 中文技术中心：http://www.adobe.com/cn/devnet/pixelbender/

Pixel Bender 3D演示及Adobe MAX 2010上相关的视频

Y.Boy — Wed, 03 Nov 2010 10:00:24 +0800

Adobe的产品应用了Pixel Bender语言和GPU和多核图形处理的技术。伴随着新一代Flash Player（Molehill）的3D API的出现，Adobe致力于能协助创建shaders的工具。PixelBender 3D能够创建和输出可以在Flash Player中使用的fragment shaders & vertex shaders。英语原文里演示了如何创建和输出类似水中倒影的高级shaders效果：http://bharatria.wordpress.com/2010/10/29/pixel-bender-3d/

另外，这里有Adobe MAX 2010 关于Pixel Bender的一些视频：MAX 2010: Pixel Bender: Now with 50% More “D”

一个简单的Pixel Bender在线预览器

Y.Boy — Sat, 07 Aug 2010 12:48:46 +0800

介绍：按英文字母“o”键选择本地PBJ文件进行预览。默认使用一张 300×300 像素的图片进行测试。不过你可以选择一张本地的图片来进行测试。

网址：http://www.pixelbender.cn/viewer/

原地址：http://alexanderzats.com/the/pixel-bender-viewer/

一个基于Pixel Bender的合成器

Y.Boy — Tue, 27 Jul 2010 12:27:35 +0800

在Flash平台上用Pixel Bender进行音频处理已经十分常见。音频处理技术对处理器和数学要求都比较高，所以很自然地想到用Pixel Bender提高SWF文件里声音的表现力。去年某个时候我曾和Justin Everett-Church谈到根据Flash Player 10.1的多点触摸特性做个demo。做个合成器似乎是个好主意，而且可以一石二鸟。所以我写了合成器的代码，外观用Flex的UI，但不够美观，Justin把界面拿去美化之后又添加了多点触摸支持。Demo的第二部分。之后我打算整理好代码然后发布，但是一直忙于推广CS5所以7个月后才发布出来。现在这个demo已经可以演示了，并且有了个漂亮的Flex界面。

我想看看在flash player里最极限的情况是什么样的，所以我不断添加滤波器和处理器，直到声音在我的双核苹果笔记本上开始破裂，然后往回稍稍调一点。结果证明，通过Pixel Bender，你可以完成大量的音频交互处理。这个程序也可以作为AIR应用程序来运行，这意味着如果你真的很想玩，那么关闭其他所有的窗口。

Pixel Bender Synth Experiment

一些技术细节：

每一个Pixel Bender渲染器都包含在一个AS类里面，并通过ShaderJob触发。
每一个Pixel Bender滤波器同时处理两个样本，以提高处理能力。
合成器像混响效果器一样使用三个Pixel Bender Shaders，而其他滤波器只用一个。
在AS里，延迟型滤波器（混响/延迟）使用简单的位桶式延迟，但是延迟信号通过Pixel Bender shaders与主信号混合后返回。

所有信道都是立体声。当混合两个立体声输入时，要用到表征立体声信道两个设置的pixel4。当只是处理或生成一个单一的立体声信号时，要用到表征两个有时序关系的立体声样本的pixel4。

所有滤波器排序如下（点击放大）：

原文（英文）：http://blogs.adobe.com/kevin-goldsmith/2010/04/a_pixel_bender.html
转自并加以处理：http://bbs.9ria.com/viewthread.php?tid=59761

Adobe推出“Pixel Bender Technology Center”专题站

Y.Boy — Tue, 12 Jan 2010 20:06:35 +0800

今天，Adobe推出了“Pixel Bender Technology Center”专题站。上面的内容丰富多彩，还提供pdf版的帮助教程和语言参考下载。地址：http://www.adobe.com/devnet/pixelbender/