Stage3D学习笔记（三）：使用GPU绘制一个图片

首先准备我们需要的图片，尺寸必须是2的幂数，我修改了一下Starling的图标拿来用：

还是先看看最终效果：

代码是居于上一节的代码进行修改的：

 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.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;

     [SWF(width=800, height=600, frameRate=60)]
     public class DrawTexture 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;

         public function DrawTexture()
         {
             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();
             initBuffer();
             initTexture();
             initProgram();

             //每帧进行渲染
             addEventListener(Event.ENTER_FRAME, render);
         }

         private function initContext3D():void
         {
             //获取 3D 渲染对象
             _context3D = _stage3D.context3D;
             //调整 3D 舞台位置
             _stage3D.x = 150;
             _stage3D.y = 50;
             //设置后台缓冲区
             _context3D.configureBackBuffer(500, 500, 2);
         }

         private function initBuffer():void
         {
             //顶点数据
             var vertexData:Vector.<Number> = Vector.<Number>(
                     [
                     //  x,    y,    z, u, v
                         -0.5, -0.5, 0, 0, 1,
                         0.5,  -0.5, 0, 1, 1,
                         0.5,   0.5, 0, 1, 0,
                         -0.5,  0.5, 0, 0, 0
                     ]);

             //创建顶点缓冲对象, 参数设定存在几组数据和每组数据的个数
             _vertexBuffer = _context3D.createVertexBuffer(vertexData.length / 5, 5);
             //上传顶点数据到GPU, 参数设定从第几组数据开始上传和上传多少组数据
             _vertexBuffer.uploadFromVector(vertexData, 0, vertexData.length / 5);

             //索引数据
             var indexData:Vector.<uint> = Vector.<uint>(
                     [
                         0, 3, 1,
                         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 initProgram():void
         {
             //顶点着色器代码, 每个上传的顶点前都会执行一次该代码
             var vertexArr:Array =
                     [
                         //op 代表位置输出寄存器, 无论对顶点进行多少次的运算最终都要将结果
                         //赋值给他, 这里我们不进行运行, 直接赋值
                         "mov op, va0",
                         //片段着色器需要用的数据要在这里通过 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, z 坐标
             _context3D.setVertexBufferAt(0, _vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_3);
             //指定着色器代码的 va1 代表的数据段, 表示顶点的 u, v 数据
             _context3D.setVertexBufferAt(1, _vertexBuffer, 3, 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();
         }
     }
 }