vanCopper bio photo

vanCopper

Try Your Best.

Email Github

原创博文,转载请声明

本篇主要是通过简单例子理解相关概念以及基本的渲染流程。对于一些知识点,后面会展开讨论。

通过Stage3D来渲染,最基本的步骤如下:

  1. Stage3D请求一个Context3D的实例
  2. 配置Context3D
  3. 创建顶点缓冲vertexBuffer,索引缓冲indexBuffer
  4. 将顶点数据,索引数据上传至Context3D
  5. 创建顶点着色器,片段着色器
  6. 创建Program3D
  7. 执行渲染

先来解释几个概念:

Stage3D:可将Stage3D理解为容器,它始终在stage下面。一共有4个可用的Stage3D层。你通过Context3D渲染的所有东西都会最终呈现在Stage3D层。

stage.stage3Ds[0]

通过上面的代码可获取对应的Stage3D。

Context3D:渲染用上下文,跟显卡的所有交互都需要通过Context3D来完成。当我们获取到了Stage3D就可以对应的去请求一个Context3D。

_stage3d.requestContext3D(Context3DRenderMode.AUTO, Context3DProfile.STANDARD);

vertexBuffer,indexBuffer:分别用来存储渲染用的顶点数据,索引数据。

Program3D:着色器程序,包含了顶点着色器,片段着色器。

按部就班的来:

####1.向Stage3D请求一个Context3D的实例

if(this.stage.stage3Ds.length > 0)
		{
			_stage3d = this.stage.stage3Ds[0];
			_stage3d.addEventListener(ErrorEvent.ERROR, onCreateContext3DError);
			_stage3d.addEventListener(Event.CONTEXT3D_CREATE, onContext3DCreated);
			_stage3d.requestContext3D(Context3DRenderMode.AUTO, Context3DProfile.STANDARD);
		}

这一步需要注意的是在requestContext3D之前一定要先监听Event.CONTEXT3D_CREATE事件。

####2.配置Context3D

private function initContext3D():void {
_context3d = _stage3d.context3D;
_context3d.configureBackBuffer(700, 500, 2); }

在成功创建Context3D,通过Stage3D拿到实例后配置可渲染的范围以及消除锯齿的品质。

value 品质
0 不消除锯齿
2 最小消除锯齿
4 高质量消除锯齿
16 极高质量消除锯齿

####3.创建顶点缓冲vertexBuffer,索引缓冲indexBuffer

var vertexData:Vector.<Number> = Vector.<Number>(
			[
		    	// x, y, z, r, g, b
				0, 0, 0, 1, 0, 1,
				1, 1, 0, 1, 1, 0,
				1, 0, 0, 1, 0, 0
			]); var indexData:Vector.<uint> = Vector.<uint>(
			[0, 1, 2]);

_vertexBuffer = _context3d.createVertexBuffer(vertexData.length/6, 6); _indexBuffer = _context3d.createIndexBuffer(indexData.length);

vertexData里存放的是三个顶点的数据,每行的前三个数字是坐标,后三个数字是颜色值。indexData里存放的索引值的先后顺序代表了你绘制三个点的顺序。

_context3d.createVertexBuffer(vertexData.length/6, 6);

通过此方法创建顶点缓冲。第一个参数是顶点数量,第二个参数是每个顶点包含的数据个数。 _indexBuffer = _context3d.createIndexBuffer(indexData.length);

通过此方法创建索引缓冲。参数为顶点数量。

####4.将顶点数据,索引数据上传至Context3D

	//第一个参数为顶点数据,第二个参数为顶点开始的索引,第三个为顶点数
	_vertexBuffer.uploadFromVector(vertexData, 0, vertexData.length/6);
	//第一个参数为索引数据,第二个参数为索引数据的开始索引,第三个为数量
	_indexBuffer.uploadFromVector(indexData, 0, 3);  

####5.创建顶点着色器,片段着色器

####6.创建Program3D

	var vertexSrc:String = "mov op, va0\n" +
					"mov v0, va1\n";
	var fragmentsrc:String = "mov oc, v0\n";
	var shaderAssembler:AGALMiniAssembler = new AGALMiniAssembler();
	_program3d = shaderAssembler.assemble2(_context3d, 2, vertexSrc, 	fragmentsrc);

这部分是比较重要的一步,包含了顶点,片段着色器。这里我们使用的是AGAL2的版本。关于AGAL后面会详细讲解。

