王佩雯,張紫桂,楊成,梁弼
摘 要 針對(duì)Web平臺(tái)展示古建筑文物單調(diào)性等問(wèn)題,采用PTGui與Pano2VR工具來(lái)設(shè)計(jì)和制作交互式古建筑文物三維全景漫游,并使用HTML5技術(shù)將其嵌入到Web頁(yè)面中,這使得Web平臺(tái)具有三維動(dòng)態(tài)展示古建筑文物的能力。實(shí)際調(diào)研證明,將全景漫游恰當(dāng)應(yīng)用到Web平臺(tái)能讓瀏覽者感受到不一樣的視覺(jué)效果,能有效提高用戶體驗(yàn),并能增加Web平臺(tái)的訪問(wèn)量。
關(guān)鍵詞 PTGui;Pano2VR;全景漫游;古建筑文物;設(shè)計(jì)和制作
中圖分類(lèi)號(hào) G2 文獻(xiàn)標(biāo)識(shí)碼 A 文章編號(hào) 2096-0360(2018)04-0042-03
古建筑文物是指具有歷史意義的建國(guó)之前的民用建筑和公共建筑,目前很多古鎮(zhèn)以及大城市還保留著一些古建筑文物。古建筑本身是一種綜合性藝術(shù),它融合了材料、建筑技術(shù)、美術(shù)、雕塑等為一體的造型藝術(shù),使人們?cè)谟邢薜目臻g里有美的享受。并且,古建筑文化隨著社會(huì)的發(fā)展越來(lái)越受到人們關(guān)注和重視,越來(lái)越多的學(xué)者和愛(ài)好者從事這方面研究[1]。
目前,通過(guò)Web平臺(tái)來(lái)展示古建筑文物主要以圖片、文字及視頻等,但缺少交互性功能,給瀏覽者帶來(lái)的體檢有些單調(diào)。古建筑文物本身是三維立體的,為了讓瀏覽者在Web上有不一樣的視覺(jué)感受,本文通過(guò)目前主流的全景開(kāi)發(fā)工具來(lái)設(shè)計(jì)和制作交互式古建筑文物三維全景漫游,并將其嵌入到Web平臺(tái)中,讓瀏覽者通過(guò)Web平臺(tái)就可以全方位欣賞到古建筑文物,并有“身臨其境,觸手可及”的感受,進(jìn)而吸引瀏覽者親自前往觀賞。
1 相關(guān)技術(shù)
1.1 全景圖拼接技術(shù)
Panorama Tools是目前功能最為強(qiáng)大的全景圖制作工具,但它需要用戶編寫(xiě)腳本命令才能工作。而PTGui通過(guò)為全景圖制作工具(Panorama Tools)提供可視化界面來(lái)實(shí)現(xiàn)對(duì)圖像的拼接,從而創(chuàng)造出高質(zhì)量的全景圖[2]。因此,本文采用PTGui來(lái)設(shè)計(jì)古建筑文物的全景圖。
1.2 全景漫游場(chǎng)景技術(shù)
Pano2VR是一個(gè)全景漫游圖合成軟件。它把全景圖轉(zhuǎn)換成QuickTime或者M(jìn)acromedia Flash格式的全景漫游,可以定制皮膚,選擇用戶界面語(yǔ)言。同時(shí),它支持平、圓柱、球、立方體面片、交叉、T、條狀和Quick Time VR作為輸入格式與增加能力,這些格式之間轉(zhuǎn)換的修飾的立方體的臉[3]。并且多個(gè)漫游圖之間可以設(shè)置熱點(diǎn),實(shí)現(xiàn)漫游圖的切換。
1.3 HTML5技術(shù)
HTML5是目前流行的一種超文本標(biāo)記語(yǔ)言,它解決了HTML4等之前規(guī)范中的很多問(wèn)題。并且,HTML5中增加了許多新特性,例如嵌入音頻、視頻和圖片的函數(shù)、客戶端存儲(chǔ)數(shù)據(jù)、交互式文檔等,通過(guò)制定如何處理所有HTML元素以及如何從錯(cuò)誤中恢復(fù)的精確規(guī)則[4]。而且,HTML5進(jìn)一步增強(qiáng)了互動(dòng)性,并有效減少了開(kāi)發(fā)成本。
2 交互式全景漫游的設(shè)計(jì)與制作
2.1 采集圖片
原始圖片的獲取是制作交互式古建筑文物全景漫游的第一步。需要用到數(shù)碼單反相機(jī)、普通云臺(tái)和三腳架。在拍攝照片時(shí),首先將三腳架調(diào)整至水平,再將相機(jī)豎直固定在三腳架的云臺(tái)上,確保拍攝時(shí)云臺(tái)能正常旋轉(zhuǎn)。為了避免按動(dòng)快門(mén)時(shí)的輕微震動(dòng)導(dǎo)致拍攝出的照片模糊,可以把拍攝模式設(shè)定為定時(shí)拍攝。根據(jù)相機(jī)鏡頭和所要拍攝場(chǎng)景的不同可以選擇合適的拍攝張數(shù),并且要求相鄰照片要有一定的重合區(qū)域,該區(qū)域不宜過(guò)大也不宜過(guò)小,建議在30%左右。在拍攝過(guò)程中,不能改變相機(jī)的參數(shù),以使同一組照片色調(diào)和明暗保持一致。由于地面三腳架底部區(qū)域相機(jī)無(wú)法覆蓋,因此如果地面紋理較為復(fù)雜,則應(yīng)對(duì)地面進(jìn)行補(bǔ)拍,以備后期處理時(shí)使用。圖1展示了本文通過(guò)拍攝采集到的部分古建筑文物圖片效果。
2.2 生成全景圖
生成全景圖的主要任務(wù)是將所采集的原始圖片拼接為一張水平360度視角、垂直180度視角、長(zhǎng)寬比為2︰1的全景圖片。該過(guò)程我們使用PTGui軟件來(lái)完成,其基本實(shí)現(xiàn)過(guò)程可以分為五步:圖片載入,特征點(diǎn)定位,圖片配準(zhǔn)和融合,生成全景圖以及全景圖修補(bǔ)[5]。
在全景圖修補(bǔ)時(shí),由于全景圖是將球面映射到平面上,本身就具有一定的變形,尤其是天空和地面的變形較大,因此不能直接在Photoshop軟件中對(duì)地面和天空進(jìn)行修補(bǔ)。這里提供兩種方法進(jìn)行修補(bǔ):一是利用PTGui軟件,將一張2︰1的球面映射全景圖轉(zhuǎn)化為六張1︰1的立方體映射,這六張圖剛好是立方體的六個(gè)面,由于這六張圖不存在形變問(wèn)題,可將其載入Photoshop進(jìn)行修補(bǔ);二是先將全景圖導(dǎo)入Photoshop,利用Photoshop的極坐標(biāo)功能,產(chǎn)生平面坐標(biāo)到極坐標(biāo),將地面和天空平面化,再進(jìn)行修補(bǔ)。圖2展示了通過(guò)PTGui生成并修補(bǔ)后的全景圖。
2.3 合成三維全景漫游
生成古建筑文物的全景圖并修補(bǔ)后,接下來(lái)使用Pano2VR來(lái)合成三維全景漫游。全景漫游的合成主要涉及到交互熱區(qū)和熱點(diǎn)的設(shè)置,具體設(shè)置及效果如圖3所示。
如果設(shè)置有多個(gè)場(chǎng)景之間的熱點(diǎn),則還需要設(shè)置在視覺(jué)效果選項(xiàng)卡中的過(guò)場(chǎng)效果選項(xiàng)里的一些參數(shù),以此來(lái)達(dá)到場(chǎng)景切換時(shí)的自然過(guò)渡。對(duì)于播放器的控制按鈕,選擇一款軟件默認(rèn)的按鈕皮膚。最后選擇文件輸出格式(如.swf等)和輸出文件名與路徑,全部設(shè)置好后點(diǎn)擊確認(rèn)。具體設(shè)置內(nèi)容如圖4所示。
這樣我們就完成了交互式古建筑文物全景漫游圖的合成,其具體效果如圖5所示。
3 Web頁(yè)面展示
為了增強(qiáng)古建筑文物在Web平臺(tái)上的用戶體驗(yàn),在頁(yè)面中放入三維全景漫游是非常必要的。全景技術(shù)以全新的視角為開(kāi)發(fā)者打開(kāi)了Web端的新大門(mén),全景實(shí)景漫游效果更是讓瀏覽者有身臨其境之感,它突破了時(shí)間、空間的現(xiàn)實(shí),帶著瀏覽者走進(jìn)真實(shí)的場(chǎng)景,也帶給瀏覽者極致的Web體驗(yàn)。在Web頁(yè)中放入古建筑文物全景漫游圖的具體過(guò)程如下。
首先,把已生成好的古建筑文物全景漫游輸出文件(如pano.swf)放到Web項(xiàng)目的3D文件目錄中,具體如圖6所示。
接著,在index.jsp頁(yè)面中通過(guò)
最后,運(yùn)行Web項(xiàng)目,并訪問(wèn)頁(yè)面,即可瀏覽到交互式的古建筑文物全景漫游,其效果展示如圖8所示。
4 結(jié)束語(yǔ)
本文采用PTGui和Pano2VR全景漫游圖技術(shù)及其他輔助工具設(shè)計(jì)并實(shí)現(xiàn)了古建筑文物交互式全景漫游效果,并使用HTML5技術(shù)將其放入Web頁(yè)面中,這是目前呈現(xiàn)古建筑文物一種非常好的方式。而且,本古建筑文物全景漫游是通過(guò)實(shí)地取景來(lái)生成的,其取材的真實(shí)性使其全景漫游效果具有更強(qiáng)的真實(shí)感,讓瀏覽者有身臨其境的全景沉浸感。同時(shí),該實(shí)景漫游能在Web上呈現(xiàn),瀏覽者可以在網(wǎng)絡(luò)環(huán)境下隨意瀏覽,其上下、左右拖動(dòng)等功能都讓瀏覽者有很強(qiáng)的全景交互感??偟膩?lái)講,通過(guò)全景漫游圖技術(shù)可以快速的設(shè)計(jì)和制作交互式古建筑文物全景漫游效果,當(dāng)嵌入Web平臺(tái)能有效提高瀏覽者的體驗(yàn)和平臺(tái)的訪問(wèn)量。
參考文獻(xiàn)
[1]張洪吉,羅勇,裴尼松,等.基于三維激光掃描的古建筑文物三維數(shù)字化保護(hù)研究——以四川樂(lè)山文廟大成殿為例[J].測(cè)繪與空間地理信息,2016,39(7):42-44.
[2]高軼.全景照片合成技術(shù)及PTGUI的運(yùn)用[J].電腦知識(shí)與技術(shù),2010,25(6):7114-7117.
[3]孫君菊,甘露.基于Pano2VR的三維全景校園漫游系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].福建電腦,2016,32(6):129-130.
[4]程榮贇.基于HTML5技術(shù)的響應(yīng)式Web設(shè)計(jì)淺析[J].電子世界,2017,22(39):79-80.
[5]葉萍萍,羅宏.基于PTGui Pro、Pano2VR的三維全景圖制作方法與應(yīng)用[J].城市勘測(cè),2012(4):66-69.
[6]何定華,王陽(yáng)明.iframe在網(wǎng)頁(yè)設(shè)計(jì)中的巧用[J].城市建設(shè)理論研究(電子版),2013(32):1-2.
[7]Bi Liang.The Study and Application of the New Control Layer for Enterprise-Class Web Applications.Journal of Computers(Taiwan),Vol.28,No.6,2017,pp.151-162. [doi:10.3966/199115992017122806013].