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

Everyday Stage3D （一）

Everyday Stage3D （二） Triangle

Everyday Stage3D （三） AGAL的基本概念

Everyday Stage3D （四） AGAL的数据操作

Everyday Stage3D （五） 流化你的数据

Everyday Stage3D （六） Texture

Everyday Stage3D （七） 常量寄存器的使用

 

 

总结来说，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] + "	" + matrix.rawData[i + 1] + "	" + matrix.rawData[i + 2] + "	" + matrix.rawData[i + 3]);
}

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

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

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

private var _fragmentProgram:String = "tex ft1, v0, fs0<2d,linear,nomip>
" +
                                                               "m44 ft2, ft1, fc1
" +                    //颜色变换
                                                               "mul ft2, ft2, fc0.x
" +          //效果图跟原图做multiply，向量float4 * float = float4，类似PixelBender
                                                               "mul ft1, ft1, fc0.y
" +
                                                               "add ft2, ft2, ft1
" +
                                                               "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
]));