呂杰英

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

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

中圖分類號：G434 文獻標(biāo)志碼：A 文章編號：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)平臺，讓互聯(lián)網(wǎng)與傳統(tǒng)行業(yè)進行深度融合，創(chuàng)造新的發(fā)展生態(tài)[1]。在“互聯(lián)網(wǎng)+”的各個領(lǐng)域中，最基礎(chǔ)、發(fā)展最快的就是Web的應(yīng)用，人們不再滿足于二維平面的網(wǎng)絡(luò)體驗，而是希望在訪問網(wǎng)頁的過程中具有更鮮活的場景和更真實的感受。網(wǎng)頁正逐漸向交互式三維模式發(fā)展，其中全景漫游技術(shù)已逐漸在旅游景點虛擬漫游、房產(chǎn)建筑實景展示、文化教育場所三維呈現(xiàn)等領(lǐng)域得到應(yīng)用。

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

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

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

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

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

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

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

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

1.全景圖獲取

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

（1）全景圖的拍攝

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

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

（2）全景圖的拼接

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

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

（1）鏡頭設(shè)置

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

四、結(jié)束語

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

參考文獻：

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

[2]方強.基于WebGL 的3D圖形引擎設(shè)計與實現(xiàn)[D].合肥：安徽大學(xué)，2013.

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

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

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

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

（編輯：魯利瑞）

2.基于微信公眾平臺的碎片化知識針對性強，但是卻缺乏適用性

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

3.微信公眾平臺缺乏多樣的交互

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

五、思考與建議

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

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

我們在接受碎片化知識時除了要系統(tǒng)地學(xué)習(xí)、思考、分析之外，最重要的是找到一個自己感興趣的知識點，以此為根節(jié)點，不斷擴充其分支。也就是說要建立一個系統(tǒng)的知識體系?；蛘邔⑦@些知識點納入到自己已有的知識體系中，找到它們之間的聯(lián)系。

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

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

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

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

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

參考文獻：

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

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

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

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

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

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