Stage3D学习笔记（五）：通过矩阵操作纹理

虽然我们上一节已经实现了正交矩阵的显示，但是可以明显的感觉到要调整显示纹理的坐标和尺寸是相当复杂的，需要对每个顶点进行操作，如果还要加上注册点和旋转的话，用上一节的方法来做是会让人发疯的！

所以我们距离实用还有很长的路要走，加上之前面试时由于对Starling内部实现的不了解导致的失利，所以接下来的一段学习笔记会专注在通过正交矩阵来实现2D框架的实现上，并参考Starling的架构做一个精简的山寨版！

 

首要任务，就是要能方便的对纹理设置位置、尺寸和旋转！下面介绍Starling中使用的方法，借助Flash原生的Matrix3D类来实现对纹理的操作。

我们基于Stage3D学习笔记（三）的代码来修改；

 

首先我们除了需要一个正交矩阵用来进行正交运算外，还需要一个矩阵用来记录模型的信息（我们可以把显示的纹理看做由两个三角面拼成的一个四方形模型）。

//正交矩阵
private var _projectionMatrix:Matrix3D;
//模型矩阵, 通过操作该矩阵来变换纹理的显示
private var _modelViewMatrix:Matrix3D;

正交矩阵的初始化相对于上一节有所变动，为了清晰没有使用新版Starling的简化过的矩阵，而是使用第一版的矩阵。

private function initOrthographicProjection(width:Number, height:Number, near:Number = -1.0, far:Number = 1.0):void
{
    //创建正交矩阵的实例
    _projectionMatrix = new Matrix3D();
    //设置正交矩阵数据, 这个公式记死即可
    var coords:Vector.<Number> = new <Number>
            [
                2.0 / width, 0.0, 0.0, 0.0,
                0.0, -2.0 / height, 0.0, 0.0,
                0.0, 0.0, -2.0 / (far - near), 0.0,
                -1.0, 1.0, -(far + near) / (far - near), 1.0
            ];
    _projectionMatrix.copyRawDataFrom(coords);
}

还有一点需要更改的是，由于我们的模型的尺寸选择等信息都交由_modelViewMatrix对象来存储，所以顶点数据可以不需要修改，因为我们的需求只有一个，就是显示一个四边形的图片，所以顶点数据可以写死，可以去掉z轴信息，uv信息和xy的信息一致，也可以去掉，不过我们这里进行了保留。

private function initBuffer():void
{
    //顶点数据, 因为只需要显示一张图片所以这里的顶点数据是可以写死的, 同时可以去掉 z 轴
    //的数据, 因为不需要使用到 z 轴, 我们按照下面的规则来排列顶点：
    //0 - 1
    //| / |
    //2 - 3
    //有趣的是 uv 的数据和顶点数据其实是一致的, 所以 uv 的数据也可以去除, 不过我们这里
    //先留着, Starling 框架中 uv 数据是已经去掉的
    var vertexData:Vector.<Number> = Vector.<Number>(
            [
            //  x, y, u, v
                0, 0, 0, 0,
                1, 0, 1, 0,
                0, 1, 0, 1,
                1, 1, 1, 1
            ]);
//省略
}

由于去掉了z轴的数据，所以数据上传的格式也要进行相应的更改，具体可以看最终的代码。

模型矩阵是直接操作当前的纹理的显示的，对他的修改也比较简单：

private function transformMatrix():void
{
    //设置纹理的转换矩阵
    _modelViewMatrix = new Matrix3D();
    //设置矩阵的位置
    _modelViewMatrix.prependTranslation(0, 0, 0);
    //设置矩阵的旋转
    _modelViewMatrix.prependRotation(0, Vector3D.Z_AXIS);
    //设置矩阵的尺寸
    _modelViewMatrix.prependScale(128, 128, 1);
    //设置纹理的中心点
    _modelViewMatrix.prependTranslation(0, 0, 0);
    
    //将纹理的转换矩阵和正交矩阵结合就得到了最终需要的上传到 GPU 进行运算的矩阵数据
    var mvpMatrix:Matrix3D = new Matrix3D();
    mvpMatrix.append(_modelViewMatrix);
    mvpMatrix.append(_projectionMatrix);
    //将我们的最终矩阵作为常量传递到 GPU 中, 指定其是名称为 vc0 的那个寄存器
    _context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, mvpMatrix, true);
}

需要注意的是，模型矩阵和正交矩阵是需要进行合并的。

我们看一下现在的效果：

不错哦，是我们想要的效果，下面测试一下旋转和位移：

private function transformMatrix():void
{
    //设置纹理的转换矩阵
    _modelViewMatrix = new Matrix3D();
    //设置矩阵的位置
    _modelViewMatrix.prependTranslation(100, 100, 0);
    //设置矩阵的旋转
    _modelViewMatrix.prependRotation(45, Vector3D.Z_AXIS);
    //设置矩阵的尺寸
    _modelViewMatrix.prependScale(128, 128, 1);
    //设置纹理的中心点
    _modelViewMatrix.prependTranslation(0, 0, 0);
//省略
}

