基于圖像的虛擬實(shí)景漫游地圖的實(shí)現(xiàn)

唐永芬

(連云港職業(yè)技術(shù)學(xué)院信息工程學(xué)院,江蘇連云港222000)

具有沉浸感、可交互的虛擬環(huán)境構(gòu)建方法主要分為兩類：第一類傳統(tǒng)方法是采用計(jì)算機(jī)圖形學(xué)技術(shù),通過對真實(shí)環(huán)境進(jìn)行抽象建立對應(yīng)三維幾何模型,實(shí)時(shí)漫游時(shí)則根據(jù)觀察者所處的位置、光照條件、消隱信息等,由計(jì)算機(jī)繪制相應(yīng)場景.這種基于計(jì)算機(jī)圖形學(xué)的虛擬現(xiàn)實(shí)系統(tǒng)因其建模復(fù)雜以及繪制場景的真實(shí)度有限并且對計(jì)算機(jī)軟硬件要求較高,目前較難滿足大眾化的虛擬現(xiàn)實(shí)系統(tǒng)應(yīng)用.第二類方法則直接利用照相機(jī)拍攝到的全景圖像來構(gòu)建虛擬現(xiàn)實(shí)系統(tǒng),這類基于全景圖像的方法具有速度快、逼真度高、制作簡單的優(yōu)點(diǎn),因而在旅游景點(diǎn)介紹、虛擬場館游覽等方面得到了大量的應(yīng)用[1].

基于圖像的虛擬現(xiàn)實(shí)系統(tǒng)是當(dāng)今發(fā)展比較成熟的虛擬現(xiàn)實(shí)系統(tǒng),在人們生活中得到了廣泛的應(yīng)用[2].在Flash里部署虛擬實(shí)境無疑是一個(gè)革命性進(jìn)步,再也不用去安裝java虛擬機(jī)和QTVR了,事實(shí)上,在基于Flash的可編程矢量圖形界面基礎(chǔ)上開發(fā)出來的虛擬現(xiàn)實(shí)可以通過創(chuàng)新的用戶界面以達(dá)到完美的用戶體驗(yàn).city8.com就是采用這種技術(shù)來部署全景體驗(yàn)城市地圖.

1 設(shè)計(jì)思路

360°全景虛擬瀏覽可以利用對實(shí)地拍攝的全景照片進(jìn)行控制播放來實(shí)現(xiàn),移動(dòng)鼠標(biāo)到屏幕左側(cè),控制圖片向右運(yùn)動(dòng).移動(dòng)鼠標(biāo)到屏幕右側(cè),控制圖片向左運(yùn)動(dòng).通過用戶對實(shí)景照片的控制實(shí)現(xiàn)虛擬瀏覽的逼真體驗(yàn)[3].

在二維地圖上設(shè)置一些重要的熱點(diǎn),用戶點(diǎn)擊這些熱點(diǎn)即可全景瀏覽該位置,可以用鼠標(biāo)的移動(dòng)控制地圖的平移和縮放.

1.1 地圖實(shí)現(xiàn)原理

在地圖中具有全景瀏覽的地點(diǎn)設(shè)置好隱藏按鈕,當(dāng)鼠標(biāo)移動(dòng)到該位置是,出現(xiàn)文字提示和區(qū)域提示,用戶單擊鼠標(biāo)即可瀏覽該位置,如圖1所示.

圖1 全景地圖效果

當(dāng)鼠標(biāo)向左或向右移動(dòng)時(shí),將鼠標(biāo)的X坐標(biāo)與地圖中心X坐標(biāo)相減 (mx-cx),可以得到一個(gè)位置坐標(biāo)的變化值.當(dāng)鼠標(biāo)在中心右側(cè)時(shí),cx-mx＜0,動(dòng)畫位置變化值為負(fù),地圖向左運(yùn)動(dòng),即用戶感覺向右走.當(dāng)鼠標(biāo)在中心左側(cè)時(shí),cx-mx＞0,動(dòng)畫位置變化值為正,動(dòng)畫向右移動(dòng).若圖片原始的X坐標(biāo)為px,原始的 Y坐標(biāo)為py,新的X坐標(biāo)為newx,新的Y坐標(biāo)為newy,則原始坐標(biāo)值與坐標(biāo)的變化值相加就可以實(shí)現(xiàn)地圖的橫向滾動(dòng).

Newx=px+(cx-mx)/m

當(dāng)鼠標(biāo)向上或向下移動(dòng)時(shí),與左右相同,只不過改變的是圖片的 Y坐標(biāo),實(shí)現(xiàn)地圖的上下滾動(dòng).

Newy=py+(cy-my)/m

其中m為位置變化因子,調(diào)整變化因子大小可以改變位置變化的速度,也就是改變圖片移動(dòng)的速度.

在地圖上設(shè)置兩個(gè)按鈕來控制地圖的縮放,鼠標(biāo)點(diǎn)擊放大按鈕后,設(shè)置縮放比例為

Newscale=scale+10

