張姣姣　司占軍

摘要：隨著虛擬現(xiàn)實技術(shù)和計算機技術(shù)的迅速發(fā)展，人們對交互體驗要求越來越高。全景漫游技術(shù)可以在三維空間內(nèi)自由切換場景，且具有較強的交互性及逼真感，與傳統(tǒng)的展示方式相比，更加生動直觀。在基于HTML5的全景漫游技術(shù)的基礎上，設計并制作天津科技大學河西校園全景漫游平臺，該平臺具有校園整體瀏覽、實景展示、實景漫游、等功能，方便師生快速、準確地了解校園樓層分布，同時也起到了宣傳學校作用，具有深遠的意義。

關(guān)鍵詞：全景漫游；HTML5；720云臺；位置信息

中圖分類號：TP319

文獻標識碼：A

文章編號：1009-3044（2017）10-0233-02

全景漫游系統(tǒng)是指對實體建筑及景物進行仿真，用計算機制作的虛擬影像再現(xiàn)真實世界。目前，在互聯(lián)網(wǎng)上進行展示全景圖像的第三方技術(shù)有VRML、X3D、Java、QuickTime、Flash等。這幾種展示方式都需要一定的語言基礎和安裝瀏覽器插件，且不能夠跨平臺發(fā)布。也可以通過VRP、Unity3D、Virtools、Pan02VR等軟件開發(fā)，且軟件仿真操作起來較為復雜。HTML5技術(shù)是目前比較新的一種技術(shù)，它的出現(xiàn)可以解決一次開發(fā)，多平臺應用，并且不需要安裝額外的插件，具備統(tǒng)一的標準，720云平臺就是基于HTML5進行開發(fā)?；贖TML5的全景漫游校園展示其意義在于為廣大師生提供更直接的途徑和準確的地理位置，同時也起到了宣傳學習的作用。

1.開發(fā)環(huán)境與軟件

開發(fā)環(huán)境：windows 7系統(tǒng)

制作軟件：在PhotoShop中處理拍攝的照片、在PTGui中拼接全景圖、在720云平臺中進行全景漫游的制作設置。

2.設計思路

首先進行相應地點的圖片信息的采集，使用單反相機采集圖片，同一地理位置分角度采集多張圖片，角度設定囊括全方位的圖像，并保證每張圖片與其他圖片有相應的定位點。然后用PTGui進行全景圖的拼接，在PhotoShop中對圖像進行修飾調(diào)整，使得拼接后的全景圖片色調(diào)一致。接下來用720云網(wǎng)頁端進行全景漫游的制作設置，并在客戶端實現(xiàn)效果，導出HT-ML5文件，發(fā)布平臺。

3.設計與實現(xiàn)

3.1前期圖像素材準備

校園基本地理信息的采集：在網(wǎng)上查看校園平面地圖，確定校園中主要的地理位置點，下載校園平面地圖，在上面將地理位置點一一標注，一共54個采集點這是后面我們要采集圖片素材的位置。天津科技大學河西校區(qū)的校園結(jié)構(gòu)圖如圖1所示。

圖像素材的采集及處理：這里我們主要使用全景相機、全景云臺和腳架進行圖片采集，在開始拍攝之前，選擇合適的位置點，調(diào)好相機的曝光度固定相機拍攝參數(shù)拍攝。在拍攝校園全景圖像素材時一般選擇在清晨六點到七點三十和八點至九點三十之間，此段時間校園路上學生最少、車輛存放較為固定街道上的行人車輛比較少，對拍攝遮擋影響最少，并且光線效果最為適合，不會發(fā)生過度曝光等不良影響，照片素材質(zhì)量相對較好；拍攝天氣大多選擇在晴天沒有霧霾能見度較好，能夠?qū)⑿@場景中的建筑清晰完整的拍攝下來的天氣。另外為了保證全景圖的效果，在拍攝樣片時曝光量、對焦距離、反差和白平衡條件等務必保持一致。本課題全景圖的拍攝實現(xiàn)是通過在設計好的采集位置，利用采集工具水平360度拍攝12張照片和天地各一張照片，共采集742張圖片。將光線有問題的圖片放入PhotoShop中進行調(diào)整及處理。

