基于flash和Pano2VR虚拟校园的设计与实现

摘要：随着网络与计算机技术的高速发展，虚拟技术大量应用各个领域。其中全景图技术的虚拟现实技术应用最为广泛。文章以某高校教改课题为研究对象，提出基于flash和pano2vr实现该学院的虚拟校园系统。分别在其系统优势、关键技术、系统模块的设计以及具体的实现过程进行讨论。在UI界面的设计、全景图的拍摄、全景图拼贴制作、Pano2VR 的360°全景图的实现以及最后基于flash的进行详细的阐述。并对今后未来的二次开发提出了展望。

关键词：flash；Pano2VR；全景图；虚拟校园

中图分类号： S611 文献标识码： A 文章编号：

1.前沿

随着网络与计算机技术的高速发展，虚拟技术大量应用于旅游、教育、军事等各个领域。其中360°全景图技术是现今虚拟现实技术中比较流行的一种，也可称为360°全景虚拟现实。全景图技术的虚拟现实有着相当广泛的应用，包括：地产、城市景观、旅游、商业展示、等。将这一技术在用于学校宣传介绍的全景虚拟校园，在各大高校中广泛使用，其中辛辛那提大学、西北农林科技大学、广东工业大学等国内外大学都采用全景技术实现虚拟校园。它即可以对校园环境随时随地进行展示，又是学校的实力一种体现，更能吸引更多的考生报考学校。文章以天津轻工职业技术学院的教改立项为研究对象，基于flash结合全景技术，实现天津轻工职业技术学院虚拟校园。

2.基于flash的虚拟校园的系统优势

2.1 与全三维的虚拟校园相比其制作成相对低廉，全三维的虚拟校园需要投入大量的硬件软件以及人力物力，其中一套虚拟现实软件就价格不菲，加之大量的建模工作需要大量的时间和人力。相比之下仅仅需要照相机结合flash就可以完成全景虚拟校园系统，在成本上就相当划算。

2.2 360°全景虚拟现实虽然在效果上无法和全三维的现实相比，但是由于全部采用实景拍摄的技术，它完全是真实环境，在某种程度上讲其逼真性更强。

2.3 在交互性上，360°全景虚拟现实有一定的局限性，它只能满足于用鼠标拖动来模拟摄像机的摇镜头的浏览的功能，为此在课题使用flash来提高其交互性，以弥补全景虚拟现中有限交互功能。

2.4 浏览速度的优势是该系统的最大优势，先进全三维的虚拟校园最大的略势就是其加载速度慢的问题，虽然更重三维虚拟引擎不断提高和改善，但是往往还是需要等待较长的时间加载。而基于flash的全景虚拟校园恰恰在这一点上市最大优势。

2.5除了全景速度加载速度快，其跨平台的浏览也是远胜于全三维的虚拟校园，全三维的虚拟校园浏览时候还要下载其虚拟引擎的插件，而且不能运行在手机和平板等移动媒体上。而现今大部分浏览器以及基于Android系统下移动媒体（手机和平板电脑）都支持flash播放，这样可以实现在多种平台以及移动媒体中均可浏览该虚拟校园。

3. 关键技术

基于flash的全景虚拟校园的实现，需要Flash、Stitcher、Pano2VR、Photoshop和全景拍摄等技术支持。

Flash被大量应用于互联网网页的矢量动画设计。Flash可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序，最后输出swf文件。

Autodesk Stitcher是 Autodesk 推出的一款专业的全景图制作软件。该软件可以精确的测量到每一个像素，并对每张照片的边缘自动地调整颜色，使全景的影像提供一致的色调，比起Photoshop的 photmerge技术来，更加简洁方便，主要应用于虚拟现实的全景图制作。它可以轻松将几张照片缝合360°度全景风景，适合应用于虚拟现实浏览。

Pano2VR 是一个全景图像转换制作软件。Pano2VR可以输出支持全景图QuickTime格式、以及支Flash8的swf格式，该软件的更大的特点是可以输出全新的平台HTML5/CSS3格式这样输出iPad，iPhone以及其他移动设备，这是其他软件所不具备的，也是选用该软件的原因。

Photoshop众所周知该软件是Adobe公司旗下招牌软件，该软件具有强大图形图像的编辑能力，图像的颜色调整功能，并可以支持各种图像格式的处理。在这里主要用Photoshop进行调色与图像的修饰。

4. 功能模块设计

基于flash的全景虚拟校园界面主页是俯视的校园沙盘的形式展示整个校园全貌，系统通过校园图片的全景中闪烁的热区，点击进入各个系部或部门浏览其360°全景环境，界面主页还提供其他按钮进行交互的操作，包括：在线咨询、校园主页、入学指南、系统帮助等几个功能模块。

5. 系统实现

系统UI界面的设计

系统界面设计全部由使用矢量动画软件用Flash来实现，如果使用Illustrator来制作，还要导入到flash， 如果使用flash来制作，不仅可以达到与Illustrator同样的效果，而且方便今后的交互操作。再设计上，本着干净整洁、条理清楚、浏览速度快作为出发点。界面分为上中下三个部分，上面主要有学院标志logo、学院的全称以及功能模块菜单栏，中间的部分是学校的鸟瞰的学院全景图片，下面的部分是学院的联系方式以及保护个人信息声明。在整个界面色调设计上，采用的蓝色，因为学院的标志的标准色是蓝色。

全景图的拍摄

