基于静态图像的360°全景漫游动画效果的实现

梁莉菁;廖德伟

【摘 要】随着科技的飞速发展,人们对图形图像所呈现的视觉效果提出了更高的要求,平面照片已经不能满足现代社会的差异化需求.全景漫游技术是模拟真实环境,使客户感受到全方位展示产品及空间特点的新技术.用户可通过键盘、鼠标或是触屏设备,控制观察全景的方向,仿佛置身于真实的环境当中,极大地增强了用户体验.本文以P学院校园漫游动画效果的实现方法为例,介绍基于静态图像的360°全景漫游动画的制作技术.

【期刊名称】《萍乡高等专科学校学报》 【年(卷),期】2013(030)006 【总页数】6页(P67-72)

【关键词】全景漫游;动作录制;图像合成 【作 者】梁莉菁;廖德伟

【作者单位】萍乡学院,江西萍乡337000;萍乡学院,江西萍乡337000 【正文语种】中 文 【中图分类】TP39 1 引言

新学期转眼即至，大学校园中迎来五湖四海的莘莘学子，为了让新生以最快的方法熟悉新环境，我们可以制作交互式的校园全景漫游动画，通过网络环境和触屏设备

展示校园风光，这种方式比传统的平面示意图更强的视觉冲击效果，而且可以广泛地应用到公园、展览馆等各种房产场馆及旅游实景的展示项目中。本文将以萍乡学院校园漫游动画效果的实现方法为例，介绍基于静态图像的360°全景漫游动画实现方法。 2 现状分析

虚拟现实（VirtualReality）技术是20世纪90年代以来兴起的一种新型信息技术。虚拟现实是将一组图片以特殊的手段制作成可操控巡游的三维物体或 360°全景影像的电脑多媒体技术。[1]目前虚拟漫游动画主要有两种类型，一种是二维的基于静态全景图像的360°漫游动画，另一种是三维的基于3D模型的虚拟漫游动画。两种类型动画的效果、用途及优势各有千秋，前者常采用实景照片，能很好地展示场景的真实环境，实现方法相对简单，而后者是模拟真实的三维环境，建模过程复杂，工作量大周期长，实现成本和技术门槛高。

制作基于静态图像的漫游动画的过程主要有两大步骤，第一步是拍摄照片素材合成全景图像；第二步是制作拥有交互功能的360°漫游动画。漫游动画的效果好坏与全景图像的品质有关，动画制作的难点主要是交互控制“皮肤”的设计与制作。 全景漫游动画可以使用 3Dvista publisher、Pano2VR等软件制作。值得称赞的是我国涌现出众多优秀的国产软件，如上海八倍公司出品的全景漫游者，杰图公司的漫游大师，北京中视典公司的VRP软件等，在虚拟现实技术漫游动画应用方面均有不俗的表现。 3 实现方法

步骤一：制作全景图像

（1）拍摄用于合成全景图像的照片素材

首先，我们要对校园内需制作动画的所有场景拍摄好相应的照片素材，一般每个场景拍摄8至12张较为合适，拍摄时的焦距、曝光补偿等参数要保持一致。拍摄全

景照片一般要用到专业摄影器材三脚架和云台，将三角架、相机和云台装配好，对好中节点，让云台按照事先设定好的角度间隔进行旋转，按不同角度水平环形拍摄一组照片。如果实在没有云台设备，那么在环形拍摄时要尽量注意相机的平稳及间隔角度尽可能均匀，相邻相片间要有约15%的重叠部分。 （2）处理照片素材

我们使用 Photoshop处理所有素材照片，为提高工作效率，必须用到

Photoshop的“动作”和“自动”功能。启动Photoshop，按下“ALT+F9”激活“动作”面板，单击面板下方的“创建新动作”按钮，输入新动作名称“缩图800*600”，进入“动作”录制状态，然后打开其中一张照片素材，执行菜单命令：“图像”è“图像大小”，选中“约束比例”复选框，将宽度设置为“800”左右，缩放方式下拉列表中选取“两次立方较税利（适用于缩小）”，单击“确定”，然后将处理后图片以原文件名原JPG格式保存在原目录下，按下“动作”面板下方的“停止播放/记录”按钮，结束录制。 图1 Photomerge合成全景图像

接下来将录制好的动作应用到所有的素材照片上。执行菜单命令：“文件”“自动”“批处理”打开“批处理”对话框，将“动作”下拉列表选择“缩图800*600”，单击“源文件夹”下方的“选择”按钮，选择素材照片所在目录，选中“覆盖动作中的‘打开’命令”及“包含所有子文件夹”复选框。再单击“目标”后的下拉列表选择“存储并关闭”选项，并选中下方的“覆盖动作中的存储为”复选框。单击“确定”关闭“批处理”对话框后，Photoshop会自动处理所选目录下的所有图片。 （3）合成全景图像

