当前位置:首页优秀论文 正文
基于Flash Papervision3d 的3DWeb应用程序
2011/6/14 16:24:33 点击: 15755

孙鹏程;君睿; 熊文成 ;樊欣

(中国石油大学 计通学院,青岛 266555;)

 

摘要:Flash3D是网页flash播放器播放实时三维画面/三维游戏的程序的总称。目前通用的开源flash3d渲染引擎有papervision3DAway3DSandyAlternative3D等。其中,Papervision3D是一个基于ActionScript的开源项目,目的在于实现更加炫丽美观、功能强大的Flash 3D Web应用程序。随着现在Web 2.0Web-Game及休闲类竞技网络游戏的发展,相信Papervision3D的应用将会越来越广泛。同时在Flash 大量应用的今天,Flash 3D领域的应用相对贫乏,但是如果能在Flash Player中播放,体积小,与用户交互能力强,效果逼真的3D web应用程序,无疑将给用户带来全新的体验。

关键词:flash 3Dpapervision3D

The 3Dweb Applications Based on Flash Papervision3D

 

SUN Peng-chengCao Jun-rui Xiong Wen-cheng ; Fan Xin

( College of Computer and Communication, China University of Petroleum, Qingdao 266555 )

 

AbstractFlash3D is a web flash player to play real-time three-dimensional images / three-dimensional game program in general.  Currently, we have open-source rendering engine flash3d papervision3D, Away3D, Sandy, Alternative3D and so on. Which, Papervision3D is an open source project based on ActionScript, the aim of achieving a more dazzling and beautiful, powerful Flash 3D Web applications. With the current Web 2. 0, Web-Game and the casual sports network game development, I believe that the application will be more widely Papervision3D. At the same time a large number of applications in today's Flash, Flash 3D field of application in the relatively poor, but if you play in Flash Player, small size, ability and user interaction, the effect realistic 3D web applications, all users will undoubtedly new experience..

Key wordsflash 3Dpapervision3D

 

1.引言

flash中实现3D的效果有很多种方法,一些传统的完成flash三维显示的方法是通过光影效果、遮罩和使用Actionscript。光影效果比较简单,主要是利用明暗对比来达到一种视觉欺骗,大多用在绘制静态场景或物体上。遮罩法是指,在Flash中,遮罩曾的作用就是一扇镂空的窗户,在该层中画出图形后,当它在其他层上移过时,只有遮罩层上面有图形的区域才能看到后面层中的图形,从而产生一些特殊的效果。关于使用Actionscript,此法原理是将三维坐标转换为二维坐标。首先将三维坐标值保存在数组里,根据一定规则对这些数组进行计算转换为二维坐标,并对这些二维坐标渲染,以实现模拟三维的效果。面对这些老牌的方法,我们采取了较为新颖的3d引擎方法,运用和以往不同的手法,创建出美妙的视觉感受。在众多的3d引擎中,我们选择了较为成熟的pv3d引擎。

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

 

2. 3D实现原理介绍

2.1模型和贴图:

将三个点连接成一个三角形,很多三角形组成一个模型。

贴图就是模型的每个点(x,y,z)对应的一个平面的(u,v)u,v也就是平面位图的x,y,只不过点用了x,y了,怕重复而已。

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

2.2 运动

   所有我们以为在动的点/模型其实都没有动(相对坐标系),运动的只是坐标系而已。移动,旋转,放大,透视全是同一个原理,不过是在移动,旋转,放大,透视这些点/模型所在的坐标系而已。

     所谓摄像机的各种运动根本就是浮云。摄像机绕Y顺时针拍摄,只不过是模型的坐标系在绕Y逆时针转。所有点的任何变动都是一个点(x,y,z)乘以一个矩阵得到。

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

2.3‘投影’在屏幕上:

虽说是‘三维’,但实际上我们还是从二维平面的屏幕上观看的。所以我们必须要把三维的点(x,y,z),变成只有(x,y)的点显示在平面的电脑屏幕上。形象一点可以说三维点的显示就是这个点‘投影’在平面的画布上。

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

 

3. PV3D引擎的介绍

PV3DPaperVision3D)是一个很著名的Flash 3D免费开源引擎,是一个基于ActionScript的开源项目,主要由巴西人Carlos开发出来,目的在于实现更加炫丽美观、功能强大的Flash 3D Web应用程序。Papervision3D不是一个软件程序——它基本上是一个ActionScript类库。3D 场景里活动的元素有以下几种。

