三維全景在實(shí)訓(xùn)基地漫游系統(tǒng)中的應(yīng)用研究

呂杰英（杭州輕工技師學(xué)院，浙江杭州310005）

三維全景在實(shí)訓(xùn)基地漫游系統(tǒng)中的應(yīng)用研究

呂杰英
（杭州輕工技師學(xué)院，浙江杭州310005）

全景漫游技術(shù)是一種基于圖像繪制的虛擬現(xiàn)實(shí)技術(shù)，在“互聯(lián)網(wǎng)+”的環(huán)境下，其良好的交互性和沉浸性，已逐漸在旅游景點(diǎn)虛擬漫游、房產(chǎn)建筑實(shí)景展示、文化教育場(chǎng)所三維呈現(xiàn)等領(lǐng)域得到應(yīng)用。文章以實(shí)現(xiàn)杭州輕工技師學(xué)院裝潢實(shí)訓(xùn)工場(chǎng)的全景漫游為例，介紹在全景圖的基礎(chǔ)上，結(jié)合Web標(biāo)準(zhǔn)HTML5和3D繪圖標(biāo)準(zhǔn)WebGL，使用第三方庫(kù)文件Three.js，達(dá)到場(chǎng)景水平和垂直方向的自由轉(zhuǎn)換，使用戶在網(wǎng)上就能觀看實(shí)訓(xùn)基地的全景效果，具有身臨其境的感覺。

虛擬漫游；全景圖；WebGL；Three.js

一、引言

“互聯(lián)網(wǎng)+”是創(chuàng)新2.0下互聯(lián)網(wǎng)發(fā)展的新業(yè)態(tài)，是利用信息通信技術(shù)以及互聯(lián)網(wǎng)平臺(tái)，讓互聯(lián)網(wǎng)與傳統(tǒng)行業(yè)進(jìn)行深度融合，創(chuàng)造新的發(fā)展生態(tài)［1］。在“互聯(lián)網(wǎng)+”的各個(gè)領(lǐng)域中，最基礎(chǔ)、發(fā)展最快的就是Web的應(yīng)用，人們不再滿足于二維平面的網(wǎng)絡(luò)體驗(yàn)，而是希望在訪問網(wǎng)頁(yè)的過程中具有更鮮活的場(chǎng)景和更真實(shí)的感受。網(wǎng)頁(yè)正逐漸向交互式三維模式發(fā)展，其中全景漫游技術(shù)已逐漸在旅游景點(diǎn)虛擬漫游、房產(chǎn)建筑實(shí)景展示、文化教育場(chǎng)所三維呈現(xiàn)等領(lǐng)域得到應(yīng)用。

但是，早期的網(wǎng)頁(yè)三維技術(shù)如Java Applet并未成熟，不僅編程接口復(fù)雜，需要安裝相應(yīng)的渲染插件，而且創(chuàng)建的頁(yè)面交互性能簡(jiǎn)單，畫面質(zhì)量相對(duì)粗糙，其主要原因就在于Java Applet在進(jìn)行圖形渲染時(shí)，并沒有直接利用到圖形硬件本身的加速功能［2］。而3D繪圖標(biāo)準(zhǔn)WebGL則采用JavaScript腳本語(yǔ)言進(jìn)行友好的交互式三維圖形的描述，較好地避免了在瀏覽器上安裝相應(yīng)插件的步驟。同時(shí)，通過統(tǒng)一的跨平臺(tái)圖形程序接口OpenGL ES2.0，實(shí)現(xiàn)了利用底層圖形硬件進(jìn)行圖形渲染。

二、關(guān)鍵技術(shù)

1.HTML5標(biāo)準(zhǔn)及canvas標(biāo)簽