點(diǎn)擊縮小按鈕后,設(shè)置縮放比例為

Newscale=scale+10

1.2 全景瀏覽實(shí)現(xiàn)原理

設(shè)全景瀏覽動(dòng)畫尺寸為W×H,圖片長度為L,中心坐標(biāo)為 (cx,cy),鼠標(biāo)位置坐標(biāo)為 (mx,my),如圖2所示.

圖2 全景瀏覽原理

需要有大小完全相同的兩個(gè)圖片A和B,如圖3所示,它們首尾相連,那么當(dāng)圖片A水平移動(dòng)的距離等于圖片的寬度時(shí),圖片B就會(huì)正好處于圖片A的初始位置.由于圖片B與圖片A完全一樣,此時(shí)將圖片A重新定義到初始位置,重復(fù)圖片A的移動(dòng)代替圖片B的移動(dòng),從而實(shí)現(xiàn)圖片的循環(huán)播放.由于計(jì)算機(jī)運(yùn)行的速度極快,用戶是不會(huì)感覺到這種替換的[4].

圖3 經(jīng)過處理后可以無縫拼接的圖A與圖B

圖片向左移動(dòng),當(dāng)圖片中心點(diǎn)由P0移動(dòng)到P1位置時(shí),圖片A完全離開動(dòng)畫舞臺(tái),而圖片C恰好占據(jù)了圖片A初始的位置,這時(shí)我們再用圖片A替換圖片C,就可以實(shí)現(xiàn)圖片向左的循環(huán)播放了.

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

newx=x0;

}

圖片向右移動(dòng),當(dāng)圖片中心點(diǎn)由P0移動(dòng)到P2位置時(shí),圖片A完全離開動(dòng)畫舞臺(tái),而圖片B恰好占據(jù)了圖片A初始的位置.這時(shí)我們再用圖片A替換圖片B,就可以實(shí)現(xiàn)圖片向右的循環(huán)播放了.

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

Newx=x0;

}

當(dāng)鼠標(biāo)向上或向下移動(dòng)時(shí),同樣可以獲得鼠標(biāo)的位置坐標(biāo).將鼠標(biāo)的 Y坐標(biāo)與全景畫中心 Y坐標(biāo)相減 (my-cy),可以得到一個(gè)縮放比例的變換值.當(dāng)鼠標(biāo)在中心上面時(shí),my-cy＜0,比例變化值為負(fù).當(dāng)鼠標(biāo)在中心下面時(shí),my-cy＞0,比例變化值為正.若原始縮放比例值為scale,新的比例值為newscale,則原始比例值與比例的變化值相加就可以實(shí)現(xiàn)全景畫比例的實(shí)時(shí)變化了.

Newscale=scale+ (my-cy)/n

其中n為比例因子,調(diào)整比例因子的大小可以改變縮放比例變化的速度.

2 具體實(shí)現(xiàn)

2.1 地圖部分

在Flash中,把地圖導(dǎo)入作為主場景,并轉(zhuǎn)換為元件,控制代碼如下：

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)元件中,通過對該元件的控制實(shí)現(xiàn)全景瀏覽效果,部分代碼如下：

if(newx＜=-600){

newx=200;

}

if(newx＞=800){

Newx=0;

}

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

為了用戶在瀏覽時(shí)能更形象,在Flash中繪制一個(gè)放大鏡的圖形,把它定義為影片元件,并命名為ms,通過以下語句實(shí)現(xiàn)隱藏鼠標(biāo)制作并重新定義新鼠標(biāo)制作為放大鏡的圖形,代碼如下[5]：

Mouse.hide()

startDrag(“ms”,ture)

2.3 地圖鏈接

在地圖上選擇熱點(diǎn)后,利用loadMovie加載相應(yīng)的全景瀏覽效果,例如蒼梧綠園的全景瀏覽文件為“cwly.swf”.則地圖中的代碼如下：

on(release){

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

}

3 結(jié)束語

本文提出了實(shí)現(xiàn)虛擬全景瀏覽地圖的思路,并利用當(dāng)前流行的Flash具體實(shí)現(xiàn)了該效果,經(jīng)過測試,可以利用鼠標(biāo)的移動(dòng)很好地實(shí)現(xiàn)虛擬全景瀏覽,利用這種方法,可以在Internet上制作出功能更加強(qiáng)大的虛擬現(xiàn)實(shí)應(yīng)用.

[1] 孫立峰,鐘力,李云浩,等.虛擬實(shí)景空間的實(shí)時(shí)漫游 [J].中國圖象圖形學(xué)報(bào),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] 肖甫.基于圖像的虛擬場景繪制關(guān)鍵技術(shù)研究 [D].南京：南京理工大學(xué),2006

[4] 宋一兵,李仲,馬震.Flash MX基礎(chǔ)培訓(xùn)教程 [M].北京：人民郵電出版社,2003：262-269

[5] 鄭伯鴻.Flash Action Script語法參考辭典 [M].北京：中國鐵道出版社,2001：436-439