Stage3d 由浅到深理解AGAL的管线vertex shader和fragment shader || 简易教程 学习心得 AGAL 非常非常好的入门文章

总结来说，Stage3D是跟GPU打交道的技术。涉及到几方面的知识：

1、渲染的过程，3d管线的概念。有vertex shader，有fragment shader，这连个是管线里边提供接口出来，可供自定义编程的

     http://hi.baidu.com/haorui1130/item/aa65dcceceaebf3f4494167b

2、Stage3D的context3d是核心，负责跟gpu打交道，上传顶点信息xy、纹理信息uv、常量等。初始化时，每个xy对应一个uv

3、编写两个shader（利用AGAL），将上传的信息计算出最后的结果值；

vertex shader负责计算图形的大小变化、位置、旋转；

fragment shader负责计算贴图

需要注意的是：

• vertex shader对整个绘图区域，以中心点为原点，y轴向上，范围[-1, 1]；而普通stage座标是，左上角为原点，y轴向下
• fragment shader的纹理座标又不一样，左上角为原点，y轴向下，范围是[0, 1]

AGAL的指令，可以跟PixelBender的做比较，略有类似。

两段程序，如果要执行片段shader，那么在顶点shader的代码最后需要把顶点位置信息传到v0，以供片段shader取出来用

GPU会对每个顶点信息执行这两个代码，这就类似于PixelBender执行每一个像素

指令的相似：一样用xyzxw存取float4，而float4跟float可以直接相乘，出来的还是float4。float4也可以乘以float4，出来的还是float4，是x和x，y和y分别相乘。

矩阵计算：

Matrix3D可以不断乘以新的矩阵，等于多个变换集合在一起。比flash原来的Matrix好使多了。AGAL对Matrix3D的使用，其实跟flash普通sprite的matrix是同一个道理。

函数是append和prepend，两者区别，打印矩阵一看就懂了

例子

利用Matrix3d和Vertex shader实现变形：

var matrix:Matrix3D = new Matrix3D();
matrix.appendScale(0.5, 0.5, 1);   //缩小一倍
matrix.appendTranslation(0.5, 0.25, 0);   //x移动0.5，也就是1/4，y移动0.25
matrix.appendRotation(45, new Vector3D(0,0,1));       //平时Sprite的旋转45度
for (var i:int = 0; i < matrix.rawData.length; i+=4)
{
        trace(matrix.rawData[i] + "\t" + matrix.rawData[i + 1] + "\t" + matrix.rawData[i + 2] + "\t" + matrix.rawData[i + 3]);
}

_context3d.setProgramConstantsFromMatrix( "vertex", 0, matrix, true);     //这里需要注意，涉及到位移，这里需要把矩阵转置一下，true表示先转置一下。否则计算结果有问题

private var _vertexProgram:String = "m44 op, va0, vc0\n" +
                     "mov v0, va1";  //传递给片段shader座标值

利用Matrix3d和Fragment Shader实现sepia效果（旧照片滤镜）：

private var _fragmentProgram:String = "tex ft1, v0, fs0<2d,linear,nomip>\n" +
                                                               "m44 ft2, ft1, fc1\n" +                    //颜色变换
                                                               "mul ft2, ft2, fc0.x\n" +          //效果图跟原图做multiply，向量float4 * float = float4，类似PixelBender
                                                               "mul ft1, ft1, fc0.y\n" +
                                                               "add ft2, ft2, ft1\n" +
                                                               "mov oc, ft2" ;
//multiple比例
_context3d.setProgramConstantsFromVector( "fragment" , 0, new<Number>[1, 0, 0, 0]);
//颜色矩阵
_context3d.setProgramConstantsFromMatrix( "fragment" , 1, new Matrix3D( new <Number>[
       0.393, 0.768, 0.189, 0,
       0.349, 0.686, 0.168, 0,
       0.272, 0.534, 0.13, 0,
       0, 0, 0, 1
]));