笔记:AGAL语言与AS3.0 API的对应关系

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

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

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

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

var fragmentShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();
fragmentShaderAssembler.assemble(Context3DProgramType.FRAGMENT,
    "mov oc, v2n"
    );

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

meshIndexData = Vector.<uint>(
    [0,1,2, 0,2,3]
    );
           
meshVertexData = Vector.<number>(
    [   -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
        ]);

这个操作构造了2个三角形,IndexData 为三角形要用到的顶点索引位, VertexData 为顶点数据

    //rgba
    context3D.setVertexBufferAt(2, vertexBuffer, 8, Context3DVertexBufferFormat.FLOAT_4);

将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

var fragmentShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();
fragmentShaderAssembler.assemble(Context3DProgramType.FRAGMENT,
    "tex ft0, v1, fs0 &lt;2d,repeat,miplinear>n" +
    "mov oc, ft0n"
    );

“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如下

var fragmentShaderAssembler3 : AGALMiniAssembler = new AGALMiniAssembler();
fragmentShaderAssembler3.assemble(Context3DProgramType.FRAGMENT,
    "tex ft0, v1, fs0 &lt;2d,repeat,miplinear>n" +
    "mul ft1, v2, ft0n" +
    "mov oc, ft1n"
    );

这个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个寄存器列表
继续阅读“笔记:AGAL语言与AS3.0 API的对应关系”

使用molehill构建一个旋转的方形

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

提前做一个绘制方向顶点定义的解释

        private function initData() : void
        {
            //定义每个多边形用到的顶点
            //一个方形是由2个三角形构成的
            meshIndexData = Vector.<uint>
                ([
                    0,1,2,      0,2,3,
                ]);
           
            // 源数据需要用到4个顶点
            // xyz坐标, texture 坐标系 UV, 归一化 xyz
            meshVertexData = Vector.<number>
                ([
                    //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
                ]);
        }

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

后面是完整代码和demo
继续阅读“使用molehill构建一个旋转的方形”

神奇的曲线

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

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

由于要实现的效果是物品上抛时减速,下落时加速的效果。
于是我先根据抛物线公式,通过x轴偏移计算当前y轴高度。
继续阅读“神奇的曲线”