首页 > 代码库 > Stage3D学习笔记(二):使用GPU绘制一个三角形
Stage3D学习笔记(二):使用GPU绘制一个三角形
我们需要使用到Adobe自家提供的AGALMiniAssembler代码类,可以在网下进行下载;
关于AGAL的入门知识可以参考下面的文章:
AGAL介绍系列文章(第一部分)
AGAL介绍系列文章(第二部分)
AGAL介绍系列文章(第三部分)
最终效果如下:
直接上代码了,亲们请查看相关的注释说明:
1 package 2 { 3 import com.adobe.utils.AGALMiniAssembler; 4 5 import flash.display.Sprite; 6 import flash.display.Stage3D; 7 import flash.display3D.Context3D; 8 import flash.display3D.Context3DProfile; 9 import flash.display3D.Context3DRenderMode; 10 import flash.display3D.Context3DVertexBufferFormat; 11 import flash.display3D.IndexBuffer3D; 12 import flash.display3D.Program3D; 13 import flash.display3D.VertexBuffer3D; 14 import flash.events.ErrorEvent; 15 import flash.events.Event; 16 17 [SWF(width=800, height=600, frameRate=60)] 18 public class DrawTriangle extends Sprite 19 { 20 //3D 场景对象 21 private var _stage3D:Stage3D; 22 //3D 上下文渲染对象 23 private var _context3D:Context3D; 24 25 //顶点缓冲数据 26 private var _vertexBuffer:VertexBuffer3D; 27 //索引缓冲数据 28 private var _indexBuffer:IndexBuffer3D; 29 30 //着色器对象 31 private var _program3D:Program3D; 32 33 public function DrawTriangle() 34 { 35 addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 36 } 37 38 private function addedToStageHandler(event:Event):void 39 { 40 removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 41 42 //3D 场景存在, 一般存在 4 个 3D 场景对象 43 if(stage.stage3Ds.length > 0) 44 { 45 //使用最下层的 3D 场景 46 _stage3D = stage.stage3Ds[0]; 47 //请求 3D 上下文渲染对象 48 _stage3D.addEventListener(ErrorEvent.ERROR, stage3DErrorHandler); 49 _stage3D.addEventListener(Event.CONTEXT3D_CREATE, context3DCreateHandler); 50 _stage3D.requestContext3D(Context3DRenderMode.AUTO, Context3DProfile.BASELINE); 51 } 52 } 53 54 private function stage3DErrorHandler(event:ErrorEvent):void 55 { 56 trace("Context3D对象请求失败:", event.text); 57 } 58 59 private function context3DCreateHandler(event:Event):void 60 { 61 initContext3D(); 62 initBuffer(); 63 initProgram(); 64 65 //每帧进行渲染 66 addEventListener(Event.ENTER_FRAME, render); 67 } 68 69 private function initContext3D():void 70 { 71 //获取 3D 渲染对象 72 _context3D = _stage3D.context3D; 73 //调整 3D 舞台位置 74 _stage3D.x = 50; 75 _stage3D.y = 50; 76 //设置后台缓冲区 77 _context3D.configureBackBuffer(700, 500, 2); 78 } 79 80 private function initBuffer():void 81 { 82 //顶点数据 83 var vertexData:Vector.<Number> = Vector.<Number>( 84 [ 85 // x, y, z, r, g, b 86 0, 0, 0, 1, 0, 0, 87 1, 1, 0, 0, 1, 0, 88 1, 0, 0, 0, 0, 1 89 ]); 90 91 //创建顶点缓冲对象, 参数设定存在几组数据和每组数据的个数 92 _vertexBuffer = _context3D.createVertexBuffer(vertexData.length / 6, 6); 93 //上传顶点数据到GPU, 参数设定从第几组数据开始上传和上传多少组数据 94 _vertexBuffer.uploadFromVector(vertexData, 0, vertexData.length / 6); 95 96 //索引数据 97 var indexData:Vector.<uint> = Vector.<uint>( 98 [ 99 0, 1, 2100 ]);101 102 //创建索引缓冲对象, 每个索引对应顶点数据中的相对应的一组数据, 103 //每3个索引组成一个会被绘制出来的三角形, 参数指定索引的长度104 _indexBuffer = _context3D.createIndexBuffer(indexData.length);105 //上传索引数据到GPU, 参数设定从第几个数据开始上传和上传多少个数据106 _indexBuffer.uploadFromVector(indexData, 0, 3);107 }108 109 private function initProgram():void110 {111 //顶点着色器代码, 每个上传的顶点前都会执行一次该代码112 var vertexArr:Array =113 [114 //op 代表位置输出寄存器, 无论对顶点进行多少次的运算最终都要将结果115 //赋值给他, 这里我们不进行运行, 直接赋值116 "mov op, va0",117 //片段着色器需要用的数据要在这里通过 v0 中转一下, 因为片段着色器不118 //能直接读取 va0 和 va1 的数据119 "mov v0, va1"120 ];121 122 //片段着色器代码, 每个可以显示的像素都会执行一次该代码123 var fragmentArr:Array =124 [125 //oc 代表颜色输出寄存器, 每个顶点的颜色数据都要赋值给他126 "mov oc, v0"127 ];128 129 //使用 Adobe 自己提供的编译器编译代码为程序可使用的二进制数据130 var assembler:AGALMiniAssembler = new AGALMiniAssembler();131 _program3D = assembler.assemble2(_context3D, 1, vertexArr.join("\n"), fragmentArr.join("\n"));132 }133 134 private function render(event:Event):void135 {136 //清除已绘制过的 3D 图像137 _context3D.clear(0, 0, 0);138 //指定着色器代码的 va0 代表的数据段, 以一组顶点数据为基础来看139 _context3D.setVertexBufferAt(0, _vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_3);140 //指定着色器代码的 va1 代表的数据段, 以一组顶点数据为基础来看141 _context3D.setVertexBufferAt(1, _vertexBuffer, 3, Context3DVertexBufferFormat.FLOAT_3);142 //指定当前使用的着色器对象143 _context3D.setProgram(_program3D);144 //通过顶点索引数据绘制所有的三角形145 _context3D.drawTriangles(_indexBuffer);146 //将后台缓冲的图像显示到屏幕147 _context3D.present();148 }149 }150 }
Stage3D学习笔记(二):使用GPU绘制一个三角形
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。