基于图像的虚拟实景漫游地图的实现

唐永芬

(连云港职业技术学院信息工程学院,江苏连云港222000)

具有沉浸感、可交互的虚拟环境构建方法主要分为两类：第一类传统方法是采用计算机图形学技术,通过对真实环境进行抽象建立对应三维几何模型,实时漫游时则根据观察者所处的位置、光照条件、消隐信息等,由计算机绘制相应场景.这种基于计算机图形学的虚拟现实系统因其建模复杂以及绘制场景的真实度有限并且对计算机软硬件要求较高,目前较难满足大众化的虚拟现实系统应用.第二类方法则直接利用照相机拍摄到的全景图像来构建虚拟现实系统,这类基于全景图像的方法具有速度快、逼真度高、制作简单的优点,因而在旅游景点介绍、虚拟场馆游览等方面得到了大量的应用[1].

基于图像的虚拟现实系统是当今发展比较成熟的虚拟现实系统,在人们生活中得到了广泛的应用[2].在Flash里部署虚拟实境无疑是一个革命性进步,再也不用去安装java虚拟机和QTVR了,事实上,在基于Flash的可编程矢量图形界面基础上开发出来的虚拟现实可以通过创新的用户界面以达到完美的用户体验.city8.com就是采用这种技术来部署全景体验城市地图.

1 设计思路

360°全景虚拟浏览可以利用对实地拍摄的全景照片进行控制播放来实现,移动鼠标到屏幕左侧,控制图片向右运动.移动鼠标到屏幕右侧,控制图片向左运动.通过用户对实景照片的控制实现虚拟浏览的逼真体验[3].

在二维地图上设置一些重要的热点,用户点击这些热点即可全景浏览该位置,可以用鼠标的移动控制地图的平移和缩放.

1.1 地图实现原理

在地图中具有全景浏览的地点设置好隐藏按钮,当鼠标移动到该位置是,出现文字提示和区域提示,用户单击鼠标即可浏览该位置,如图1所示.

图1 全景地图效果

当鼠标向左或向右移动时,将鼠标的X坐标与地图中心X坐标相减 (mx-cx),可以得到一个位置坐标的变化值.当鼠标在中心右侧时,cx-mx＜0,动画位置变化值为负,地图向左运动,即用户感觉向右走.当鼠标在中心左侧时,cx-mx＞0,动画位置变化值为正,动画向右移动.若图片原始的X坐标为px,原始的 Y坐标为py,新的X坐标为newx,新的Y坐标为newy,则原始坐标值与坐标的变化值相加就可以实现地图的横向滚动.

Newx=px+(cx-mx)/m

当鼠标向上或向下移动时,与左右相同,只不过改变的是图片的 Y坐标,实现地图的上下滚动.

Newy=py+(cy-my)/m

其中m为位置变化因子,调整变化因子大小可以改变位置变化的速度,也就是改变图片移动的速度.

在地图上设置两个按钮来控制地图的缩放,鼠标点击放大按钮后,设置缩放比例为

Newscale=scale+10

点击缩小按钮后,设置缩放比例为

Newscale=scale+10

1.2 全景浏览实现原理

设全景浏览动画尺寸为W×H,图片长度为L,中心坐标为 (cx,cy),鼠标位置坐标为 (mx,my),如图2所示.

图2 全景浏览原理

需要有大小完全相同的两个图片A和B,如图3所示,它们首尾相连,那么当图片A水平移动的距离等于图片的宽度时,图片B就会正好处于图片A的初始位置.由于图片B与图片A完全一样,此时将图片A重新定义到初始位置,重复图片A的移动代替图片B的移动,从而实现图片的循环播放.由于计算机运行的速度极快,用户是不会感觉到这种替换的[4].

图3 经过处理后可以无缝拼接的图A与图B

图片向左移动,当图片中心点由P0移动到P1位置时,图片A完全离开动画舞台,而图片C恰好占据了图片A初始的位置,这时我们再用图片A替换图片C,就可以实现图片向左的循环播放了.

if(newx＜=- (L-W/2)){

newx=x0;

}

图片向右移动,当图片中心点由P0移动到P2位置时,图片A完全离开动画舞台,而图片B恰好占据了图片A初始的位置.这时我们再用图片A替换图片B,就可以实现图片向右的循环播放了.

If(new x＞= (L+W/2)){

Newx=x0;

}

当鼠标向上或向下移动时,同样可以获得鼠标的位置坐标.将鼠标的 Y坐标与全景画中心 Y坐标相减 (my-cy),可以得到一个缩放比例的变换值.当鼠标在中心上面时,my-cy＜0,比例变化值为负.当鼠标在中心下面时,my-cy＞0,比例变化值为正.若原始缩放比例值为scale,新的比例值为newscale,则原始比例值与比例的变化值相加就可以实现全景画比例的实时变化了.

Newscale=scale+ (my-cy)/n

其中n为比例因子,调整比例因子的大小可以改变缩放比例变化的速度.

2 具体实现

2.1 地图部分

在Flash中,把地图导入作为主场景,并转换为元件,控制代码如下：

mx=_xmouse;

my=_ymouse;

tx=map._x;

ty=map._y;

newx=tx+ (mx-300)/6;

newy=ty+ (my-300)/6;

set Property(“picmove”,_x,newx);

set Property(“picmove”,_y,newy);

scale=map. _xscale;

newscale=scale+ (my-100)/6;

if(newscale＞300){

newscale=300

}else if(newscale＜60){

newscale=60

}

set Property(“_root.pic.picmove”,_xscale,newscale);

set Property(“_root.pic.picmove”,_yscale,newscale);

}

2.2 全景浏览

把处理好的全景图片素材放入影片剪辑 (Movie Clip)元件中,通过对该元件的控制实现全景浏览效果,部分代码如下：

if(newx＜=-600){

newx=200;

}

if(newx＞=800){

Newx=0;

}

set Property(“_root.pic.picmove”,_x,newx);

为了用户在浏览时能更形象,在Flash中绘制一个放大镜的图形,把它定义为影片元件,并命名为ms,通过以下语句实现隐藏鼠标制作并重新定义新鼠标制作为放大镜的图形,代码如下[5]：

Mouse.hide()

startDrag(“ms”,ture)

2.3 地图链接

在地图上选择热点后,利用loadMovie加载相应的全景浏览效果,例如苍梧绿园的全景浏览文件为“cwly.swf”.则地图中的代码如下：

on(release){

load Movie(“cwly.swf”,_root.adBlock,post)

}

3 结束语

本文提出了实现虚拟全景浏览地图的思路,并利用当前流行的Flash具体实现了该效果,经过测试,可以利用鼠标的移动很好地实现虚拟全景浏览,利用这种方法,可以在Internet上制作出功能更加强大的虚拟现实应用.

[1] 孙立峰,钟力,李云浩,等.虚拟实景空间的实时漫游 [J].中国图象图形学报,1999,4(06)：507-513

[2] Peng D,Liu J,Tian J,et al.Transformation model estimation of image registration via least square support vector machines[J].Pattern Recogn Lett.2006,27：1397-1404

[3] 肖甫.基于图像的虚拟场景绘制关键技术研究 [D].南京：南京理工大学,2006

[4] 宋一兵,李仲,马震.Flash MX基础培训教程 [M].北京：人民邮电出版社,2003：262-269

[5] 郑伯鸿.Flash Action Script语法参考辞典 [M].北京：中国铁道出版社,2001：436-439