全景图的合成软件很多，我们仍使用Photoshop软件进行全景合成。将所有素材照片按场景分别放置在不同目录之下。执行菜单命令：“文件”“自

动”“Photomerge…”，打开“Photomerge”对话框，对话框左侧“版面”栏指合成全景时采取的光学模式，选择“自动”模式。单击右侧“浏览”按钮，在出现“打开”对话框中选择其中一个场景中的全部照片素材将其载入，然后单击右侧“确定”按钮，此时，Photoshop将自动进行全景图的合成操作。如图1所示： 接下来还要在Photoshop中对合成结果图像进行二次处理，一般先裁切至适当大小，再用仿制图章工具、修补工具、修复画笔等工具补白，最后为了保证处理后的最终全景图像左右两端必须保证无缝拼接，需使用矩形选择工具选择一半图像，按组合键【Ctrl+J】复制到新层，并将此半部分移到另一侧，同理下层朝反方向移动，一般中间会有明显接口，单击上半部图层，按下【Ctrl+E】向下合并，再次使用仿制图章等工具修复接口。修图操作过程如图2所示： 图2 全景图像的后期处理

同理，完成校园内所有需展示的场景的全景图，注意全景图的后期处理难度与全景图的品质及与拍摄的素材照片的质量有很大关系，因此拍摄素材照片最好使用专业的摄影设备。

步骤二：制作360°全景漫游动画 （1）像载入全景图像

我们将选用Pano2VR软件来实现全景漫游。启动Pano2VR 3.1.4，可直接将全景图像从目录中拖放到Pano2VR界面的“输入”区域中，也可以设置输入图像的展示类型，默认选项为“自动”。如图3所示： 图3 Pano2VR中载入全景图像 （2）设置初始画面

然后单击工作界面中“显示参数”区中的“修改”按钮，打开“全景显示参数”对话框，可以直接拖移鼠标或滚动鼠标滚轮，设置全景图像在动画播放窗口中显示的初始画面，调节左侧参数可限制视图摇移角度及缩放程度等。

（3）输入用户数据

单击“用户数据”区中的“修改”按钮，可以修改“用户数据”中的信息，如动画作品标题、作者、日期等，而且软件的最新版本Pano2VR 4.1.0在“用户数据”栏中还新增了全球定位的功能。另外用户数据中的信息在后面的“皮肤”设置中可以进行调用。 （4）定义交互热点

热点相当于两个全景图之间的超链接。点击“交互热区”，进入热点设置界面。[2]交互热点或热区以及后面将提到的“皮肤”功能使得漫游动画也拥有了类似网页“链接”技术，使客户在观赏动画作品同时可以操控动画作品。比如我们希望在学院大门放置一个热点，当鼠标移向此热点时，就显示“前往情系安源广场”文本，单击则进入相关场景。热点设置操作如图4所示： 图4 定义交互热点

热点在漫游动画中默认显示为红色圆点，鼠标移上则显示文本，文本框大小在输出动画参数对话框中设置，默认显示的圆点也可以由后面“皮肤”设置中的“皮肤ID”所代表的图形所替换。 （5）“音频/媒体”设置

Pano2VR 3.1.4版本中左侧最下方是“音频”设置区，在Pano2VR 4.1.0版中升级成了“媒体”设置区，我们在这儿可以添加音频或视频。Pano2VR的声音设置也非常神奇，声音可随画面的摇移角度变化，让你有置身于真实空间的感觉。本场景动画我们暂时不作音频和视频设置。 （6）输出动画 a.设定“参数”

单击软件界面右侧“输出”区域中“新输出格式”旁的下拉列表，选择“Flash”格式。然后单击右侧“增加”按钮，打开“Flash输出”对话框，首先设置第一个

选项卡“设定”中的相关参数，设置大小等参数，为后续缩略地图定位做准备。单击“皮肤”下拉列表选择其中一种皮肤样式“simple.ggsk”，然后单击“输出”后的“打开”按钮，确定输出的动画文件存储路径及名称，默认动画作品与Pano2VR工程源文件存储在同一目录下，最后单击“确定”按钮，就可以在工作目录下预览新生成的SWF漫游动画。关闭动画文件，单击上图Pano2VR工作界面右侧“输出”区“Flash”中的“参数”按钮，再次打开“Flash输出”对话框，继续设置相关参数。 b.“视觉效果”设置：