(1)    场景Scene

Scene 是在3d 空间由3d 对象组成的一个整体。就如flash 里有3 个轴的舞台(stage)-x,y,z。每个可视对象都可以添加到场景。如不添加到场景中就不会在出现在屏幕上。

(2)    摄影机Camera

可以想象成一个真实的相机,它在3d 空间中不断的记录场景的活动。摄影机确定了查看场景的点。因为3d 空间的相机不是可视对象,它不是场景的组成部分不必添加它。摄影机可以像真实的相机一样缩放和聚焦。3d 空间的相机可以做更多的事。如,3d 中对象距离相机过近或过远时将剔除此对象防止它被渲染。相机可以忽略某些在不可见区域的对象。这些都是出于性能考虑的。对象距离太远或处于相机后面,不需来记录,这时会节省很多计算的资源。

(3)    观察口Viewport

观察口是一个舞台上的sprite 容器,输出相机记录下来的对象。对象介绍中,观察口好比相机的镜头。镜头是我们放在3d 场景上面的窗口。我们可以缩小这个窗口则可以只看到3d 场景的一小部分,放大一些就看的多一些。观察口如现实中真实窗口一样—窗口越大看到的外面世界越大,它影响到我们究竟可以看到多少场景。下面的图解包含了一个大的观察口,右侧是一个小而宽的观察口。黑边框画出了观察口区域。

下侧的图很好的说明了观察口如何影响我们所看到的物体。

(4)    3D 对象   

3d 空间中的图形被称为一个3d 对象,Papervision3D 中叫DisplayObject3D。可以将其想

象成一个更高级的可视化对象如sprite movieclip。不同的是 DisplayObject3D 有第三个轴,

我们可以让其绕3 轴进行旋转。

(5)    材质Material

材质是附着在对象表面上的结构。当对象没有附着材质时,它是不可见的。可以使用很多材质。如一个简单的材质:颜色;高级的材质可能是:(live stream)

(6)    渲染引擎Render engine

渲染引擎像一个滚动的相机。只要渲染引擎开始工作,它会输出相机记录下来的信息给观察口。当停止渲染引擎时观察口不会有任何新的信息输出仅仅会看到最后的那张图像。渲染是计算机中最繁重的任务,它需要重复计算你场景内部的对象并输出他们到观察口去。

(7)    左手定则笛卡尔坐标系

Flash,Papervision3D,都使用笛卡尔坐标系。在Flash ,一个规则的可视化对象可以通过设置x,y 值改变其在舞台的位置。对象依靠x,y 的值与舞台左上角的关系来确定位置。x 值越大对象越靠右,y 值增大对象便向下移动。

    Papervision3D 里面的坐标系工作一致,只有2 点不同之处:

① Flash 使用了笛卡尔坐标系的2 个轴,Papervision3D 使用了3 个轴。

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

    Papervision3D ,我们不但要设置可视化对象的x,y ,还要设置其额外的轴,为了确定对象的深度。第三轴称为z 轴。在Flash ,依靠左上角的关系来摆放对象,这点是(0,0)。称为中心点或原点。可想而知,Papervision3D 中的原点是(0,0,0)

 

4.3d场景中的用户交互

为了在Flash3D场景中实现两个用户的交互,我们综合了各种方法最终选择了使用Socket技术来实现我们的交互操作。在AS30之前,并不支持真正意义的Socket通信,而是支持XMLSocket通信。XMLSocket只能以XML格式 格式传递数据,而Socket支持二进制通信。

1)建立用户和数据路的之间的通信 

  首先建立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格式的字符,其格式如下:

writeUTFBytesvalue:String;

通过flush()方法将socket输出缓存中的信息发给服务器。服务器收到信息后,将信息转发给对方,从而完成了信息的通信。整个过程中,只要服务器有数据发送过来,SOCKET_DATA事件就会被触发。最后,调用close()方法,客户端主动断开与服务器的连接,对话结束。

 

5.Flash引入3D模型的实现

    Pv3d 允许导入几种在外部程序中创建的3d 模型,某些类型可以支持

动画,许多外部软件都支持pv3d 模型的输出。

    3dmax 是一个应用非常广泛的建模和动画生成软件, 并且他可以导出两个pv3d 可以使用的格式。后缀为dae 的格式,这

Copyright 2007-2014 济南计算机学会.All Rights Reserved 鲁ICP备09070135号
济南计算机学会维护管理
联系电话:0531-88391234