Flash Papervision3D中3D Web应用程序设计

Flash Papervision3D中3D Web应用程序设计
李卫;袁铭
【摘要】为了能将日益应用广泛的Papervision3D、能在Flash Player中播放的目的,采用较为新颖的3D引擎方法,做了三维到二维的转换、Flint粒子系统实验,实现了平滑拉近物体从远处拉近及喷泉的效果.通用开源Flash 3D渲染引擎中Papervision3D是基于ActionScript的开源项目,而Flash在3D领域的应用相对贫乏,在Flash Player中播放,则具备体积小、与用户交互能力强、效果逼真的3D Web应用程序特点.%In order to enable the widely popular Papervision3D to play in the Flash player, this paper adopts a relatively new method of 3D engine, makes experiments of transformation from 3D to 2D and of the Flint particle system, realizes the effects of pulling objects from far to near smoothly and of fountain. Papervision3D is an open-source project based on ActionS-cript in general open-source rendering engine flash 3D, while the application of flash in 3D field is relatively poor. Playing it in the Flash Player has the characteristics of small size, strong ability to interact with users and the realistic 3D Web application.
【期刊名称】《现代电子技术》
【年(卷),期】2012(035)021
【总页数】4页(P89-92)
【关键词】Flash 3D;Papervision3D;3D引擎方法;开源项目
【作者】李卫;袁铭
【作者单位】中国石油川庆钻探长庆钻井总公司,陕西西安710021;中国石油川庆
钻探长庆钻井总公司,陕西西安710021
【正文语种】中文
【中图分类】TN711-34
0 引言
在Flash中实现3D的效果有很多种方法，一些传统的完成Flash三维显示的方法是通过光影效果、遮罩和使用Actionscript。

光影效果比较简单，主要是利用明暗对比来达到一种视觉欺骗，大多用在绘制静态场景或物体上。

遮罩法是指在Flash 中，遮罩层的作用就是一扇镂空的窗户，在该层中画出图形后，当它在其他层上移过时，只有遮罩层上面有图形的区域才能看到后面层中的图形，从而产生一些特殊的效果[1]。

关于使用Actionscript，此法原理是将三维坐标转换为二维坐标。

首
先将三维坐标值保存在数组里，根据一定规则对这些数组进行计算转换为二维坐标，并对这些二维坐标渲染，以实现模拟三维的效果。

面对这些老牌的方法，采取较为新颖的3D引擎方法，运用和以往不同的手法，创建出美妙的视觉感受。

在众多的3D引擎中，选择了较为成熟的PV3D引擎。

通过PV3D引擎，实现了3D场景中两个玩家交互，通过相机的平滑拉近实现了物体从远处拉近的效果，除此之外还通过Flint粒子系统实现了喷泉效果。

1 3D实现原理的介绍
1.1 模型和贴图
将三个点连接成一个三角形，很多三角形组成一个模型。

贴图就是模型的每个点(x,y,z)对应的一个平面的(u,v)，u,v也就是平面位图的x,y。

Flash 3D里面的贴图就是根据每个三角形的不同斜度，和每个点对应的UV计算
出beginBitmapFill的第二个矩阵参数(matrix)用位图填充三角形。

1.2 运动
所有以为在动的点/模型其实都没有动(相对坐标系)，运动的只是坐标系而已。

移动，旋转，放大，透视全是同一个原理，不过是在移动，旋转，放大，透视这些点/模型所在的坐标系而已[2]。

所谓摄像机的各种运动根本就是浮云。

摄像机绕y顺时针拍摄，只不过是模型的坐标系在绕y逆时针转。

所有点的任何变动都是一个点(x,y,z)乘以一个矩阵得到。

一个东西要动，不管是二维还是三维，就必须得要它的每个点都乘以某个矩阵。

1.3 “投影”在屏幕上
虽说是“三维”，但实际上还是从二维平面的屏幕上观看的。

所以必须要把三维的点(x,y,z)，变成只有(x,y)的点显示在平面的电脑屏幕上。

形象一点可以说三维点的显示就是这个点‘投影’在平面的画布上。

通过“透视投影”，其算法是用x，y除以某个和z有关的值w来得到一个近大远小的透视后的(x,y)，这才是平常看到最正常近大远小的三维图像。

2 PV3D引擎的介绍
PV3D(Papervision3D)是一个很著名的Flash 3D免费开源引擎，是一个基于ActionScript的开源项目，主要由巴西人Carlos开发出来，目的在于实现更加炫丽美观、功能强大的Flash 3D Web应用程序。

Papervision3D不是一个软件程序，它基本上是一个ActionScript类库。

3D场景里活动的元素有以下几种[3]：(1) 场景Scene
Scene是在3D空间由3D对象组成的一个整体。

就如Flash里有3 个轴的舞台(stage)——x,y,z。

每个可视对象都可以添加到场景。

