[转]Stage3D 翻译系列之六：一个真正的纯Stage3D应用（一）

前提

必备知识

熟悉Stage3D API，对其结构基本了解。对顶点和片段着色器，着色器语言基本了解。在阅读本文之前，强烈建议将本系列的前三篇教程完成（1、Stage3D如何工作 2、顶点和片段着色器 3、何为AGAL）

所需额外产品

Flex 4.5 SDK

Download

Flayer Player 11中的playerglobal.swc文件

Download

Flash Player 11

Download

用户级别

中级

所需软件

Flash Builder 4.5 (Download trial)

Flash Professional CS5.5(Download trial)

实例文件

hello_triangle_textured.zip

hello_triangle_colored.zip

在本章中，你将完成一个基于Stage3D API的ActionScript应用。首先你将了解如何搭建Stage3D开发环境。一旦示例工作搭建完成，你将了解如果用AS来初始化 Stage3D，如果创建和渲染由一个超级简单的3D场景，此场景中只包含一个带颜色的三角形。最后，你将一窥为3D图形应用纹理映射的过程。

搭建编译环境

当开始编写Stage3D应用时，我们首先要做的就是搭建编译环境。当然我们可以使用Flex SDK中命令从命令行编译Stage3D应用，但一般来说咱们使用一个比较方便IDE就好了，比如 Flash Builder 4.5。首先从下载和安装Flex SDK（4.5.0.20967或更高）开始，从本文开始部分的链接地址中下载。接下来，从链接中下载Flash Player 11版本的playerglobal.swc文件，并将其拷贝到你刚刚下载的Flex SDK的以下位置：

<Flex SDK root folder>\frameworks\libs\player\11.0

复制代码

注意：你需要手动创建名为11.0的文件夹，然后将SWC拷贝进去。如果需要的话，将文件命名为playerglobal.swc。SDK的下一个版本会默认包含playerglobal.swc，所以当SDK升级以后，这一步就不需要了。

以上做完之后，将最新的Flex 4.5 SDK加入到 Flash Builder 4.5编译环境中：选中Preferences > Flash Builder > Installed Flex SDKs，将Flex 4.5 SDK加入。

很显然，你还需要下载带有Stage3D特性的Flash Player 11。用本文最开始的前提部分链接下载吧。

既然你已经建立了带有playerglobal.swc的Flex SDK，并且将其加入了Flash Builder，现在让我们准备创建一个新的ActionScript工程吧！接下来，你还需要配置你的工程让其指向SWF版本13。打开工程属性，点击 ActionScript Compiler页签，在”Additional compiler arguments”输入框中加入“-swf-version=13”。然后在本页签中检查应用是否指向了Flash Player 版本 11。最后，为了让Flash Player能够使用3D硬件加速，你需要将WMODE属性设置为“direct”。在Flash
Builder中，打开index.template.html文件，找到params的位置，添加如下代码：

params.wmode = “direct”;

复制代码

以下截图显示了添加代码的位置：



图1：在index.template.html中设置wmode=”direct”。

以上设置只针对Flash Player中的ActionScript，在AIR应用中，你需要更改应用的描述符，并将renderMode修改为direct。

编译工程确保设置无误，此时应用应该只显示一个黑色的窗口。

初始化Stage3D

现在你已经将ActionScript应用创建了出来，接下来要做的第一件事就是初始化 Stage3D。

为了执行3D渲染，你需要一个Context3D类的实例，让其负责基本上所有的渲染行为。在构造函数中，加入一下代码：

public function HelloTriangleColored()
{
stage.stage3Ds[0].addEventListener( Event.CONTEXT3D_CREATE, initMolehill );
stage.stage3Ds[0].requestContext3D();
}

复制代码

以上代码用Stage3D API请求一个Context3D实例，并且注册了一个监听器。当Context3D创建完成后，会触发initMolehill

函数。

在initMolehill函数的开头，首先要用Context3D的configureBackBuffer 方法来配置Context3D，代码如下：

protected function initMolehill(e:Event):void
{
context3D = stage.stage3Ds[0].context3D;
context3D.configureBackBuffer(800, 600, 2, true);
…
}

复制代码

以上代码表示，场景渲染大小为800乘以600像素，最小等级抗锯齿（第三个参数），并且为渲染表面创建深度和模版缓冲（第四个参数）。

创建一个带颜色的三角形

在本节中，你将创建一些3D几何图形（将被渲染的3D对象），在本例中，我们来创建一个最简单的带颜色的三角形。为了完成以上任务，需要一个 Vertext Buffer，并且指定顶点的位置（x,y,z）及颜色（r,g,b）信息。每个顶点都有6个分量，将顶点数据定义成一个Vector，如下：

