基于WebGL的校園全景漫游系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

邱 望，梁莉菁，徐遠(yuǎn)恒

基于WebGL的校園全景漫游系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

邱 望，梁莉菁，徐遠(yuǎn)恒

（萍鄉(xiāng)學(xué)院 信息與計(jì)算機(jī)工程學(xué)院，江西 萍鄉(xiāng) 337000）

3D全景漫游在場(chǎng)景展示方面有著傳統(tǒng)圖片無(wú)法比擬的優(yōu)勢(shì)，基于Web的全景漫游系統(tǒng)可以帶來(lái)良好的用戶體驗(yàn)。以萍鄉(xiāng)學(xué)院為例，探討了校園全景漫游系統(tǒng)的特點(diǎn)、實(shí)現(xiàn)方法和關(guān)鍵技術(shù)。從數(shù)據(jù)采集、圖像處理和拼接合成等方面介紹了全景圖像的制作過(guò)程，以瀏覽器為平臺(tái)，采用WebGL技術(shù)設(shè)計(jì)和實(shí)現(xiàn)校園全景漫游系統(tǒng)，具有實(shí)現(xiàn)簡(jiǎn)單、性能優(yōu)良和可移植性強(qiáng)等優(yōu)點(diǎn)，這些方法也適用于類似場(chǎng)景的漫游系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)。

全景漫游；WebGL；虛擬校園；系統(tǒng)開(kāi)發(fā)

引言

虛擬現(xiàn)實(shí)（VR）技術(shù)能夠?qū)F(xiàn)實(shí)中的各種場(chǎng)景和物體通過(guò)計(jì)算機(jī)技術(shù)轉(zhuǎn)換為模擬的圖像和模型并構(gòu)建虛擬場(chǎng)景，用戶可以從虛擬場(chǎng)景中獲得較真實(shí)的感官體驗(yàn)，具有用戶體驗(yàn)好、交互性強(qiáng)等優(yōu)點(diǎn)。近年來(lái)，隨著計(jì)算機(jī)軟、硬件技術(shù)和圖像采集技術(shù)的迅速發(fā)展，越來(lái)越多的企業(yè)開(kāi)始使用VR技術(shù)來(lái)展示和宣傳自身的形象或產(chǎn)品，但這種方式存在很多限制因素，如設(shè)備昂貴、制作困難、平臺(tái)受限等。而成本低、實(shí)現(xiàn)簡(jiǎn)單和傳播快的平面全景漫游就成了更好的替代技術(shù)，其中最常用的一種方式就是基于Web瀏覽器的全景漫游系統(tǒng)[1]。

在學(xué)校校園的宣傳展示中，傳統(tǒng)的方式不夠生動(dòng)和直觀，局限性較大，同時(shí)缺乏真實(shí)性和交互性，相比之下全景漫游的展現(xiàn)方式具有更好的效果，用戶能夠體驗(yàn)到更加真實(shí)的場(chǎng)景和環(huán)境，能夠有效地吸引用戶的注意力[2]。很多高校都在其官網(wǎng)或公眾號(hào)中加入了校園漫游的功能，該模塊作為一種特色的宣傳方式，成為學(xué)校的一個(gè)亮點(diǎn)。為了更好地提升學(xué)校的社會(huì)形象，完善學(xué)校的宣傳功能，本文將以萍鄉(xiāng)學(xué)院實(shí)景作為案例，采用無(wú)人機(jī)航拍、圖像合成優(yōu)化和WebGL（Web Graphics Library）等技術(shù)來(lái)設(shè)計(jì)并實(shí)現(xiàn)校園全景漫游系統(tǒng)。

1 全景圖像的制作

1.1 制作原理和關(guān)鍵技術(shù)

一般的圖像是使用相機(jī)從某個(gè)固定點(diǎn)拍攝的一張圖片，單反相機(jī)的視角通常會(huì)小于120°，用戶通過(guò)普通圖像只能看到場(chǎng)景中的一部分。為了使用戶看到360°環(huán)繞的全部場(chǎng)景，需要制作指定場(chǎng)景的全景圖像[3]。全景圖像的制作原理就是將多個(gè)部分場(chǎng)景拼接成完整場(chǎng)景，即利用相機(jī)在指定場(chǎng)景中的固定點(diǎn)拍攝多張普通圖像，然后使用專業(yè)的圖像處理軟件將這組圖像進(jìn)行拼接合成。全景圖像可以通過(guò)鼠標(biāo)拖拽進(jìn)行視角的切換，也可以集成在VR場(chǎng)景中，通過(guò)VR設(shè)備進(jìn)行環(huán)視體驗(yàn)，具有較強(qiáng)烈的真實(shí)感[4]。

全景圖像的制作通常包括3個(gè)步驟：圖像采集、圖像拼接、后期合成及優(yōu)化。

