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

呂杰英

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

關(guān)鍵詞：虛擬漫游；全景圖；WebGL；Three.js

中圖分類號(hào)：G434 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1673-8454（2016）18-0078-03

一、引言

“互聯(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)頁的過程中具有更鮮活的場景和更真實(shí)的感受。網(wǎng)頁正逐漸向交互式三維模式發(fā)展，其中全景漫游技術(shù)已逐漸在旅游景點(diǎn)虛擬漫游、房產(chǎn)建筑實(shí)景展示、文化教育場所三維呈現(xiàn)等領(lǐng)域得到應(yīng)用。

但是，早期的網(wǎng)頁三維技術(shù)如Java Applet并未成熟，不僅編程接口復(fù)雜，需要安裝相應(yīng)的渲染插件，而且創(chuàng)建的頁面交互性能簡單，畫面質(zhì)量相對(duì)粗糙，其主要原因就在于Java Applet在進(jìn)行圖形渲染時(shí)，并沒有直接利用到圖形硬件本身的加速功能[2]。而3D繪圖標(biāo)準(zhǔn)WebGL則采用JavaScript腳本語言進(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è)備上的加載提供了新的支持。簡單說來，HTML5其實(shí)可以看成是HTML、CSS、JavaScript等技術(shù)的組合體，該標(biāo)準(zhǔn)在原有的基礎(chǔ)上，增加了本地存儲(chǔ)、設(shè)備兼容、三維圖形及特效等新的特性。本文主要利用的是canvas標(biāo)簽，它為網(wǎng)頁提供了更絢麗的視覺體驗(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)頁制作所需的專用插件渲染，大大提高了不同終端設(shè)備的3D圖形渲染速度，甚至可以用來設(shè)計(jì)3D網(wǎng)頁游戲等。目前已有多種基于WebGL技術(shù)的JavaScript庫被應(yīng)用在3D圖形創(chuàng)建中，如SceneJS、PhiloGL、Babylon.js、Three.js等，本文主要應(yīng)用Three.js開發(fā)框架。

3.Three.js框架

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

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

1.全景圖獲取

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

（1）全景圖的拍攝

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

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

（2）全景圖的拼接

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

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

（1）鏡頭設(shè)置

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

四、結(jié)束語

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

參考文獻(xiàn)：

[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=P0fvVPhRHIQ4Z7Af8w1YyYXa4IePYK45dQ4XL3iCD012kn-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）.

（編輯：魯利瑞）

2.基于微信公眾平臺(tái)的碎片化知識(shí)針對(duì)性強(qiáng)，但是卻缺乏適用性

微信公眾平臺(tái)根據(jù)我們的興趣推送了相應(yīng)的學(xué)習(xí)內(nèi)容之后，這種內(nèi)容很符合我們的需求，但是卻缺乏實(shí)際情境的驗(yàn)證。它僅僅是一種問題的單一解決方法，如果遷移到其他情境中就無法適用。比如：我們?cè)趯W(xué)習(xí)操作性的知識(shí)時(shí)，它是必須要結(jié)合實(shí)踐進(jìn)行的，而碎片化知識(shí)只能知道問題解決的方法，卻不知道問題的原因，在實(shí)際解決時(shí)，我們又不知道怎樣辦。

3.微信公眾平臺(tái)缺乏多樣的交互

雖然微信公眾平臺(tái)可以根據(jù)關(guān)鍵詞進(jìn)行回復(fù)，但是這種回復(fù)是不是學(xué)習(xí)者想要的答案或者對(duì)學(xué)習(xí)者有沒有用處，這些都是未知的。另一方面，微信公眾號(hào)在推送了相應(yīng)的學(xué)習(xí)內(nèi)容之后，學(xué)習(xí)者是否有效地閱讀，或者學(xué)習(xí)者在閱讀了相應(yīng)的學(xué)習(xí)內(nèi)容之后，無法直接進(jìn)行提問，也得不到針對(duì)性的解答。

五、思考與建議

微信公眾平臺(tái)在為碎片化學(xué)習(xí)提供支持之外，也存在一些問題。但是并不能因?yàn)榇嬖趩栴}我們就要拒絕這些碎片化知識(shí)。因此怎樣把這些碎片化知識(shí)建構(gòu)到自己的知識(shí)體系，與已有知識(shí)之間建立聯(lián)系就顯得至關(guān)重要。