虚拟校园的中关键就是校园的360°全景浏览，拍摄全景图时，如果使用普通标配APS画幅单反相机，其视角大多小于360度，因此必须拍摄多张照片，在拍摄时候必需准确可靠定位在一个中心点进行拍摄，最后拍摄多张照片通过拼接软件生成全景图。拍摄全景最好快捷的方法：选择Nikon D700或者Canon 5DMark II这类型的全画幅相机，配合选用8MM的鱼眼镜头进行拍摄，只需要水平拍摄2-3张圆形鱼眼图即可，最后通过软件直接拼合成全景图。课题限于设备的限制，只能选用Nikon D7000配合10MM的鱼眼镜头进行拍摄，因此只能在要拍实景选择一个比较好的中心地点，然后对实景四个方向进行实景拍摄并加拍太空和地面，一共拍摄8-12照片。拍摄时要注意在人流较少的时候进行拍摄，以方便后期进行全景图的拼合，拍摄将图片存储jpeg格式的文件。把素材拍摄好之后还有需要简单的处理，特别注意的就是拍摄的地面的图片中会出现三脚架，这张图片使用橡皮图章工具把三脚架修补上，最后连同其他图片导入Autodesk Stitcher进行全景图的拼接。

Autodesk Stitcher全景图拼接

将拍摄好的图片导入Autodesk Stitcher中，点击照片拼合（stitch shots）命令，软件会自动将照片进行缝合为一张全景图片，缝合的图片在连接处依然存在问题，使用自动排列（auto- align）命令使图片无缝拼合。处理照片之间的色差，使用均衡化处理命令（equalize）全景照片自动进行均衡的处理，使得照片色调统一。最后进入渲染菜单进行渲染，选择高像素大图导出，并将其到处输入到Pano2VR中。

Pano2VR全景虚拟浏览

全景虚拟浏览原来以java格式和QuickTime格式的展示方式，但是以上两种都需要安装播放插件，因此已经逐渐被FLASH播放方式所取代。Pano2VR就是一款支持输出FLASH全景的软件。只需要打开Pano2VR在输入工程文件中点选“选择输入”，导入事先在Autodesk Stitcher拼接的全景图。由于支持矩形球面投影、立方体面片等多达7种的输入类型，选择由软件自动判断即可。接下来设置显示的参数，设置场景的摄像机的平摇与仰俯参数、视图限制以及缩放程度，并在用户数据上添加相应的版权信息。在“交互热区”设置项点击进入交互热区对话框。勾选“开启”确定建立交互热区的图片文件，选择两种热区或热点其中一个即可，以热点为例，点击后在ID栏内设置热区名称。在URL栏输入链接目标地址，在目标栏输入链接打开时的目标页面，一个热区完毕，这样可以实现多个全景虚拟漫游场景之间的相互转换。热区设置方法大同小异了。全部设置好后，就可以输出了。输出方式包括FLASH格式、QuickTime格式、Html5，如果输出到ipad或iphone里面选择Html5格式，在这里选择FLASH格式，点击右边添加按钮，可对输出文件做相应的修改。在设定选项下修改图像质量、窗口的大小、播放帧数以及全景是否自动旋转等选项。下面进行播放器的控制按钮的皮肤的设置，点击调入编辑好的皮肤文件，最后选择.swf文件输出格式进行输出，该文件方便于在Flash里用JS调用来实现系统交互设计。

系统交互设计

整个虚拟校园界面设计后，下一步就是虚拟校园系统的交互设计。由于Pano2VR制作全景虚拟浏览只能完成有限交互，因此为使用flash在其他地方提高整个虚拟校园交互性。要实现的效果如下

校园的全貌交互模块集中与界面中间部分，即校园的全貌。这一功能需要三个部分来实现的。三个部分都使用按钮的脚本语言来实现，代码如下：

用户鼠标滑过建筑上面闪烁的热区会显示建筑物的名称（例如：艺术工程学院）；

on (rollOver){_root. Art._visible = true;_root. Arttext._visible = true;}

点击热区弹出360°全景浏览的对话框，对话框里面有不同场景缩略图。

on (release){_root. Dialog box._visible = true;}

用户点击缩略图在Flash中加载360°全景漫游浏览。

on (release) { loadMovie ("Art Panorama.swf",0) }

在线咨询、校园主页这两模块是用户通过点击直接弹出学校的在线咨询的网页和回到学校的主页。入学指南、系统帮助这两模块是用户通过点击直接弹出相关的视频进行介绍，在Flash里需要使用按钮命令加载网页链接和视频链接就可实现。

6. 结束语

以天津轻工职业技术学院教改课题为来源，利用Flash和Pano2VR创建一套浏览速度快，精度高、交互性强的虚拟校园系统，实现了校园的全景漫游浏览、在线咨询、入学指南、系统帮助等几个功能模块，最终web上在线浏览的虚拟校园系统。同时该虚拟校园的开发，为今后基于Android平台的移动虚拟校园系统的开发提供先决条件和技术支持。

参考文献：

1：宋正国、刁秀丽：基于Flash技术的虚拟校园设计与实现，《中小学电教》，2009年10期

2： 陈梅、王健：Flash环境下虚拟校园浏览系统的设计，《电子技术》，2009年05期

3：顾翔、王汝传：Internet上的虚拟现实建模语言―VRML，《电子工程师》，1999年06 期

4：刘晓波、张琴舜、张和林：一个基于MultiGen/Vega 的虚拟场景漫游系统，《计算机应用》，2002年06期