HTML5標(biāo)準(zhǔn)規(guī)范的出現(xiàn)，為多媒體在各種終端設(shè)備上的加載提供了新的支持。簡(jiǎn)單說來，HTML5其實(shí)可以看成是HTML、CSS、JavaScript等技術(shù)的組合體，該標(biāo)準(zhǔn)在原有的基礎(chǔ)上，增加了本地存儲(chǔ)、設(shè)備兼容、三維圖形及特效等新的特性。本文主要利用的是canvas標(biāo)簽，它為網(wǎng)頁(yè)提供了更絢麗的視覺體驗(yàn)，具備直接在瀏覽器上繪制矢量圖的能力。

Canvas就像是一個(gè)畫板，所有的繪制工作可以在JavaScript內(nèi)部完成，通過id的調(diào)用來尋找canvas元素，從而創(chuàng)建 context對(duì)象。context對(duì)象是內(nèi)建的HTML5對(duì)象，擁有多種繪制路徑、矩形、圓形、字符和插入圖像的方法。

2.3D繪圖標(biāo)準(zhǔn)WebGL

WebGL是一種3D繪圖標(biāo)準(zhǔn)，它實(shí)現(xiàn)了將JavaScript 和OpenGL ES 2.0有效結(jié)合在一起，通過增加OpenGL ES 2.0的JavaScript綁定，為HTML5中的canvas標(biāo)簽提供底層硬件的3D加速渲染，這樣開發(fā)人員就可以直接通過系統(tǒng)顯卡在普通瀏覽器中展示全景漫游，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化［3］。由此可見，WebGL標(biāo)準(zhǔn)脫離了傳統(tǒng)三維網(wǎng)頁(yè)制作所需的專用插件渲染，大大提高了不同終端設(shè)備的3D圖形渲染速度，甚至可以用來設(shè)計(jì)3D網(wǎng)頁(yè)游戲等。目前已有多種基于WebGL技術(shù)的JavaScript庫(kù)被應(yīng)用在3D圖形創(chuàng)建中，如SceneJS、PhiloGL、Babylon.js、Three.js等，本文主要應(yīng)用Three.js開發(fā)框架。

3.Three.js框架

Three.js是JavaScript編寫的WebGL第三方庫(kù)，依據(jù)WebGL規(guī)范，對(duì)底層的圖形接口進(jìn)行封裝。它提供了一個(gè)JavaScript API，可以在沒有插件的情況下進(jìn)行2D/ 3D硬件加速渲染，減輕了開發(fā)者的負(fù)擔(dān)并加快了開發(fā)速度。同時(shí)，Three.js還支持多種渲染器（renderer）進(jìn)行場(chǎng)景制作，能夠提供點(diǎn)、線、面、向量、矩陣等一系列三維創(chuàng)建時(shí)所需的基本元素，并可以便捷地將建鏡頭（cameras）、光線（lights）、物體（objects）等對(duì)象添加到場(chǎng)景（scene）中［4］。Three.js在全景漫游瀏覽時(shí)，與內(nèi)部主要元素之間的關(guān)系如圖1所示。

圖1　全景漫游內(nèi)部元素聯(lián)系圖

三、漫游系統(tǒng)的構(gòu)建

1.全景圖獲取

在網(wǎng)頁(yè)上展示虛擬漫游的效果時(shí)，一般有3D建模和全景攝影兩種方式。由于全景圖片直接由實(shí)物拍攝得到，因此，只要做好前期拍攝和后期圖片處理，就能得到比建模更真實(shí)的視覺感受。本文所得到的虛擬漫游，就是在全景圖的基礎(chǔ)上實(shí)現(xiàn)的。

（1）全景圖的拍攝