如不添加到场景中就不会在出现在屏幕上。

(2) 摄影机Camera
可以想象成一个真实的相机,它在3D空间中不断地记录场景的活动。

摄影机确定了查看场景的点。

因为3D空间的相机不是可视对象,它不是场景的组成部分不必添加它。

摄影机可以像真实的相机一样缩放和聚焦。

3D空间的相机可以做更多的事。

如,在3D中对象距离相机过近或过远时将剔除此对象防止它被渲染。

相机可以忽略某些在不可见区域的对象。

这些都是出于性能考虑的。

对象距离太远或处于相机后面,不需来记录,这时会节省很多计算的资源。

(3) 观察口Viewport
观察口是一个舞台上的Sprite容器,输出相机记录下来的对象。

对象介绍中,观察口好比相机的镜头。

镜头是放在3D场景上面的窗口,可以缩小这个窗口则可以只看到3D场景的一小部分,放大一些就看的多一些。

观察口如现实中真实窗口一样,窗口越大看到的外面世界越大,它影响到究竟可以看到多少场景。

图1很好地说明了观察口如何影响人们所看到的物体。

图1中包含了一个大的观察口,右侧是一个小而宽的观察口。

黑边框画出了观察口区域。

图1 观察口示意图
(4) 3D对象
在3D空间中的图形被称为一个3D对象,在Papervision3D中叫DisplayObject3D。

可以将其想象成一个更高级的可视化对象如sprite和movieclip。

不同的是DisplayObject3D有第3个轴,可以让其绕3轴进行旋转。

(5) 材质Material
材质是附着在对象表面上的结构。

当对象没有附着材质时,它是不可见的。

可以使用很多材质。

如一个简单的材质:颜色;高级的材质可能是:流(Live Stream)。

(6) 渲染引擎Render engine
渲染引擎像一个滚动的相机。

只要渲染引擎开始工作,它会输出相机记录下来的信息给观察口。

当停止渲染引擎时观察口不会有任何新的信息输出仅仅会看到最后的
那张图像。

渲染是计算机中最繁重的任务,它需要重复计算场景内部的对象并输出
到观察口去[4]。

(7) 左手定则笛卡尔坐标系
Flash,Papervision3D都使用笛卡尔坐标系。

在Flash中,一个规则的可视化对象可以通过设置x,y值改变其在舞台的位置。

对象依靠x,y的值与舞台左上角的关系来确定位置。

x值越大对象越靠右,y值增大对象便向下移动[5]。

Papervision3D里面的坐标系工作一致,只有2点不同之处：
① Flash使用了笛卡尔坐标系的2个轴,而Papervision3D使用了3个轴。

② Papervision3D里的y轴与Flash里面的y轴相反。

在Papervision3D中,不但要设置可视化对象的x,y轴,还要设置其额外的轴,为了确定对象的深度,第三轴称为z轴。

在Flash中,依靠左上角的关系来摆放对象,这点是(0,0),称为中心点或原点。

可想而知,Papervision3D中的原点是(0,0,0)[6]。

图2说明了Papervision3D 坐标系里的y轴情况。

图中(+,-)的标志说明了坐标值相对于原点是增加还是减少。

注意y轴与Flash 2D坐标系是相反的。

若准备将对象放置到屏幕的下方,需要给y轴更大的值。

这是2D坐标的工作情况。

3 在3D场景中的用户交互
为了在Flash 3D场景中实现两个用户的交互，综合了各种方法，最终选择使用Socket技术来实现交互操作。

在AS 3.0之前，并不支持真正意义的Socket通信，而是支持XMLSocket通信。

XMLSocket只能以XML格式传递数据，而Socket
支持二进制通信[7]。

(1) 建立用户和数据路的之间的通信
图2 Papervision3D坐标系里y轴情况
首先建立Socket对象：
var socket:Socket=new Socket();
然后调用connect()方法连接服务器。

Socket.connect(″ip″,port);
注：服务器地址为ip，端口号为port
完成连接后，接下来要获取服务器端的返回信息。

Socket对象利用事件机制来处
理服务器端的信息，只要给Socket对象添加相应的事件监听函数，就可以捕捉到服务器端的信息。

Socket对象的事件主要有：
① Event.LOSE:连接中断事件。

② Event.CONNECT:连接状态事件，表示已经成功连接服务器。

③ IOErrorEvent.IO_ERROR:信息传递错误事件，一般是由服务器地址错误引起。

④ SecurityErrorEvent.SECURITY_ERROR:安全错误事件，跟Flash安全机制有关。

⑤ ProgressEvent.SOCKET_DATA:服务器信息事件，当收到服务器的新信息的时候触发。

(2) 用户向服务器发送位置信息
当通信建立完成后，玩家之间就要进行通信，将自己的坐标发送给对方。

向服务器发送信息，使用writeUTFBytes()方法。