1.建立碎片化學(xué)習(xí)體系是基礎(chǔ)

我們?cè)诮邮芩槠R(shí)時(shí)除了要系統(tǒng)地學(xué)習(xí)、思考、分析之外，最重要的是找到一個(gè)自己感興趣的知識(shí)點(diǎn)，以此為根節(jié)點(diǎn)，不斷擴(kuò)充其分支。也就是說要建立一個(gè)系統(tǒng)的知識(shí)體系。或者將這些知識(shí)點(diǎn)納入到自己已有的知識(shí)體系中，找到它們之間的聯(lián)系。

2.“思維導(dǎo)圖”就是一種將放射性碎片化思考具體化的方法

研究表明，思維導(dǎo)圖的建立有利于人們對(duì)其思考的問題進(jìn)行全方位和系統(tǒng)的描述與分析。同時(shí)它又是靈活的，個(gè)性化的，具有無限的發(fā)展性的，這些特點(diǎn)非常符合碎片化學(xué)習(xí)的特征，因此對(duì)于碎片化思考具體化它是一個(gè)很有效的方法，同時(shí)，它有助于提高學(xué)習(xí)者的學(xué)習(xí)能力，有助于一個(gè)學(xué)習(xí)者真正實(shí)現(xiàn)終身學(xué)習(xí)的目標(biāo)?，F(xiàn)在隨著移動(dòng)技術(shù)的發(fā)展，手機(jī)端也有很多使用方便的軟件，比如：極品思維導(dǎo)圖、思維簡圖等等，它們可以結(jié)合微信公眾號(hào)進(jìn)行使用。

3.檢驗(yàn)和輸出是完善碎片化學(xué)習(xí)知識(shí)體系最關(guān)鍵的環(huán)節(jié)

在建立相應(yīng)的知識(shí)體系之后，并不是所有的碎片化知識(shí)都能納入其中，我們需要對(duì)這些知識(shí)進(jìn)行檢驗(yàn)，也就是說，我們要弄清楚它與已有知識(shí)之間的聯(lián)系，如果聯(lián)系不大或者它根本沒有價(jià)值，我們要果斷舍棄。而對(duì)于輸出，即碎片化知識(shí)的鞏固和遷移，其中最簡單的方法就是，可以將碎片化知識(shí)進(jìn)行轉(zhuǎn)述給其他人，或者將借助一些外部工具做筆記，建立思維導(dǎo)圖等等。

碎片化學(xué)習(xí)作為非正式學(xué)習(xí)的一種，它不僅僅只可以通過微信公眾平臺(tái)獲得，還有很多其他途徑，但是它的特點(diǎn)和利弊都普遍存在，我們一定要理性辯證地思考它的利弊，合理檢驗(yàn)與輸出，從而真正實(shí)現(xiàn)隨時(shí)隨地的碎片化學(xué)習(xí)。

參考文獻(xiàn)：

[1]顧小清.超越碎片化學(xué)習(xí)——語義圖示與深度學(xué)習(xí)[J].中國電化教育.2015（3）.

[2]王竹立.零存整取：網(wǎng)絡(luò)時(shí)代的學(xué)習(xí)策略[J].遠(yuǎn)程教育雜志，2013（3）.

[3]朱學(xué)偉，朱昱，徐小麗.基于碎片化應(yīng)用的微型學(xué)習(xí)研究[J].現(xiàn)代教育技術(shù)，2011（12）.

[4]王承博，李小平，趙豐年，張琳.大數(shù)據(jù)時(shí)代碎片化學(xué)習(xí)研究[J].電化教育研究，2015（10）.

[5]柳玉婷.微信公眾平臺(tái)在移動(dòng)學(xué)習(xí)中的應(yīng)用研究[J].軟件導(dǎo)刊，2013（10）.

[6]張志輝，彭立，王宏艷，公海霞.基于微信的非正式學(xué)習(xí)的應(yīng)用研究[J].軟件導(dǎo)刊.2015（7）.（編輯：郭桂真）