由于全景拍攝需要捕捉場(chǎng)景360°范圍內(nèi)的信息，因此要采用廣角鏡頭來拍攝，甚至可以使用魚眼鏡頭。但由于魚眼鏡頭鏡片結(jié)構(gòu)復(fù)雜，邊緣和中央進(jìn)光存在差異，對(duì)使用者的技術(shù)水平要求比較高，因此這里所采用的是一般的廣角數(shù)碼相機(jī)，同時(shí)配合三腳架和云臺(tái)，以保證拍攝時(shí)位置的水平。在每個(gè)場(chǎng)景的拍攝中，將云臺(tái)設(shè)定為水平方向每60°為一個(gè)結(jié)點(diǎn)，垂直方向每30°為一個(gè)結(jié)點(diǎn)，以保證所得的照片中有至少20％的重疊量，一共拍攝3組，每組6張照片。

而對(duì)于環(huán)境的要求則是能見度高、光線充足，避免出現(xiàn)一亮一暗的場(chǎng)景。在進(jìn)行室內(nèi)拍攝時(shí)，一般以內(nèi)部光照為主，如果室外光線過于明亮，就可能導(dǎo)致圖中出現(xiàn)較多過暗的角落，影響拼接效果。全景拍攝需要表現(xiàn)場(chǎng)景的全局信息，考慮到在觀看時(shí)需要旋轉(zhuǎn)場(chǎng)景，因此拍攝點(diǎn)一般選在場(chǎng)景的幾何中心或某個(gè)較高位置，同時(shí)避免在拍攝時(shí)鏡頭里包含運(yùn)動(dòng)物體。

（2）全景圖的拼接

在得到場(chǎng)景圖后，可以使用Photoshop、PhotoImpact、Fireworks等圖像處理軟件對(duì)它們進(jìn)行去噪、雜色處理和色彩色調(diào)等相關(guān)調(diào)整，使得同一場(chǎng)景的曝光程度和色彩濃度基本保持一致。本文所采用的圖像處理軟件是Photoshop CS3，同時(shí)該軟件能智能化地完成全景圖的拼接，步驟依次為選擇文件菜單、自動(dòng)、photomerge（照片拼合）。最后使用變形工具和裁剪工具把完整部分切割出來，裝潢實(shí)訓(xùn)工場(chǎng)的全景圖如圖2所示。

圖2　裝潢實(shí)訓(xùn)工場(chǎng)全景圖

2.三維環(huán)境的設(shè)置

（1）鏡頭設(shè)置

Three.js提供了透視鏡頭和正交鏡頭這兩種鏡頭類型，全景漫游的目的是強(qiáng)調(diào)真實(shí)感，具有較好的交互性和沉浸性，因此采用透視投影鏡頭。主要代碼設(shè)置如下：

//設(shè)置透視投影鏡頭，縱橫比為Window的縱橫比，最近視角1，最遠(yuǎn)視角1000

//計(jì)算移動(dòng)鏡頭

（2）場(chǎng)景設(shè)置

三維場(chǎng)景使用THREE.Scene（）來設(shè)置；主要代碼設(shè)置如下：

//創(chuàng)建一個(gè)場(chǎng)景

scene=new THREE.Scene（）；

//將全景圖放到場(chǎng)景中并做成圓環(huán)

//設(shè)置縮放為-1

（3）渲染器設(shè)置

為實(shí)現(xiàn)流暢的預(yù)覽效果，本文采用Three.js庫(kù)中渲染效果較好的WebGLRenderer來實(shí)現(xiàn)圖形渲染。這里就結(jié)合了HTML5中的canvas標(biāo)簽，主要代碼設(shè)置如下：

//渲染器設(shè)置，動(dòng)態(tài)生成canvas元素設(shè)定縱橫比

（4）鼠標(biāo)操作設(shè)置

為實(shí)現(xiàn)更友好的交互效果，可以選擇用鼠標(biāo)進(jìn)行場(chǎng)景的相關(guān)操作，如按住鼠標(biāo)左鍵進(jìn)行鏡頭的平移或速度控制等。分別為鼠標(biāo)經(jīng)過、鼠標(biāo)按下、鼠標(biāo)放松和鼠標(biāo)滾輪4種事件編寫相應(yīng)的觸發(fā)程序，主要代碼設(shè)置如下：