1.2 圖像采集

圖像采集是獲取原始數(shù)據(jù)的關(guān)鍵步驟，通常是采用高像素、短焦距、大廣角的專業(yè)相機(jī)，在指定地點(diǎn)拍攝一組相片，這組相片要包括該點(diǎn)的所有視角。

由于校園場(chǎng)景較大，涉及多個(gè)場(chǎng)景的全景圖制作，不同的場(chǎng)景有不同的特點(diǎn)，制作的要求和方法也不同，本文選取“若水廣場(chǎng)”和“升旗廣場(chǎng)”兩個(gè)場(chǎng)景來(lái)進(jìn)行說(shuō)明。

在制作“若水廣場(chǎng)”場(chǎng)景的全景圖時(shí)，考慮到本場(chǎng)景應(yīng)該注重表現(xiàn)全貌，因此采用航拍視角，使用了無(wú)人機(jī)進(jìn)行拍攝。無(wú)人機(jī)航拍攝影是以無(wú)人飛機(jī)為空中平臺(tái)，搭載高性能遙感設(shè)備，通過(guò)計(jì)算機(jī)對(duì)圖像信息進(jìn)行處理，并按照一定精度要求制作成圖像，具有控制靈活、拍攝穩(wěn)定，視角選擇多等優(yōu)點(diǎn)，常用于開(kāi)闊場(chǎng)景的拍攝[5]。使用無(wú)人機(jī)拍攝時(shí)，首先需要確定拍攝位置。本文所選拍攝位置在若水廣場(chǎng)中心點(diǎn)，無(wú)人機(jī)飛行高度距離地面30米。然后使用手機(jī)App連接無(wú)人機(jī)，起飛至指定高度，固定不動(dòng)，控制鏡頭的旋轉(zhuǎn)進(jìn)行拍攝。采集到的部分圖像如圖1所示。

圖1 若水廣場(chǎng)圖像素材

而在制作“升旗廣場(chǎng)”時(shí)，考慮到該場(chǎng)景應(yīng)該重在展示地面的物體，因此拍攝點(diǎn)更接近地面，即普通人眼所處的高度的視角。在地面架設(shè)三腳架，相機(jī)高度約為1.6 m，采用魚(yú)眼鏡頭進(jìn)行拍攝。魚(yú)眼相機(jī)最大的優(yōu)點(diǎn)是視角范圍大,視角一般可達(dá)到180°，這為近距離拍攝大范圍景物創(chuàng)造了條件，也使全景圖的合成更方便。由于超大廣角的特點(diǎn)，使用魚(yú)眼鏡頭采集到的圖像在平面顯示時(shí)會(huì)出現(xiàn)扭曲的現(xiàn)象，本場(chǎng)景采集到的圖像如圖2所示：

圖2 升旗廣場(chǎng)圖像素材

通過(guò)這種方式即可完成地面場(chǎng)景原始圖像數(shù)據(jù)的采集。這種方式的好處在于，魚(yú)眼鏡頭拍攝出來(lái)的相片包含了更多的場(chǎng)景信息，因此用更少的相片就可以合成全景圖片，同時(shí)采用這種相片合成之后的全景圖所占用的存儲(chǔ)空間更小，便于后期的處理和瀏覽器中的展示。對(duì)圖片進(jìn)行篩選時(shí)，選取特定數(shù)量的一組相片，要求相片之間的場(chǎng)景重合率>30%，保證合成的瑕疵更少，效果更好。在本場(chǎng)景的全景圖像制作中，僅需8張相片即可完成拼接與合成。

1.3 圖像的拼接與優(yōu)化

圖像拼接的目的是將采集到的一組場(chǎng)景圖像轉(zhuǎn)換為全景圖片，通常采用專業(yè)軟件進(jìn)行制作。目前關(guān)于全景圖像的拼接技術(shù)已經(jīng)比較發(fā)展得成熟，很多軟件都能得到較好的效果，如 Kolor Autopano Giga、PTGui、Panorama Studio Pro、Ulead360、720云等，本文在全景圖像的拼接和處理階段所采用軟件的是PTGui。在PTGui軟件中，將圖片導(dǎo)入即可自動(dòng)合成全景圖像，但是生成的圖像中會(huì)存在一些瑕疵，包括噪點(diǎn)、錯(cuò)位和扭曲等，因此需要人工對(duì)這些問(wèn)題進(jìn)行后期的處理[6]。PTGui軟件同樣提供了手動(dòng)修復(fù)和優(yōu)化的功能，在完成自動(dòng)拼接之后需要手動(dòng)進(jìn)行處理。

