AGAL(Adobe Graphics Assembly Language) 语言是Adobe 公司为stage3D 开发一门图形渲染语言,类似 Opengl Shader Language.

AGAL有30个指令,并不复杂. 只要熟练掌握这30个指令的使用方式,以及如果将程序参数传入AGAL,以及从AGAL中输出参数,就可以入门编写自己想要的效果了.

在寄存器中 有128个存储临时变量的地方 v0-v127

现在针对一个最简单的 AGAL shader 程序,来看看如何操作

[cc lang=”actionscript3″ nowrap=”false”]
var fragmentShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();
fragmentShaderAssembler.assemble(Context3DProgramType.FRAGMENT,
“mov oc, v2n”
);

[/cc]
这个操作是将 v2 中的变量输出到 oc 中.

[cc lang=”actionscript3″ nowrap=”false”]
meshIndexData = Vector.(
[0,1,2, 0,2,3]
);

meshVertexData = Vector.(
[ -1,-1,1, 0,0, 0,0,1, 1.0,0.0,0.0,1.0,
1,-1,1, 1,0, 0,0,1, 0.0,1.0,0.0,1.0,
1,1,1, 1,1, 0,0,1, 0.0,0.0,1.0,1.0,
-1,1,1, 0,1, 0,0,1, 1.0,1.0,1.0,1.0
]);
[/cc]
这个操作构造了2个三角形,IndexData 为三角形要用到的顶点索引位, VertexData 为顶点数据

[cc lang=”actionscript3″ nowrap=”false”]
//rgba
context3D.setVertexBufferAt(2, vertexBuffer, 8, Context3DVertexBufferFormat.FLOAT_4);
[/cc]
将rgba的数值传入渲染.
setVertexBufferAt 的第一个参数就是要使用的 临时寄存器位置, 2 表示 使用v2(0-7). vertexBuffer 为数据, 8 表示要使用的数据是从 VertexData 顶点数据中第8位开始的 即 “1.0,0.0,0.0,1.0”, 最后一个参数是 FLOAT_4 即要使用的数据类型,它表示我们要使用一个4位的浮点型,rgba有4位,如果你传入的是顶点数据x,y,z, 那么你应该使用的是 FLOAT_3 . 对于rgba来说,他们是不可能出现负数的,这意味着你使用BYTES_4 也是可行的,而且最好这么使用.

试着让一个自定义的材质呈现不同颜色
在 agal 中要渲染一个材质的话,需要如下shader
[cc lang=”actionscript3″ nowrap=”false”]
var fragmentShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();
fragmentShaderAssembler.assemble(Context3DProgramType.FRAGMENT,
“tex ft0, v1, fs0 <2d,repeat,miplinear>n” +
“mov oc, ft0n”
);
[/cc]
“tex ft0, v1, fs0 <2d,repeat,miplinear>n” 指从 fs0 的地方取得材质, 从 v1 的地方取得 坐标系, 然后将他们存入 ft0
“mov oc, ft0n” 将 ft0 的数据输出
那么怎么给 fs0 和 v1 赋值呢?
fs0 赋值方式为 context3D.setTextureAt(0,myTexture);
v1 赋值方式为 context3D.setVertexBufferAt(1, vertexBuffer, 3, Context3DVertexBufferFormat.FLOAT_2); v1 的数据就只之前的 meshData 从第三位开始的 U,V 数据.

从上面的agal代码中,我们将材质的颜色仅仅是重现而已,并没有让它呈现不同颜色,接下来,我们来常识实现变色

shader如下
[cc lang=”actionscript3″ nowrap=”false”]
var fragmentShaderAssembler3 : AGALMiniAssembler = new AGALMiniAssembler();
fragmentShaderAssembler3.assemble(Context3DProgramType.FRAGMENT,
“tex ft0, v1, fs0 <2d,repeat,miplinear>n” +
“mul ft1, v2, ft0n” +
“mov oc, ft1n”
);
[/cc]
这个shader程序仅仅比之前多一行
“mul ft1, v2, ft0n” 的操作为 对于材质的每一个像素 都乘以 从v2中获取的rgba参数,并将结果存入 ft1
“mov oc, ft1n” 将这些参数输出

如果不是针对每一个像素,而是让整个材质呈现同一种颜色.
只需要将第二句改变为 “mul ft1, fc0, ft0n”
fc0 的赋值方式为 context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT,0,Vector.([1,0,0,1]));

最后整理一下AS3.0 中 API的解释,以及所有寄存器的定义,最后是30个寄存器列表
Continue reading

使用MoleHill 来构建一个选择的方形,不借助任何现成的第三方引擎.
直接上代码
代码中的注释已经非常的详尽了.

提前做一个绘制方向顶点定义的解释
[cc lang=”actionscript3″ nowrap=”false”]
private function initData() : void
{
//定义每个多边形用到的顶点
//一个方形是由2个三角形构成的
meshIndexData = Vector.
([
0,1,2, 0,2,3,
]);

// 源数据需要用到4个顶点
// xyz坐标, texture 坐标系 UV, 归一化 xyz
meshVertexData = Vector.
([
//X, Y, Z, U, V, nX, nY, nZ
-1, -1, 1, 0, 0, 0, 0, 1,
1, -1, 1, 1, 0, 0, 0, 1,
1, 1, 1, 1, 1, 0, 0, 1,
-1, 1, 1, 0, 1, 0, 0, 1
]);
}
[/cc]

meshIndexData 的作用是顶点索引,即告诉渲染程序,当前顶点的数据要从 顶点数据集中的第几个索引中去取.
meshIndexData 的长度6,在渲染网格的时候将其长度/2 来告诉程序每个网格要到3个顶点.
meshVertexData 就是顶点数据 长度为4, 每8个为1组,因此渲染网格的时候将其长度/8
meshVertexData 中的xyz 构成的是一个坐标系中的方形的4个坐标点 UV用来定义该点唯一坐标系的中哪一个区域, 其中0表示负半轴,1表示正半轴
nx,ny,nz表示归一化后的xyz坐标

后面是完整代码和demo
Continue reading

手头项目做到尾声了。 在整理代码的时候无意中想到，项目中大量的用到了 greenSock 的 TweenMax 和 TweenLite 甚至是 Loader

查询资料后发现 这个开源的缓动类库实际上不允许运用在 商业项目中的。项目要是在国内运营还好，问题是项目是运营在facebook 上的，这样就比较危险了。
于是动手自己编写了一个缓动类库进行替换（还好项目中只有4处用到了缓动）。 但是！！ 由于项目中打击怪物掉落物品的这一个效果是使用 TweenMax 的俱乐部插件绘制的抛物线，这块要自行模拟就比较复杂了。

由于要实现的效果是物品上抛时减速，下落时加速的效果。
于是我先根据抛物线公式，通过x轴偏移计算当前y轴高度。
Continue reading