//添加事件，用于用戶可以通過鼠標(biāo)移動(dòng)來觀看四周環(huán)境

//修改狀態(tài)為按下，這時(shí)候觸發(fā)move事件才能拖動(dòng)屏幕

isUserInteracting=true；

//將當(dāng)前鼠標(biāo)在頁(yè)面內(nèi)的坐標(biāo)賦值給變量

onPointerDownPointerX=event.clientX；

onPointerDownPointerY=event.clientY；

//獲取計(jì)算縮放

onPointerDownLon=lon；

onPointerDownLat=lat；

｝

//鼠標(biāo)移動(dòng)事件

function onDocumentMouseMove（event）｛

//判斷鼠標(biāo)當(dāng)前是否按下，如果按下才可以拖動(dòng)

if（isUserInteracting）｛

//通過相關(guān)計(jì)算，將計(jì)算結(jié)果賦值給lon和lat

//設(shè)置鼠標(biāo)按鍵松開事件

function onDocumentMouseUp（event）｛

//修改狀態(tài)為松開，這時(shí)候無法觸發(fā)move事件

最終實(shí)現(xiàn)的裝潢實(shí)訓(xùn)工場(chǎng)全景漫游如圖3所示。

圖3　裝潢實(shí)訓(xùn)工場(chǎng)全景漫游的實(shí)現(xiàn)

四、結(jié)束語(yǔ)

本文介紹了基于裝潢實(shí)訓(xùn)工場(chǎng)全景圖的虛擬漫游實(shí)現(xiàn)技術(shù)，采用HTML5和WebGL相結(jié)合的模式，創(chuàng)建出具有良好交互性和沉浸性的三維網(wǎng)頁(yè)效果，提供了較二維網(wǎng)頁(yè)更友好的用戶體驗(yàn)和形象生動(dòng)的畫面效果。WebGL是新一代Web3D技術(shù)，也是未來三維網(wǎng)頁(yè)開發(fā)的核心技術(shù)，加之與規(guī)范的Web標(biāo)準(zhǔn)HTML5的緊密配合，必然成為三維網(wǎng)頁(yè)應(yīng)用的趨勢(shì)。同時(shí)對(duì)第三方庫(kù)文件Three.Js進(jìn)行研究分析，實(shí)現(xiàn)了全景圖的仿真視角和相關(guān)鼠標(biāo)事件的操作，具有較強(qiáng)的應(yīng)用價(jià)值。

［1］百度百科.“互聯(lián)網(wǎng)+”［DB/OL］.http：//baike.baidu. com/link？url=z3Tj1V657OaXjPEIhtH1wXaUC7_sfIz 6udmtmknF_XSljkJpo_YZkq674SElGIhISv3-RHn9h7 lTZGD85xE-J_.

［2］方強(qiáng).基于WebGL的3D圖形引擎設(shè)計(jì)與實(shí)現(xiàn)［D］.合肥：安徽大學(xué)，2013.

［3］百度百科.”O(jiān)penGL ES”［DB/OL］.http：//baike. baidu.com/link？url=P0fvVPhRHIQ4Z7Af8w1YyYX-a4IePYK45dQ4XL3iCD012kn-AE5Tm2lLyoLH5Iq6ut FGM2jFGM8cwoIecEv9s3a.

［4］許虎，聶云峰，舒堅(jiān).基于中間件的瓦片地圖服務(wù)設(shè)計(jì)與實(shí)現(xiàn)［J］.地球信息科學(xué)學(xué)報(bào)，2010（4）：562-567．

［5］劉愛華，韓勇等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實(shí)現(xiàn)［J］.地理空間信息，2012（5）：79-81.

［6］周輝，程陳，任海軍，王丹寧等.基于HTML5的全景圖展示［J］.微型機(jī)與應(yīng)用，2012（20）.

（編輯：魯利瑞）

G434

A

1673-8454（2016）18-0078-03