####7.执行渲染

	_context3d.clear(0, 0, 0);
	_context3d.setVertexBufferAt(0, _vertexBuffer, 0,
		Context3DVertexBufferFormat.FLOAT_3);
	_context3d.setVertexBufferAt(1, _vertexBuffer, 3,
		Context3DVertexBufferFormat.FLOAT_3);
	_context3d.setProgram(_program3d);
	_context3d.drawTriangles(_indexBuffer);
	_context3d.present();

最后一定要执行`_context3d.present()`来显示后台渲染缓冲区。  
最终结果:
![](../images/helloTriangle.png)
完整代码:


<figure class="highlight"><pre><code class="language-as3" data-lang="as3"><span class="kr">package</span>
<span class="p">{</span>
	<span class="kr">import</span> <span class="nx">com</span><span class="p">.</span><span class="nx">adobe</span><span class="p">.</span><span class="nx">utils</span><span class="p">.</span><span class="nx">extended</span><span class="p">.</span><span class="nx">AGALMiniAssembler</span><span class="o">;</span>

	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">display</span><span class="p">.</span><span class="nx">Sprite</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">display</span><span class="p">.</span><span class="nx">Stage3D</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">display3D</span><span class="p">.</span><span class="nx">Context3D</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">display3D</span><span class="p">.</span><span class="nx">Context3DProfile</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">display3D</span><span class="p">.</span><span class="nx">Context3DRenderMode</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">display3D</span><span class="p">.</span><span class="nx">Context3DVertexBufferFormat</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">display3D</span><span class="p">.</span><span class="nx">IndexBuffer3D</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">display3D</span><span class="p">.</span><span class="nx">Program3D</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">display3D</span><span class="p">.</span><span class="nx">VertexBuffer3D</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">ErrorEvent</span><span class="o">;</span>
	<span class="kr">import</span> <span class="nx">flash</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">Event</span><span class="o">;</span>

	<span class="p">[</span><span class="nx">SWF</span><span class="p">(</span><span class="nx">backgroundColor</span><span class="o">=</span><span class="s2">"#333333"</span><span class="p">,</span> <span class="nx">frameRate</span><span class="o">=</span><span class="s2">"60"</span><span class="p">,</span> <span class="nx">width</span><span class="o">=</span><span class="s2">"800"</span><span class="p">,</span> <span class="nx">height</span><span class="o">=</span><span class="s2">"600"</span><span class="p">)]</span>
	<span class="kr">public</span> <span class="kr">class</span> <span class="nx">HelloTriangle</span> <span class="kr">extends</span> <span class="nx">Sprite</span>
	<span class="p">{</span>
		<span class="kr">private</span> <span class="kd">var</span> <span class="nx">_context3d</span><span class="o">:</span><span class="nx">Context3D</span><span class="o">;</span>
		<span class="kr">private</span> <span class="kd">var</span> <span class="nx">_stage3d</span><span class="o">:</span><span class="nx">Stage3D</span><span class="o">;</span>

		<span class="kr">private</span> <span class="kd">var</span> <span class="nx">_vertexBuffer</span><span class="o">:</span><span class="nx">VertexBuffer3D</span><span class="o">;</span>
		<span class="kr">private</span> <span class="kd">var</span> <span class="nx">_indexBuffer</span><span class="o">:</span><span class="nx">IndexBuffer3D</span><span class="o">;</span>

		<span class="kr">private</span> <span class="kd">var</span> <span class="nx">_program3d</span><span class="o">:</span><span class="nx">Program3D</span><span class="o">;</span>

		<span class="kr">public</span> <span class="kd">function</span> <span class="nx">HelloTriangle</span><span class="p">()</span>
		<span class="p">{</span>
			<span class="kr">super</span><span class="p">()</span><span class="o">;</span>
			<span class="nx">addEventListener</span><span class="p">(</span><span class="nx">Event</span><span class="p">.</span><span class="nx">ADDED_TO_STAGE</span><span class="p">,</span> <span class="nx">onAddToStage</span><span class="p">)</span><span class="o">;</span>
		<span class="p">}</span>

		<span class="kr">private</span> <span class="kd">function</span> <span class="nx">onAddToStage</span><span class="p">(</span><span class="nx">e</span><span class="o">:</span><span class="nx">Event</span><span class="p">)</span><span class="o">:</span><span class="nb">void</span>
		<span class="p">{</span>
			<span class="nx">removeEventListener</span><span class="p">(</span><span class="nx">Event</span><span class="p">.</span><span class="nx">ADDED_TO_STAGE</span><span class="p">,</span> <span class="nx">onAddToStage</span><span class="p">)</span><span class="o">;</span>
			<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">stage</span><span class="p">.</span><span class="nx">stage3Ds</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span>
			<span class="p">{</span>
				<span class="nx">_stage3d</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">stage</span><span class="p">.</span><span class="nx">stage3Ds</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="o">;</span>
				<span class="nx">_stage3d</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">ErrorEvent</span><span class="p">.</span><span class="nx">ERROR</span><span class="p">,</span> <span class="nx">onCreateContext3DError</span><span class="p">)</span><span class="o">;</span>
				<span class="nx">_stage3d</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">Event</span><span class="p">.</span><span class="nx">CONTEXT3D_CREATE</span><span class="p">,</span> <span class="nx">onContext3DCreated</span><span class="p">)</span><span class="o">;</span>
				<span class="nx">_stage3d</span><span class="p">.</span><span class="nx">requestContext3D</span><span class="p">(</span><span class="nx">Context3DRenderMode</span><span class="p">.</span><span class="nx">AUTO</span><span class="p">,</span> <span class="nx">Context3DProfile</span><span class="p">.</span><span class="nx">STANDARD</span><span class="p">)</span><span class="o">;</span>
			<span class="p">}</span>
		<span class="p">}</span>

		<span class="kr">private</span> <span class="kd">function</span> <span class="nx">onContext3DCreated</span><span class="p">(</span><span class="nx">event</span><span class="o">:</span><span class="nx">Event</span><span class="p">)</span><span class="o">:</span><span class="nb">void</span>
		<span class="p">{</span>
			<span class="nx">initContext3D</span><span class="p">()</span><span class="o">;</span>
			<span class="nx">initBuffer</span><span class="p">()</span><span class="o">;</span>
			<span class="nx">initProgram</span><span class="p">()</span><span class="o">;</span>

			<span class="nx">addEventListener</span><span class="p">(</span><span class="nx">Event</span><span class="p">.</span><span class="nx">ENTER_FRAME</span><span class="p">,</span> <span class="nx">render</span><span class="p">)</span><span class="o">;</span>
		<span class="p">}</span>

		<span class="kr">private</span> <span class="kd">function</span> <span class="nx">render</span><span class="p">(</span><span class="nx">event</span><span class="o">:</span><span class="nx">Event</span><span class="p">)</span><span class="o">:</span><span class="nb">void</span>
		<span class="p">{</span>
			<span class="nx">_context3d</span><span class="p">.</span><span class="nx">clear</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span><span class="o">;</span>
			<span class="nx">_context3d</span><span class="p">.</span><span class="nx">setVertexBufferAt</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">_vertexBuffer</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span>
				<span class="nx">Context3DVertexBufferFormat</span><span class="p">.</span><span class="nx">FLOAT_3</span><span class="p">)</span><span class="o">;</span>
			<span class="nx">_context3d</span><span class="p">.</span><span class="nx">setVertexBufferAt</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="nx">_vertexBuffer</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span>
				<span class="nx">Context3DVertexBufferFormat</span><span class="p">.</span><span class="nx">FLOAT_3</span><span class="p">)</span><span class="o">;</span>
			<span class="nx">_context3d</span><span class="p">.</span><span class="nx">setProgram</span><span class="p">(</span><span class="nx">_program3d</span><span class="p">)</span><span class="o">;</span>
			<span class="nx">_context3d</span><span class="p">.</span><span class="nx">drawTriangles</span><span class="p">(</span><span class="nx">_indexBuffer</span><span class="p">)</span><span class="o">;</span>
			<span class="nx">_context3d</span><span class="p">.</span><span class="nx">present</span><span class="p">()</span><span class="o">;</span>
		<span class="p">}</span>

		<span class="kr">private</span> <span class="kd">function</span> <span class="nx">onCreateContext3DError</span><span class="p">(</span><span class="nx">event</span><span class="o">:</span><span class="nx">ErrorEvent</span><span class="p">)</span><span class="o">:</span><span class="nb">void</span>
		<span class="p">{</span>
			<span class="kr">trace</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">text</span><span class="p">)</span><span class="o">;</span>
		<span class="p">}</span>

		<span class="kr">private</span> <span class="kd">function</span> <span class="nx">initContext3D</span><span class="p">()</span><span class="o">:</span><span class="nb">void</span>
		<span class="p">{</span>
			<span class="nx">_context3d</span> <span class="o">=</span> <span class="nx">_stage3d</span><span class="p">.</span><span class="nx">context3D</span><span class="o">;</span>
			<span class="nx">_stage3d</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="mi">50</span><span class="o">;</span>
			<span class="nx">_stage3d</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="mi">50</span><span class="o">;</span>
			<span class="nx">_context3d</span><span class="p">.</span><span class="nx">configureBackBuffer</span><span class="p">(</span><span class="mi">700</span><span class="p">,</span> <span class="mi">500</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span><span class="o">;</span>
		<span class="p">}</span>

		<span class="kr">private</span> <span class="kd">function</span> <span class="nx">initBuffer</span><span class="p">()</span><span class="o">:</span><span class="nb">void</span>
		<span class="p">{</span>
			<span class="kd">var</span> <span class="nx">vertexData</span><span class="o">:</span><span class="nx">Vector</span><span class="p">.</span><span class="o">&lt;</span><span class="nx">Number</span><span class="o">&gt;</span> <span class="o">=</span> <span class="nx">Vector</span><span class="p">.</span><span class="o">&lt;</span><span class="nx">Number</span><span class="o">&gt;</span><span class="p">(</span>
				<span class="p">[</span>
				<span class="c1">// x, y, z, r, g, b</span>
					<span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span>
					<span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span>
					<span class="mi">1</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span>
				<span class="p">])</span><span class="o">;</span>
			<span class="kd">var</span> <span class="nx">indexData</span><span class="o">:</span><span class="nx">Vector</span><span class="p">.</span><span class="o">&lt;</span><span class="nx">uint</span><span class="o">&gt;</span> <span class="o">=</span> <span class="nx">Vector</span><span class="p">.</span><span class="o">&lt;</span><span class="nx">uint</span><span class="o">&gt;</span><span class="p">(</span>
				<span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">])</span><span class="o">;</span>

			<span class="nx">_vertexBuffer</span> <span class="o">=</span> <span class="nx">_context3d</span><span class="p">.</span><span class="nx">createVertexBuffer</span><span class="p">(</span><span class="nx">vertexData</span><span class="p">.</span><span class="nx">length</span><span class="o">/</span><span class="mi">6</span><span class="p">,</span> <span class="mi">6</span><span class="p">)</span><span class="o">;</span>
			<span class="nx">_vertexBuffer</span><span class="p">.</span><span class="nx">uploadFromVector</span><span class="p">(</span><span class="nx">vertexData</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">vertexData</span><span class="p">.</span><span class="nx">length</span><span class="o">/</span><span class="mi">6</span><span class="p">)</span><span class="o">;</span>

			<span class="nx">_indexBuffer</span> <span class="o">=</span> <span class="nx">_context3d</span><span class="p">.</span><span class="nx">createIndexBuffer</span><span class="p">(</span><span class="nx">indexData</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="o">;</span>
			<span class="nx">_indexBuffer</span><span class="p">.</span><span class="nx">uploadFromVector</span><span class="p">(</span><span class="nx">indexData</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">3</span><span class="p">)</span><span class="o">;</span>
		<span class="p">}</span>

		<span class="kr">private</span> <span class="kd">function</span> <span class="nx">initProgram</span><span class="p">()</span><span class="o">:</span><span class="nb">void</span>
		<span class="p">{</span>
			<span class="kd">var</span> <span class="nx">vertexSrc</span><span class="o">:</span><span class="nx">String</span> <span class="o">=</span> <span class="s2">"mov op, va0\n"</span> <span class="o">+</span>
				<span class="s2">"mov v0, va1\n"</span><span class="o">;</span>
			<span class="kd">var</span> <span class="nx">fragmentsrc</span><span class="o">:</span><span class="nx">String</span> <span class="o">=</span> <span class="s2">"mov oc, v0\n"</span><span class="o">;</span>
			<span class="kd">var</span> <span class="nx">shaderAssembler</span><span class="o">:</span><span class="nx">AGALMiniAssembler</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AGALMiniAssembler</span><span class="p">()</span><span class="o">;</span>
			<span class="nx">_program3d</span> <span class="o">=</span> <span class="nx">shaderAssembler</span><span class="p">.</span><span class="nx">assemble2</span><span class="p">(</span><span class="nx">_context3d</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">vertexSrc</span><span class="p">,</span> <span class="nx">fragmentsrc</span><span class="p">)</span><span class="o">;</span>
		<span class="p">}</span>

	<span class="p">}</span>
<span class="p">}</span></code></pre></figure>


***
>原创博文,转载请注明  
>作者:vanCopper  
>Blog: http://blog.as3er.com http://blog.copper3d.org


扫码分享该文