Stage3D学习笔记(五):通过矩阵操作纹理
2014-11-05 12:58
225 查看
虽然我们上一节已经实现了正交矩阵的显示,但是可以明显的感觉到要调整显示纹理的坐标和尺寸是相当复杂的,需要对每个顶点进行操作,如果还要加上注册点和旋转的话,用上一节的方法来做是会让人发疯的!
所以我们距离实用还有很长的路要走,加上之前面试时由于对Starling内部实现的不了解导致的失利,所以接下来的一段学习笔记会专注在通过正交矩阵来实现2D框架的实现上,并参考Starling的架构做一个精简的山寨版!
首要任务,就是要能方便的对纹理设置位置、尺寸和旋转!下面介绍Starling中使用的方法,借助Flash原生的Matrix3D类来实现对纹理的操作。
我们基于Stage3D学习笔记(三)的代码来修改;
首先我们除了需要一个正交矩阵用来进行正交运算外,还需要一个矩阵用来记录模型的信息(我们可以把显示的纹理看做由两个三角面拼成的一个四方形模型)。
正交矩阵的初始化相对于上一节有所变动,为了清晰没有使用新版Starling的简化过的矩阵,而是使用第一版的矩阵。
还有一点需要更改的是,由于我们的模型的尺寸选择等信息都交由_modelViewMatrix对象来存储,所以顶点数据可以不需要修改,因为我们的需求只有一个,就是显示一个四边形的图片,所以顶点数据可以写死,可以去掉z轴信息,uv信息和xy的信息一致,也可以去掉,不过我们这里进行了保留。
由于去掉了z轴的数据,所以数据上传的格式也要进行相应的更改,具体可以看最终的代码。
模型矩阵是直接操作当前的纹理的显示的,对他的修改也比较简单:
需要注意的是,模型矩阵和正交矩阵是需要进行合并的。
我们看一下现在的效果:
不错哦,是我们想要的效果,下面测试一下旋转和位移:
直接给出代码了:
所以我们距离实用还有很长的路要走,加上之前面试时由于对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(); } } }
相关文章推荐
- 【Direct2D开发】 通过操作像素实现纹理混合
- 通过PBO进行opengl与Cuda的纹理互操作
- 数字图像处理--通过矩阵,简化操作(旋转,平移,缩放,切边....)
- php+odbc+access 数据库操作函数,在windows下测试通过
- SQLServer2000存储过程中通过数据库链接操作Oracle数据库
- ASP通过XMLDom在服务器端操作XML文件的主要方法和实现
- 矩阵基本操作的实现(C# 源代码)
- 使用Struts的Action来通过Hibernate对数据库进行增、删、改、查四项操作
- 用Java通过DIIOP远程操作Domino服务器
- 一个通过DataSet操作XML的类(原创)
- .NET1.1下,使用C#自动生成Word2003文档(通过操作COM组件实现)
- 使用ADO操作SQL SERVER 通过'OLE DB 访问 ACCESS 数据库 ,实现数据交换
- 通过DOM操作数据(上)
- 通过JDBC操作ORACLE数据库实例详解
- 直接通过ADO操作Access数据库
- vc中通过MSXML操作XML文件(转贴)
- 通过JDBC操作ORACLE数据库实例详解(最常用操作)
- 矩阵的一些操作
- opengl 的矩阵操作的使用方法
- 通过Java直接对Excel文件进行操作