在獲取到場(chǎng)景的圖像數(shù)據(jù)后，就可以對(duì)圖像進(jìn)行拼接與合成。PTGui軟件的使用比較簡(jiǎn)單，只需要將某個(gè)場(chǎng)景的一組圖像導(dǎo)入，進(jìn)行自動(dòng)對(duì)準(zhǔn)和拼接即可。完成拼接之后，再對(duì)圖片添加控制點(diǎn)，進(jìn)行手動(dòng)優(yōu)化調(diào)整，最終合成的升旗廣場(chǎng)全景圖如圖3所示：

圖3 升旗廣場(chǎng)合成全景圖

2 全景漫游系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

2.1 系統(tǒng)的功能需求分析

為了達(dá)到更好的瀏覽和體驗(yàn)效果，本系統(tǒng)應(yīng)該具有以下的主要功能[7]：

（1）全景展示

這是系統(tǒng)最核心的功能，系統(tǒng)應(yīng)該能完美展示各個(gè)場(chǎng)景的360°環(huán)繞效果。其中包括，能夠通過(guò)鼠標(biāo)拖動(dòng)視角的旋轉(zhuǎn)、控制放大縮小、移動(dòng)等基本圖形操作。

（2）校園漫游

由于全景系統(tǒng)是由若干個(gè)場(chǎng)景構(gòu)成，系統(tǒng)應(yīng)該具有交互功能，因此需要在場(chǎng)景的道路上加入熱點(diǎn)，即前進(jìn)或者移動(dòng)到下個(gè)場(chǎng)景，使得用戶能夠選擇感興趣的路線，提升用戶體驗(yàn)。

（3）場(chǎng)景選擇

用戶在系統(tǒng)中進(jìn)行切換時(shí)可能會(huì)出現(xiàn)場(chǎng)景的混亂，因此需要配備完整的場(chǎng)景選擇功能，使用戶能隨時(shí)切換到指定的場(chǎng)景。

其他方面，由于系統(tǒng)是基于Web瀏覽器，還應(yīng)該考慮兼容性，使主流瀏覽器都能夠兼容。

2.2 整體設(shè)計(jì)

全景漫游系統(tǒng)屬于單一功能的展示型網(wǎng)站，其功能主要體現(xiàn)在前端部分，應(yīng)強(qiáng)化Web頁(yè)面的顯示效果。本系統(tǒng)主要提供了場(chǎng)景展示、場(chǎng)景切換和導(dǎo)航功能，系統(tǒng)的前端采用HTML5和CSS3來(lái)進(jìn)行頁(yè)面布局，其中的一些新特性和功能，比如HTML多媒體、Canvas標(biāo)簽、CSS3動(dòng)畫(huà)，能使頁(yè)面有很好的呈現(xiàn)效果。在圖形渲染方面，系統(tǒng)采用了WebGL技術(shù)。這種技術(shù)允許在HTML頁(yè)面中，使用JavaScript增加OpenGL綁定，為指定的Canvas提供硬件3D加速渲染，借助系統(tǒng)的顯卡來(lái)渲染3D場(chǎng)景和模型。使用WebGL可以免去開(kāi)發(fā)網(wǎng)頁(yè)專用渲染插件，借助硬件加快瀏覽器的圖像渲染速度，更高效地創(chuàng)建復(fù)雜的顯示效果[8]。全景功能的實(shí)現(xiàn)則采用基于WebGL的JavaScript開(kāi)放組件three.js，利用three.js能夠完成全景圖片的360°環(huán)繞展示，支持使用鼠標(biāo)進(jìn)行拖拽、放大、縮小和旋轉(zhuǎn)等功能。

由于本系統(tǒng)不需要提供用戶的數(shù)據(jù)請(qǐng)求功能，所以后臺(tái)的功能較簡(jiǎn)單，主要包括處理客戶端的請(qǐng)求服務(wù)和數(shù)據(jù)庫(kù)的訪問(wèn)。服務(wù)器組件采用Apache Tomcat，數(shù)據(jù)層則采用MySQL數(shù)據(jù)庫(kù)。系統(tǒng)的總體結(jié)構(gòu)如圖4所示。

圖4 全景漫游系統(tǒng)框架圖

系統(tǒng)建設(shè)完成后，用戶使用Chrome、FireFox或IE等主流瀏覽器即可訪問(wèn)網(wǎng)站，訪問(wèn)時(shí)客戶端向后臺(tái)發(fā)送HTTP和Ajax請(qǐng)求，Tomcat根據(jù)請(qǐng)求從MySQL數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)，經(jīng)過(guò)處理返回給客戶端?？蛻舳说腤eb頁(yè)面就可以根據(jù)返回的數(shù)據(jù)在Canvas中加載渲染場(chǎng)景，調(diào)用基于WebGL的three.js中的方法來(lái)完成各種用戶操作。

2.3 關(guān)鍵代碼

（1）系統(tǒng)界面

前端頁(yè)面中場(chǎng)景展示組件使用