直接给出代码了：

package
{
    import com.adobe.utils.AGALMiniAssembler;
    
    import flash.display.Bitmap;
    
    import flash.display.Sprite;
    import flash.display.Stage3D;
    import flash.display3D.Context3D;
    import flash.display3D.Context3DProfile;
    import flash.display3D.Context3DProgramType;
    import flash.display3D.Context3DRenderMode;
    import flash.display3D.Context3DTextureFormat;
    import flash.display3D.Context3DVertexBufferFormat;
    import flash.display3D.IndexBuffer3D;
    import flash.display3D.Program3D;
    import flash.display3D.VertexBuffer3D;
    import flash.display3D.textures.Texture;
    import flash.events.ErrorEvent;
    import flash.events.Event;
    import flash.geom.Matrix3D;
    import flash.geom.Vector3D;
    
    [SWF(width=550, height=400, frameRate=60)]
    public class Matrix3DTest extends Sprite
    {
        [Embed(source="img.png")]
        private var IMG_CLASS:Class;
        
        //3D 场景对象
        private var _stage3D:Stage3D;
        //3D 上下文渲染对象
        private var _context3D:Context3D;
        
        //顶点缓冲数据
        private var _vertexBuffer:VertexBuffer3D;
        //索引缓冲数据
        private var _indexBuffer:IndexBuffer3D;
        //纹理数据对象
        private var _texture:Texture;
        
        //着色器对象
        private var _program3D:Program3D;
        
        //正交矩阵
        private var _projectionMatrix:Matrix3D;
        //模型矩阵, 通过操作该矩阵来变换纹理的显示
        private var _modelViewMatrix:Matrix3D;
        
        public function Matrix3DTest()
        {
            addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
        }
        
        private function addedToStageHandler(event:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
            
            //3D 场景存在, 一般存在 4 个 3D 场景对象
            if(stage.stage3Ds.length > 0)
            {
                //使用最下层的 3D 场景
                _stage3D = stage.stage3Ds[0];
                //请求 3D 上下文渲染对象
                _stage3D.addEventListener(ErrorEvent.ERROR, stage3DErrorHandler);
                _stage3D.addEventListener(Event.CONTEXT3D_CREATE, context3DCreateHandler);
                _stage3D.requestContext3D(Context3DRenderMode.AUTO, Context3DProfile.BASELINE);
            }
        }
        
        private function stage3DErrorHandler(event:ErrorEvent):void
        {
            trace("Context3D对象请求失败：", event.text);
        }
        
        private function context3DCreateHandler(event:Event):void
        {
            initContext3D();
            initOrthographicProjection(stage.stageWidth, stage.stageHeight);
            initBuffer();
            initTexture();
            transformMatrix();
            initProgram();
            
            //每帧进行渲染
            addEventListener(Event.ENTER_FRAME, render);
        }
        
        private function initContext3D():void
        {
            //获取 3D 渲染对象
            _context3D = _stage3D.context3D;
            //设置后台缓冲区
            _context3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 2);
        }
        
        private function initOrthographicProjection(width:Number, height:Number, near:Number = -1.0, far:Number = 1.0):void
        {
            //创建正交矩阵的实例
            _projectionMatrix = new Matrix3D();
            //设置正交矩阵数据, 这个公式记死即可
            var coords:Vector.<Number> = new <Number>
                    [
                        2.0 / width, 0.0, 0.0, 0.0,
                        0.0, -2.0 / height, 0.0, 0.0,
                        0.0, 0.0, -2.0 / (far - near), 0.0,
                        -1.0, 1.0, -(far + near) / (far - near), 1.0
                    ];
            _projectionMatrix.copyRawDataFrom(coords);
        }
        
        private function initBuffer():void
        {
            //顶点数据, 因为只需要显示一张图片所以这里的顶点数据是可以写死的, 同时可以去掉 z 轴
            //的数据, 因为不需要使用到 z 轴, 我们按照下面的规则来排列顶点：
            //0 - 1
            //| / |
            //2 - 3
            //有趣的是 uv 的数据和顶点数据其实是一致的, 所以 uv 的数据也可以去除, 不过我们这里
            //先留着, Starling 框架中 uv 数据是已经去掉的
            var vertexData:Vector.<Number> = Vector.<Number>(
                    [
                    //  x, y, u, v
                        0, 0, 0, 0,
                        1, 0, 1, 0,
                        0, 1, 0, 1,
                        1, 1, 1, 1
                    ]);
            
            //创建顶点缓冲对象, 参数设定存在几组数据和每组数据的个数
            _vertexBuffer = _context3D.createVertexBuffer(vertexData.length / 4, 4);
            //上传顶点数据到GPU, 参数设定从第几组数据开始上传和上传多少组数据
            _vertexBuffer.uploadFromVector(vertexData, 0, vertexData.length / 4);
            
            //索引数据
            var indexData:Vector.<uint> = Vector.<uint>(
                    [
                        0, 1, 2,
                        1, 2, 3
                    ]);
            
            //创建索引缓冲对象, 每个索引对应顶点数据中的相对应的一组数据, 
            //每3个索引组成一个会被绘制出来的三角形, 参数指定索引的长度
            _indexBuffer = _context3D.createIndexBuffer(indexData.length);
            //上传索引数据到GPU, 参数设定从第几个数据开始上传和上传多少个数据
            _indexBuffer.uploadFromVector(indexData, 0, indexData.length);
        }
        
        private function initTexture():void
        {
            //创建位图
            var bitmap:Bitmap = new IMG_CLASS() as Bitmap;
            //创建纹理, 注意尺寸必须是 2 的幂数
            _texture = _context3D.createTexture(128, 128, Context3DTextureFormat.BGRA, true);
            //上传纹理到 GPU, 第二个参数表示该纹理的 mipmap 级别, 级别零是高级全分辨率图像
            _texture.uploadFromBitmapData(bitmap.bitmapData, 0);
        }
        
        private function transformMatrix():void
        {
            //设置纹理的转换矩阵
            _modelViewMatrix = new Matrix3D();
            //设置矩阵的位置
            _modelViewMatrix.prependTranslation(100, 100, 0);
            //设置矩阵的旋转
            _modelViewMatrix.prependRotation(45, Vector3D.Z_AXIS);
            //设置矩阵的尺寸
            _modelViewMatrix.prependScale(128, 128, 1);
            //设置纹理的中心点
            _modelViewMatrix.prependTranslation(0, 0, 0);
            
            //将纹理的转换矩阵和正交矩阵结合就得到了最终需要的上传到 GPU 进行运算的矩阵数据
            var mvpMatrix:Matrix3D = new Matrix3D();
            mvpMatrix.append(_modelViewMatrix);
            mvpMatrix.append(_projectionMatrix);
            //将我们的最终矩阵作为常量传递到 GPU 中, 指定其是名称为 vc0 的那个寄存器
            _context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, mvpMatrix, true);
        }
        
        private function initProgram():void
        {
            //顶点着色器代码, 每个上传的顶点前都会执行一次该代码
            var vertexArr:Array =
                    [
                        //op 代表位置输出寄存器, 无论对顶点进行多少次的运算最终都要将结果
                        //赋值给他, 这里和我们的正交矩阵进行相乘的运算
                        "m44 op, va0, vc0",
                        //片段着色器需要用的数据要在这里通过 v0 中转一下, 因为片段着色器不
                        //能直接读取 va0 和 va1 的数据
                        "mov v0, va1"
                    ];
            
            //片段着色器代码, 每个可以显示的像素都会执行一次该代码
            var fragmentArr:Array =
                    [
                        //对纹理 fs0 进行取样, 通过 v0 代表的 uv 坐标来获取对应的像素点颜
                        //色, 将该颜色值存储到 ft0 中
                        "tex ft0, v0, fs0 <2d,repeat,linear,nomip>",
                        //oc 代表颜色输出寄存器, 每个顶点的颜色数据都要赋值给他
                        "mov oc, ft0"
                    ];
            
            //使用 Adobe 自己提供的编译器编译代码为程序可使用的二进制数据
            var assembler:AGALMiniAssembler = new AGALMiniAssembler();
            _program3D = assembler.assemble2(_context3D, 1, vertexArr.join("\n"), fragmentArr.join("\n"));
            
            //----- 这段代码是从 render 里搬过来的, 因为不会进行改动就不放在帧循环中了 -----
            
            //指定着色器代码的 va0 代表的数据段, 表示顶点的 x, y 坐标
            _context3D.setVertexBufferAt(0, _vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_2);
            //指定着色器代码的 va1 代表的数据段, 表示顶点的 u, v 数据
            _context3D.setVertexBufferAt(1, _vertexBuffer, 2, Context3DVertexBufferFormat.FLOAT_2);
            //指定上传的纹理由 fs0 表示
            _context3D.setTextureAt(0, _texture);
            //指定当前使用的着色器对象
            _context3D.setProgram(_program3D);
        }
        
        private function render(event:Event):void
        {
            //清除已绘制过的 3D 图像
            _context3D.clear();
            //通过顶点索引数据绘制所有的三角形
            _context3D.drawTriangles(_indexBuffer);
            //将后台缓冲的图像显示到屏幕
            _context3D.present();
        }
    }
}