Molehill初探

　　关注flash的同学肯定都知道Adobe推出了新的基于硬件加速的API Molehill。它可以在60Hz左右的高分辨率显示器下全屏渲染近百万的Z缓冲三角形。就算你的显卡不兼容，也会通过一个叫SwiftShader软件来利用CPU进行渲染。

　　我们熟悉的2D显示列表位于Molehill的Stage3D上面，而Stage3D又位于StageVideo上面。实际上3D内容可以通过bitmapdata呈现在2D显示列表中。

　　下图表示了Molehill的基本架构

　　

　　

　　下面的代码在Stage3D中创建了一个三角形，从中我们可以略微熟悉一下这套API的用法

package

	

{

	import com.adobe.utils.AGALMiniAssembler;

	

	import flash.display.Sprite;

	import flash.display.Stage3D;

	import flash.display.StageAlign;

	import flash.display.StageScaleMode;

	import flash.display3D.Context3D;

	import flash.display3D.Context3DProgramType;

	import flash.display3D.Context3DTriangleFace;

	import flash.display3D.Context3DVertexBufferFormat;

	import flash.display3D.IndexBuffer3D;

	import flash.display3D.Program3D;

	import flash.display3D.VertexBuffer3D;

	import flash.events.Event;

	import flash.geom.Matrix3D;

	import flash.geom.Rectangle;

	

	[SWF(width="980", height="570", frameRate="60")]

	public class MoleHillTest extends Sprite

	{

		//Context3D 是渲染发生的地方，它和Stage3D的关系就像bitmapdata和bitmap的关系

		private var context3d:Context3D;

	

		//VertexBuffer3D将存储顶点数据

		private var vertexBuffer:VertexBuffer3D;

	

		//这里定义顶点的渲染顺序

		private var indexBuffer:IndexBuffer3D;



		//Program3D是用来包含两个着色器的

		private var program:Program3D;



		//这是一个矩阵，我们的顶点着色器将使用它来修改顶点的位置

		private var model:Matrix3D=new Matrix3D();

		

		public function MoleHillTest()

		{

		

			//监听flash什么时候给我们返回一个Context3D对象，因为当你请求Context3D的时候，flash不一定会马上回应

			stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onGotContext);

			//请求一个Context3D对象

			stage.stage3Ds[0].requestContext3D();

			

		}

		protected function onGotContext(ev:Event):void

		{

			//获得Stage3D对象，它将给我们Context3D

			var stage3d:Stage3D=Stage3D(ev.currentTarget);

			//我们获得了Context3d

			context3d=stage3d.context3D;

			//如果没有获得，那我们就跳出函数

			trace(context3d)

			if(context3d==null)

				return;

			//当发生问题的时候，我们可以获得error信息。请在正式发布的时候设为false以提高性能

			context3d.enableErrorChecking=true;

			//基本上，你可以看成是 new BitmapData(980, 570)，表示渲染的大小。而4表示反锯齿的强度，可以设置的值为0,2,4,16.

			context3d.configureBackBuffer(980, 570, 4, true);

			//这里是说当三角形没有对着我们的时候，就不要渲染它，还有可能的值是Context3DTriangleFace.FRONT,Context3DTriangleFace.FRONT_AND_BACK,Context3DTriangleFace.NONE。

			context3d.setCulling(Context3DTriangleFace.BACK);

			//创建一个顶点缓冲，我们将有3个顶点（三角形），每个顶点包含6个元素，分别表示

			//x坐标,y坐标,z坐标,红色,绿色,蓝色。

			vertexBuffer=context3d.createVertexBuffer(3, 6);

			//为顶点创建一个索引缓冲来为三角形排序，我们有一个三角形，因此这里有3个顶点，因此有3个索引

			indexBuffer=context3d.createIndexBuffer(3);

			//顶点数据包含每个顶点的位置信息以及颜色信息

			//x==-1表示屏幕的左边

			//x==1表示屏幕的右边

			//x==0表示屏幕的中央

			//y也是同样的道理。1,0,-1分别表示屏幕的上中下

			//颜色值在0-1之间，比如1,0,0表示纯红色

			//下面的数据描述了一个三角形，它左下角的顶点是红色，中间上面的顶点是绿色，右下角的顶点是蓝色

			var vertexData:Vector.<Number>=Vector.<Number>(

				[

					-1, -1, 0,  255/255, 0, 0, //<- 1st vertex x,y,z,r,g,b

					0, 1, 0,  0, 255/255, 0, //<- 2nd vertex x,y,z,r,g,b

					1, -1, 0,  0, 0, 255/255 //<- 3rd vertex x,y,z,r,g,b

				]

			);

			//这个是我们渲染顶点的顺序，0是第一个顶点，1是第二个，2是第三个。

			var indexData:Vector.<uint>=Vector.<uint>([0, 1, 2]);

			//将我们的顶点数据传递给顶点缓冲

			vertexBuffer.uploadFromVector(vertexData, 0, 3);

			//将我们表示顺序的索引值传递给顶点缓冲

			indexBuffer.uploadFromVector(indexData, 0, 3);

			//AGAL(Adobe Graphics Assembly Language)是Adobe开发的图形汇编语言，可以操控机器硬件比如可编程显卡

			//AGALMiniAssembler是Adobe官方提供的编译器类，它通过字符串指令来获得一个AGAL二进制流，再通过context3D上传给显卡的编程管线。最后由显卡来处理顶点以及片段的运算

			//在此我们创顶点和片段两个‘编译器’，来处理顶点和片段

			var agalVertex:AGALMiniAssembler=new AGALMiniAssembler();

			var agalFragment:AGALMiniAssembler=new AGALMiniAssembler();

			//m44 op, va0, vc0 表示应用一个4x4矩阵到我们的顶点并输出到屏幕

			//mov v0, va1 表示取出我们顶点的颜色值，并传给片段着色器

			var agalVertexSource:String="m44 op, va0, vc0\n" +

				"mov v0, va1\n";

	

			//将我们的颜色输出到屏幕

			var agalFragmentSource:String="mov oc, v0\n";

			//编译AGAL源字符串，这个过程中将产生一个ByteArray供着色器使用

			agalVertex.assemble(Context3DProgramType.VERTEX, agalVertexSource);

			agalFragment.assemble(Context3DProgramType.FRAGMENT, agalFragmentSource);



			//创建一个Program3D来使用我们的着色器，包括顶点着色器和片段着色器，Program3D是显卡管线上的程序

			program=context3d.createProgram();



			//传递编译过的着色器给我们的Program3D使用

			program.upload(agalVertex.agalcode, agalFragment.agalcode);

			

			//定时触发渲染

			addEventListener(Event.ENTER_FRAME, onRenderLoop);

		}

		

		protected function onRenderLoop(event:Event):void

		{

			

			//清除颜色和透明度

			context3d.clear(0.5, 0.5, 0.5, 1);



			//设置会渲染到屏幕上的Program3D

			context3d.setProgram(program);

		

			//现在我们为顶点缓冲定义两个属性val0和val1，val0表示位置，val1表示颜色

			//第一个参数是属性的id,0代表位置val0，1代表颜色val1；第二个参数vertextBuffer提供了运算对象；第三个参数表示该属性要从什么位置开始取值；第四个参数可以理解为取几个值

			context3d.setVertexBufferAt(0, vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_3);

			//颜色值是从3开始的，所以从3取值，如果使用的是带alpha的颜色值，可能最后一个参数就该使用 Context3DVertexBufferFormat.FLOAT_4

			context3d.setVertexBufferAt(1, vertexBuffer, 3, Context3DVertexBufferFormat.FLOAT_3);

			

			//重设矩阵

			model.identity();



			//将三角形在x,y,z上各缩放0.5倍；你还可以通过model.appendScale，model.appendTranslation来旋转和移动三角形

			model.appendScale(0.5, 0.5, 0.5);

		

			//通过矩阵定义一个常量

			context3d.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, model);

	

			//将三角形绘制到屏幕，0表示起始位置，1表示我们只画一个三角形

			context3d.drawTriangles(indexBuffer, 0, 1);

		

			//将三角形显示到屏幕上

			context3d.present();

		}

	}

}　　　　

　　其中最核心的是Context3D，它是一个三维空间的处理环境，负责创建并处理三维对象的各个要素比如顶点、片段、透视等，并将处理的结果使用AGAL(Adobe Graphics Assembly Language)传递给显卡进行运算，运算结果最终被传给CPU并呈现在舞台上。

　　如果你对上面的代码感到疑惑和陌生，这很正常，毕竟这套API是为底层3D开发者准备的，幸好大家所熟知的ActionScript 3D第三方框架如Alternativa3D, Away3s, Flare3D都开始支持Molehill了，因此对于AS开发者来说，我们可以在更高的层次去开发3D应用而不用去过多了解底层的实现。同时还有人开发了一些东西让Stage3D来加速2D图形的渲染，比如M2D框架。

　　最后，如果你想测试上面的代码，请配置好你的运行环境使其能支持molehill，具体的配置方法请google ‘Molehill配置’。