protected function initMolehill(e:Event):void
{
…
var vertices:Vector.<Number> = Vector.<Number>([
-0.3,-0.3,0, 1, 0, 0, // x, y, z, r, g, b
-0.3, 0.3, 0, 0, 1, 0,
0.3, 0.3, 0, 0, 0, 1]);
…
}

复制代码

然后，创建一个VertextBuffer3D实例，以便将Vertext Buffer上传至GPU。

protected var vertexbuffer:VertexBuffer3D;
…
protected function initMolehill(e:Event):void
{
…
// Create VertexBuffer3D. 3 vertices, of 6 Numbers each
vertexbuffer:VertexBuffer3D = context3D.createVertexBuffer(3, 6);
// Upload VertexBuffer3D to GPU. Offset 0, 3 vertices
vertexbuffer.uploadFromVector(vertices, 0, 3);
…
}

复制代码

我们还需要一个Index Buffer来定义三角形。在本例中，这个三角形分别由顶点0，1，2组成。Index Buffer也需要上传至GPU。用IndexBuffer3D类来实现：

protected var indexbuffer:IndexBuffer3D;
…
protected function initMolehill(e:Event):void
{
…
var indices:Vector.<uint> = Vector.<uint>([0, 1, 2]);
// Create IndexBuffer3D. Total of 3 indices. 1 triangle of 3 vertices
indexbuffer = context3D.createIndexBuffer(3);
// Upload IndexBuffer3D to GPU. Offset 0, count 3
indexbuffer.uploadFromVector (indices, 0, 3);
…
}

复制代码

以上代码定义了此图形。现在让我们来创建顶点和片段着色器吧。简单起见， 我们使用了本系列上一讲（什么是AGAL）中的着色器程序。顶点着色器只是根据传入的变换矩阵对顶点进行简单的变换，然后将顶点颜色信息向下传输给片段着色器。

m44 op, va0, vc0
mov v0, va1

复制代码

片段着色器计算插值颜色并其输出：

mov oc, v0

复制代码

你需要AGAL Mini Assembler将着色器源代码编译成目标代码，然后用Program3D API将着色器上传至GPU。

protected function initMolehill(e:Event):void
{
…
var vertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();
vertexShaderAssembler.assemble( Context3DProgramType.VERTEX,
“m44 op, va0, vc0\n” + // pos to clipspace
“mov v0, va1″ // copy color
);

var fragmentShaderAssembler : AGALMiniAssembler= new AGALMiniAssembler();
fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT,

“mov oc, v0 “
);

program = context3D.createProgram();
program.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode);
…
}

复制代码

渲染场景

接下来然我们来渲染3D场景吧。在本节中，我们将建立一个渲染的循环，建立一个onRender函数，当ENTER_FRAME事件发生时对其进行调用。

protected function onRender(e:Event):void
{
if ( !context3D )
return;
…
}

复制代码

在每次渲染之前，我们要调用Context3D::clear方法，将渲染颜色缓冲（渲染对象的表面颜色）清除，并替换成我们传入的背景色。用以下代码来穿入一个白色的背景：

protected function onRender(e:Event):void
{
…
context3D.clear ( 1, 1, 1, 1 );
…
}

复制代码

渲染的每一帧，我们都要启用带有着色器的Program3D，还有包含定点属性的VertexBuffer3D。我们还需要传入一个变换矩阵，此矩阵被顶点着色器使用。让我们传入一个旋转矩阵，以便使三角形每一帧都有不同的变化。

protected function onRender(e:Event):void
{
…
// vertex position to attribute register 0
context3D.setVertexBufferAt (0, vertexbuffer, 0, Context3DVertexBufferFormat.FLOAT_3);
// color to attribute register 1
context3D.setVertexBufferAt(1, vertexbuffer, 3, Context3DVertexBufferFormat.FLOAT_3);
// assign shader program
context3D.setProgram(program);

var m:Matrix3D = new Matrix3D();
m.appendRotation(getTimer()/40, Vector3D.Z_AXIS);
context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, m, true);
…
}

复制代码

当以上步骤设置完成后，就可以执行真正的渲染了。调用Context3D的drawTriangles()方法，将Index Buffer传入；这个操作会将三角形渲染到表面（颜色缓冲）。

最后，当一帧中的所有对象都渲染完成后（在这个例子中，只有一个），调用Context3D的present方法，告诉Stage3D应用已经将此帧渲染完成，可以将其呈现在屏幕上了。

protected function onRender(e:Event):void
{
…
context3D.drawTriangles(indexbuffer);

context3D.present();
}

复制代码

运行此工程，查看最终效果如下：



以下是完整代码：

翻译原文地址：http://uh.9ria.com/link.php?url=http://bbs.9ria.com%2Fviewthread.php%3Ftid%3D108015

本文固定链接: http://www.gisthink.com/blog/guoguogis/?p=338 | GUOGUOGIS