基于全景攝影的網(wǎng)頁設計研究

樓曉燕 謝文駿 謝志遠

摘 要：本文設計了一個酒店內(nèi)部外部環(huán)境的全景網(wǎng)頁，首先用單反相機開始全景拍攝，然后對圖像用photoshop，photomatix pro和PtGui等軟件，將照片進行處理和拼接，最后用Pano2VR軟件制作網(wǎng)頁，整個網(wǎng)頁真實立體，沒有拼接瑕疵。用戶可以真正體驗到信息時代在足不出戶的情況下給我們帶來的非凡的樂趣與享受。

【關(guān)鍵詞】全景網(wǎng)頁 虛擬現(xiàn)實技術(shù) 互聯(lián)網(wǎng)

隨著互聯(lián)網(wǎng)技術(shù)的進步發(fā)展，我國的網(wǎng)絡營銷也越來越普及，企業(yè)的競爭與生存空間正逐步從傳統(tǒng)市場轉(zhuǎn)向網(wǎng)絡市場，營銷方式也從傳統(tǒng)的市場營銷轉(zhuǎn)向網(wǎng)絡營銷。虛擬現(xiàn)實技術(shù)從興起至今已經(jīng)有二十多年了，發(fā)展迅速，已經(jīng)滲透到了各個產(chǎn)業(yè)和領域。旅游信息互聯(lián)網(wǎng)化漸漸成為了一種趨勢，目前虛擬旅游僅處于起步階段，但其發(fā)展?jié)摿s極其巨大。本設計研究的是一個基于靜態(tài)圖像的虛擬現(xiàn)實技術(shù)，它可以簡單地在電腦網(wǎng)絡上實現(xiàn)，主要通過視覺接口使人沉浸在虛擬情境中。

1 設計理念

為了體現(xiàn)出全景網(wǎng)站的核心功能，讓用戶身臨其境的觀看酒店的環(huán)境，我們的做法是直接把全景展示放大到全屏，讓客戶一經(jīng)登陸就可以直接直觀的看到全景展示。所有操作按鈕采用居中布局，并且在不需要的時候自動縮小并半透明化。在功能按鈕的選擇上，只保留了最基礎的功能，比如上下左右鍵以及放大縮小鍵還有全屏鍵，目的就是在保證使用性的前提下，秉持著簡既是繁的原則，讓用戶在瀏覽時可以完全沉浸在全景的虛擬現(xiàn)實效果中不受干擾。整個網(wǎng)頁的設計理念就是讓用戶擁有沉浸式的瀏覽體驗，順暢的瀏覽效果是網(wǎng)站的前提，所以我們選擇了比較新穎的html5技術(shù)來對全景圖片進行球形模擬，html5技術(shù)對移動端的支持也更好，用戶用手機瀏覽時也可以流暢體驗。

2 全景拍攝工藝

對于全景拍攝的工具考慮到成本、效率等多方面的因素，我們主要采用的是單反相機、魚眼鏡頭、云臺設施和三角支架，雖然說普通的傻瓜相機也可以進行全景圖的拍攝，但是因為圖片的實際拍攝效果如清晰度等相對來說無法滿足質(zhì)量上的要求，魚眼鏡頭是廣角鏡頭，焦距短，能觀察得畫面相對較大，三角架主要是用來固定支撐鏡頭的位置，保證拍攝時所有設備的牢固，為了防止出現(xiàn)較大的視差，要確保相片的曝光率和焦距參數(shù)的一致等，因為無法在單層圖片上同時表現(xiàn)全景圖的亮部及暗部細節(jié)，所以在拍攝時應該對同一方向進行多個曝光度的拍攝，后期需要用到photomatix pro等軟件對圖像進行高動態(tài)處理（HDR）。

另外，在斜拍補地工藝上進行了創(chuàng)新，加大了斜拍補地的角度，將原有的45度斜拍增加到60度，因為在實踐中發(fā)現(xiàn)，雖然45度斜拍時可以包括進更多的補地內(nèi)容，但是在最后ptgui優(yōu)化器的視點校正中，通過算法還原原有的視點位置難度更大，也就更容易出現(xiàn)拼接接縫。然而用60度的角度補地這個問題就可以很好的解決。利用創(chuàng)新的60度斜拍補地法，可以很好的將三腳架以及倒影等不應該出現(xiàn)在畫面中的信息去除，以達到完全純粹的還原拍攝地的真實場景的目的。

3 全景圖片的網(wǎng)頁設計轉(zhuǎn)化

通過裝有15mm魚眼鏡頭的全畫幅相機使用十張工藝拍攝60張一組的平面圖片 其中包含jpg格式以及nef格式。jpg格式用于預覽，nef格式用于實際拼接。采集樣品圖如圖1所示。然后，使用capture nx2對60張每組的圖片中的nef格式進行初步微調(diào)以及轉(zhuǎn)化成jpg格式，首先使用高光以及陰影選項進行高光及陰影部分的細節(jié)還原，接著使用色溫以及色調(diào)選項使場景色溫還原真實色溫，最后輸出jpg格式保存，并且使用批處理器將設置套用到其他圖片上最后得到30張通過初步調(diào)試的緊迫感、格式圖片。將這30張圖片呢導入到ptgui軟件中首先使用自動拼接功能得到一張初步拼接的全景圖，然后通過水平校準器校準圖像的水平和校準控制點，加入斜拍補地的照片，同樣通過尋找控制點的方法與另外兩張垂直補地的照片進行匹配后，通過視點校正功能還原斜拍補地照片原來的三維位置，最后用蒙版功能將多余的部分擦去，最后輸出圖片得到一張準確曝光的全景圖。接著用相同的方法再得到一張欠曝圖像以及過曝圖像。將3張不同曝光度的全景圖導入photomatix pro軟件中進行高動態(tài)處理，使用色調(diào)映射選項先將三張圖像進行初步合并，調(diào)節(jié)對比度，顏色飽和度以及白點黑點等得到一張同時擁有高光細節(jié)以及陰影細節(jié)的高動態(tài)全景圖，重復以上的方法制作多張不同場景的全景圖，并導入pano2vr中，修改顯示參數(shù)，初始顯示角度和縮放角度等，最后將獲得的虛擬文件放到網(wǎng)絡服務器的網(wǎng)頁頁面中，得到的網(wǎng)頁效果如圖2所示。

4 結(jié)束語

全景真正要達到專業(yè)標準的水平要下很多的功夫，會因為天氣、儀器設備、拍攝技巧、軟件的處理能力種種因素導致全景網(wǎng)站的設計美中不足。本設計以極簡風格為主導，設計了一個讓用戶身臨其境的觀看酒店的環(huán)境，給用戶提供了一種新的場景展示形式。

參考文獻

[1]劉海娜.基于HTML5的全景漫游技術(shù)研究[D].鄭州：鄭州大學，2013.

[2]朱學芳，蘇勇，史學海，汪民林.基于Internet的3D虛擬場景制作及在DL中的應用[J].現(xiàn)代圖書情報技術(shù)，2006，1（4）： 77-80.

作者簡介

樓曉燕（1989-），女，浙江省杭州市人。現(xiàn)為浙江大學城市學院實驗中心教師，從事計算機技術(shù)的教學和研究。

作者單位

浙江大學城市學院信電分院實驗中心 浙江省杭州市 310015