勾选“视觉效果”选项卡“过场效果”中的复选框开启穿越效果，选择一种过渡类型，修改过渡效果持续时间为0.5秒，这是设置整体动画作品中要用到的一个场景动画切换到另一个场景动画时的过场效果。 c.高级设置：

在“高级设置”选项卡中，设置“热点文本框”宽度为100px，高度自动适应文本内容。当鼠标移至热点或热区时，“热点文本框”中会显示热点或热区的标题参数中设置的文本内容。同时，设置动画作品在右键菜单中隐藏软件信息。 d.“多重分辨率渐进浏览”设置：

“多重分辨率渐进浏览”选项卡中勾选“开启”和“生成切片文件”复选框，可以自动生成外置全景图的多个切片文件，以适应在不同分辨率和不同网速环境下实现渐进下载的方式运行。 e.“HTML”设置：

①“添加图片”按钮②“添加按钮”按钮③“皮肤”对象树形目录结构④设置“按钮”的三种状态⑤ 设置按钮动作图5 皮肤编辑操作

勾选“HTML”选项卡中“开启HTML文件输出”复选框，则在生成SWF动画文件的同时会生成调用该SWF文件的网页文件，我们暂时不生成网页。

（7）设置“皮肤”

Pano2VR交互功能是由“交互热区”和“皮肤”完成的，“皮肤”相当于交互按钮、图形的集合。

预先制作一幅尺寸为 280px*260px的半透明的缩略地图以及一些作为按钮和地点标注按钮的 png格式的图形文件。激活“设定”选项卡，单击“皮肤”区中的“编辑”按钮激活“皮肤编辑器”。可以看到之前设置的simplex.ggsk包含了一个载入进度条和一组简洁的按钮，下面我们在此基础上进行二次加工，以符合我们的校园漫游动画作品。修改“皮肤编辑器”参数：设置窗口大小，单击“添加图像”按钮，将缩略地图载入并拖到皮肤窗口的右上角，然后单击“添加按钮”激活“导入新按钮”对话框，选择按钮图片，然后将按钮拖至右上角放置在缩略图相应位置。然后执行双击右侧树目录结构中的“tiyuguan”按钮，打开“按钮属性”对话框，修改按钮的鼠标经过状态和选定状态中所用的图片。单击打开“动作/修改器”选项卡，设置按钮的事件及动作：“鼠标点击”事件则“打开下一场

景”“tiyuguan.swf”文件。同理完成其余按钮设置，设置完成后存储皮肤文件。操作如图5所示：

这样在单个场景动画中，就有了一个增加整体的缩略地图，并设置了地标按钮链接到其它场景，只需将所有场景动画做好，在所有场景动画中都使用这个带导航地图的皮肤文件，就可以实现在校园内随意漫游的目的。我们还可以加一些网页中的常规功能，比如单击缩略地图下方的“P学院”就将地图折叠起来以及关闭地图显示和最大化地图等等，其功能设置方法与地点标注按钮的设置方法相同。其中最大化功能可以链接到一个单独的大地图文件，增加校园整体感。最后单击“确定”按钮，生成完整的校园漫游动画作品。 4 结语

一般来说，全景漫游动画的实现流程依次是图片采集、图片编辑加工、图片合成、

全景漫游处理与设置、后期的皮肤完善与导航。在技术上，要求设计者必须熟练掌握Photoshop图片处理技巧，Flash动画制作技巧，Pano2VR等全景漫游制作软件的使用技巧以及目前市面上的高端数码产品的使用方法。这种建立在具有照片质量真实感的虚拟场景“基于图像的虚拟现实技术”主要有以下优点：（1）开发成本低廉；（2）逼真感强；（3）避免了复杂的几何建模（4）实时性好。[4]这种VR方式以极低的制作成本获得一定程度的虚拟现实体验，它在立体空间的展示，立体物体的展示，展品的介绍，虚拟空间的营造与构建，虚拟场景的构造等方面有着独特的优势。[3]实物图片系列的全景漫游广泛应用在旅游风景展示、房产楼盘展示、宾馆酒店互联网订房系统、汽车展示、虚拟展览馆、企业院校展示、商场展示以及数字城市和地理信息系统中，实用性极高，读者不妨借鉴试用。 参 考 文 献

[1][4]范灵.基于静态图像的虚拟校园全景展示[D].广东工业大学，2007：2，15. [2]叶萍萍，罗宏.基于PTGui Pro、Pano2VR的三维全景图制作方法与应用[J].城市勘测，2012，4：66-69.

[3]余胜泉，古素梅.基于静态图像的虚拟现实技术及其在教育中的应用[J].现代教育技术，2000，3：47-51.