writeUTFBytes()方法向输出缓存写入UTF8格式的字符，其格式如下：
writeUTFBytes(value:String);
通过Flash()方法将Socket输出缓存中的信息发给服务器。

服务器收到信息后，
将信息转发给对方，从而完成了信息的通信。

整个过程中，只要服务器有数据发送过来，SOCKET_DATA事件就会被触发。

最后，调用close()方法，客户端主动断开与服务器的连接，对话结束。

4 Flash引入3D模型的实现
PV3D允许导入几种在外部程序中创建的3D模型，某些类型可以支持动画,许多外
部软件都支持PV3D模型的输出。

3D MAX是一个应用非常广泛的建模和动画生成软件，并且他可以导出两个
PV3D可以使用的格式。

后缀为DAE的格式，这是一种先进的开源格式，一开始
便被PV3D所支持，支持动画，实际上它是一种简单的XML文件[8]。

实现如下：
(1) 使用uvmap贴图：把所有的材质定义到一张图像上。

(2) 烘焙纹理：将高光、阴影、折射、反射以及整个3D场景整合为一张图片。

(3) 模型的大小和位置：将物体放在整个坐标的0点位置，这样可以在Flash场景中比较容易地找到这个3D物体。

(4) 应尽量减少模型的多边形：PV3D是一种非常新潮的Flash 3D技术，它以相
对不可思议的性能运行在Flash player上面。

然而PV3D只是利用了整个电脑硬
件资源的一小部分，但即使拥有全部的硬件资源，程序也存在着一个多边形数目计算限制的问题，所以请尽可能的减少模型的多边形数量[9]。

(5) 优化材质：不要选择过大的图像，贴图大小和程序显示大小一致即可，这将带来两方面的好处，一方面下载速度更快，另一方面运行更加的流畅。

(6) 导出模型：将做好的模型导出DAE格式。

(7) 将模型导入Flash:
model=new DAE();
model.addEventListener(FileLoadEvent.LOAD_COMPLETE,modelLoaded); DAE(model).load(″模型,DAE″);
因为模型在PV3D中被定于为DisplayObject3D类，因此需要把它转换为DAE
格式才能使用它的某些方法，比如load()方法。

在这里还定义了一个事件侦听器，以侦听模型被装载完成事件。

一旦模型被装载完成，modelLoaded()方法便被触发，当模型装载完成后再把它加入到场景中。

下面是modelLoaded()方法的代码：
scene.addChild(model);
5 场景中粒子系统的实现
粒子是2D图形，它们相对于3D坐标系定位，但不使用透视投影，粒子始终面对摄像机。

另一个粒子的特点是，它们是轻量级的物体。

由于3D应用程序性能受三角形数很大影响，因此粒子的轻量使得它们能成为很好的工作伙伴[10]。

这里使用一个开源类库Flint来实现的粒子系统。

(1) 一个发射器(An emitter)——创建粒子;
(2) 一个计数器(A counter)——定义粒子数;
(3) 一个区域(A zone)——定义3D空间里粒子射击到的地方;
(4) 初始化器(Initializers)——在初始化时一次性设置粒子属性;
(5) 动作(Actions)——初始化后连续设置粒子属性;
(6) 一个渲染器(A renderer)——在屏幕上绘制粒子。

6 结语
通过上述方法和实验，实现了日益应用广泛的Papervision3D能在Flash Player 中顺畅播放，且具备体积小、与用户交互能力强、效果逼真的3D Web应用程序等特点，在技术上实现了一定的突破。

参考文献
[1]邱彦林.Flex第一步:基于ActionScript 3.0的Flex 2应用开发(附盘)[M].北京：清华大学出版社，2007.
[2][美]GASSNER David. Flex 3宝典[M].高伟,译.北京：人民邮电出版社,2009.
[3]刘明伟,任永攀,黄兴.Flash与后台[M].北京：清华大学出版社,2007.
[4]TONDEUR Paul, WINDER Jeff. Papervision3D essentials [M]. Birmingham: Packt Publishing Ltd., 2009.
[5][加]斯白.Flash游戏编程基础教程[M].北京：人民邮电出版社,2011.
[6]张亚东,张荟惠.Flash CS3二维动画设计与制作[M].北京：电子工业出版
社,2009.
[7]格里菲斯.实战Flash游戏开发[M].北京：人民邮电出版社,2011.
[8]邹静.玩转3D Web[M].北京：电子工业出版社,2011.
[9]张凡.3DS MAX+Photoshop游戏场景设计[M].北京：机械工业出版社,2009.
[10]肖伟.3DS MAX动画角色和场景设计[M].北京：清华大学出版社,2010.
[11]宋翔.基于Director的动画创作技术研究[J].现代电子技术，2011,34(8):108-110.
[12]朱安宏.基于OpenGL的3D天空仿真[J].现代电子技术，2007,30(24):82-84.。