整理素材：對所有的圖片分景點保存，每個景點專門存入特定的文件夾，標題就是對該景點的描述。分組后的圖片素材如圖2所示：

3.2全景圖的拼接

PTGui是Helmut Dersch公司的全景制作工具的一個用戶界面。PTGui通過為全景制作工具fPanorama Tools）提供可視化界面來實現(xiàn)對圖像的拼接，從而創(chuàng)造出高質(zhì)量的全景圖象。使用PTGui可以快捷方便地制作出炫目的全景圖片，導人圖片之后配準鏡頭參數(shù)然后就可以自動的拼接和融合為全景圖像。該軟件擁有豐富的功能，支持多種視圖和映射方式，用戶也可以自行修改和添加控制點來提高拼接的精度，支持多種格式的圖像文件輸入，輸出可以選擇為高動態(tài)范圍的圖像，拼接后的圖像明暗度均一，基本上沒有明顯的拼接痕跡，可以說是Windows平臺下非常不錯的全景生成軟件。

將整理好的圖片分位置導入PTGui軟件中，并設置鏡頭類型為“直線”；對準圖像，進行識別對準；選擇“優(yōu)化全景圖”工具，進行優(yōu)化；創(chuàng)建全景圖。

3.3漫游平臺的制作

進入720云的網(wǎng)頁端，注冊并登錄720云。將處理好的圖片上傳云臺，選擇圖片所在文件夾，將圖片導入（需要注意的是全景圖像要符合2：1或者1：1的尺寸），完成導人后點擊下方的發(fā)布選項。發(fā)布后進入作品管理界面找到命名文件夾，點擊文件夾右側(cè)編輯選項進入編輯界面。為了實現(xiàn)校園全景漫游，需要將所有全景圖像進行熱點鏈接，通過熱點達到圖像的切換目的。點擊全景高級設置進入操作界面，鼠標左鍵按住進行拖動，找到合適的位置點擊確定初始視角。然后設置熱點，點擊熱點一全景切換一添加熱點—選擇目標場景，為所有全景圖像素材添加，完成相互間的連接。完成熱點設置后，還可以通過編輯頁面給圖像添加天氣效果，語音解說，背景音樂等特效對其進行修飾美化。最終效果如圖3所示。

在客戶端中的制作過程與網(wǎng)頁端基本相同，這里僅重點介紹HTML5的導出功能及該文件的發(fā)布：

1）在720云客戶端中通過導出功能可以將工程文件導出為HTML5版本。

2）作品文件夾名稱不能使用“中文名稱”、“特殊字符”來命名。離線導出后會得到一個以作品標題名稱命名的文件夾。其中文件包里面包含兩個文件：“html文件夾”、“win點擊運行”的應用程序。html文件夾中包含的是全景作品的所有工程文件?！皐in點擊運行”的應用程序是在本地正常運行全景的必要工具。

3）本次發(fā)布時借助XAMMP搭建本地服務器進行發(fā)布。XAMPP（Apaehe+MySQL+PHP+PERL）是一個功能強大的建站集成軟件包，它易于安裝且包含MySQL、PHP和Perl的@ache發(fā)行版。XAMPP的確非常容易安裝和使用：只需下載，解壓縮，啟動即可。啟動@ache服務器，將html文件夾放入XAMMP的htdoc文件夾下，通過輸入localhost/html/index.ht-m1即可進行放訪問。

4.結(jié)束語

本研究以天津科技大學河西校區(qū)為研究對象，介紹了全景漫游平臺的制作過程?；趯嵕暗娜奥握故究梢灾庇^真實的展示場景信息，為用戶提供位置信息服務，同樣可以應用于旅游景點、博物館內(nèi)部等場景展示。