2024年4月10日发(作者:)

2018年第4期 NEW MEDIA RESEARCH

基于PTGui与Pano2VR的交互式古建筑文物

三维全景漫游设计

王佩雯

1

,张紫桂

2

,杨 成

1

,梁 弼

1

1.四川文理学院智能制造学院,四川达州 635000

2.四川文理学院建筑工程学院,四川达州 635000

摘 要 针对Web平台展示古建筑文物单调性等问题,采用PTGui与Pano2VR工具来设计和制作交互式古建筑

文物三维全景漫游,并使用HTML5技术将其嵌入到Web页面中,这使得Web平台具有三维动态展示古建筑文物

的能力。实际调研证明,将全景漫游恰当应用到Web平台能让浏览者感受到不一样的视觉效果,能有效提高用

户体验,并能增加Web平台的访问量。

关键词 PTGui;Pano2VR;全景漫游;古建筑文物;设计和制作

中图分类号 G2 文献标识码 A 文章编号 2096-0360(2018)04-0042-03

古建筑文物是指具有历史意义的建国之前的民

用建筑和公共建筑,目前很多古镇以及大城市还保

留着一些古建筑文物。古建筑本身是一种综合性艺

术,它融合了材料、建筑技术、美术、雕塑等为一

体的造型艺术,使人们在有限的空间里有美的享受。

并且,古建筑文化随着社会的发展越来越受到人们

关注和重视,越来越多的学者和爱好者从事这方面

[1]

研究。

目前,通过Web平台来展示古建筑文物主要以

图片、文字及视频等,但缺少交互性功能,给浏览

者带来的体检有些单调。古建筑文物本身是三维立

体的,为了让浏览者在Web上有不一样的视觉感受,

本文通过目前主流的全景开发工具来设计和制作交

互式古建筑文物三维全景漫游,并将其嵌入到Web

平台中,让浏览者通过Web平台就可以全方位欣赏

到古建筑文物,并有“身临其境,触手可及”的感受,

进而吸引浏览者亲自前往观赏。

古建筑文物的全景图。

1.2 全景漫游场景技术

Pano2VR是一个全景漫游图合成软件。它把全

景图转换成QuickTime或者Macromedia Flash格

式的全景漫游,可以定制皮肤,选择用户界面语言。

同时,它支持平、圆柱、球、立方体面片、交叉、T、

条状和Quick Time VR作为输入格式与增加能力,

这些格式之间转换的修饰的立方体的脸

[3]

。并且多

个漫游图之间可以设置热点,实现漫游图的切换。

1.3 HTML5技术

HTML5是目前流行的一种超文本标记语言,它

解决了HTML4等之前规范中的很多问题。并且,

HTML5中增加了许多新特性,例如嵌入音频、视频

和图片的函数、客户端存储数据、交互式文档等,

通过制定如何处理所有HTML元素以及如何从错误

中恢复的精确规则

[4]

。而且,HTML5进一步增强了

互动性,并有效减少了开发成本。

1 相关技术

1.1 全景图拼接技术

Panorama Tools是目前功能最为强大的全景图

制作工具,但它需要用户编写脚本命令才能工作。

而PTGui通过为全景图制作工具(Panorama Tools)

提供可视化界面来实现对图像的拼接,从而创造出

[2]

高质量的全景图。因此,本文采用PTGui来设计

2 交互式全景漫游的设计与制作

2.1 采集图片

原始图片的获取是制作交互式古建筑文物全景

漫游的第一步。需要用到数码单反相机、普通云台

和三脚架。在拍摄照片时,首先将三脚架调整至水

平,再将相机竖直固定在三脚架的云台上,确保拍

基金项目:2016年四川省教育厅一般项目(16ZB0362);2016年四川文理学院重点项目(2016KZ002Z)。

作者简介:王佩雯,研究方向为软件工程。

张紫桂,造价员,研究方向为工程项目管理。

杨 成,研究方向为软件工程。

梁 弼,副教授,研究方向为Web服务、推荐系统、智能信息处理与应用软件。

42

新媒体研究

MEDIA TECHNOLOGY 媒体技术

图1 拍摄的图片样例

摄时云台能正常旋转。为了避免按动快门时的轻微

震动导致拍摄出的照片模糊,可以把拍摄模式设定

为定时拍摄。根据相机镜头和所要拍摄场景的不同

可以选择合适的拍摄张数,并且要求相邻照片要有

一定的重合区域,该区域不宜过大也不宜过小,建

议在30%左右。在拍摄过程中,不能改变相机的参数,

以使同一组照片色调和明暗保持一致。由于地面三

脚架底部区域相机无法覆盖,因此如果地面纹理较

为复杂,则应对地面进行补拍,以备后期处理时使

用。图1展示了本文通过拍摄采集到的部分古建筑

文物图片效果。

2.2 生成全景图

生成全景图的主要任务是将所采集的原始图片

拼接为一张水平360度视角、垂直180度视角、长

宽比为2︰1的全景图片。该过程我们使用PTGui

软件来完成,其基本实现过程可以分为五步:图片

载入,特征点定位,图片配准和融合,生成全景图

[5]

以及全景图修补。

在全景图修补时,由于全景图是将球面映射到

平面上,本身就具有一定的变形,尤其是天空和地

面的变形较大,因此不能直接在Photoshop软件中

对地面和天空进行修补。这里提供两种方法进行修

补:一是利用PTGui软件,将一张2︰1的球面映

射全景图转化为六张1︰1的立方体映射,这六张

图刚好是立方体的六个面,由于这六张图不存在形

变问题,可将其载入Photoshop进行修补;二是先

将全景图导入Photoshop,利用Photoshop的极坐

标功能,产生平面坐标到极坐标,将地面和天空平

面化,再进行修补。图2展示了通过PTGui生成并

修补后的全景图。

2.3 合成三维全景漫游

生成古建筑文物的全景图并修补后,接下来使

用Pano2VR来合成三维全景漫游。全景漫游的合成

主要涉及到交互热区和热点的设置,具体设置及效

果如图3所示。

图3 全景图添加热区或热点

如果设置有多个场景之间的热点,则还需要设

置在视觉效果选项卡中的过场效果选项里的一些参

数,以此来达到场景切换时的自然过渡。对于播放

器的控制按钮,选择一款软件默认的按钮皮肤。最

后选择文件输出格式(如.swf等)和输出文件名

与路径,全部设置好后点击确认。具体设置内容如

图4所示。

图4 全景图输出设置

图2 全景图效果

这样我们就完成了交互式古建筑文物全景漫游

新媒体研究

43

2018年第4期 NEW MEDIA RESEARCH

图的合成,其具体效果如图5所示。

图5 交互式全景漫游图

3 Web页面展示

为了增强古建筑文物在Web平台上的用户体验,

在页面中放入三维全景漫游是非常必要的。全景技

术以全新的视角为开发者打开了Web端的新大门,

全景实景漫游效果更是让浏览者有身临其境之感,

它突破了时间、空间的现实,带着浏览者走进真实

的场景,也带给浏览者极致的Web体验。在Web页

中放入古建筑文物全景漫游图的具体过程如下。

首先,把已生成好的古建筑文物全景漫游输出

文件(如)放到Web项目的3D文件目录

中,具体如图6所示。

图6 全景漫游文件放入Web项目

接着,在页面中通过