三維全景在實訓基地漫游系統中的應用研究

呂杰英

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

關鍵詞：虛擬漫游；全景圖；WebGL；Three.js

中圖分類號：G434 文獻標志碼：A 文章編號：1673-8454（2016）18-0078-03

一、引言

“互聯網+”是創新2.0下互聯網發展的新業態，是利用信息通信技術以及互聯網平臺，讓互聯網與傳統行業進行深度融合，創造新的發展生態[1]。在“互聯網+”的各個領域中，最基礎、發展最快的就是Web的應用，人們不再滿足于二維平面的網絡體驗，而是希望在訪問網頁的過程中具有更鮮活的場景和更真實的感受。網頁正逐漸向交互式三維模式發展，其中全景漫游技術已逐漸在旅游景點虛擬漫游、房產建筑實景展示、文化教育場所三維呈現等領域得到應用。

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

二、 關鍵技術

1.HTML5標準及canvas標簽

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

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

2.3D繪圖標準WebGL

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

3.Three.js框架

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

三、漫游系統的構建

1.全景圖獲取

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

（1）全景圖的拍攝

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

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

（2）全景圖的拼接

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

2.三維環境的設置

（1）鏡頭設置

最終實現的裝潢實訓工場全景漫游如圖3所示。

四、結束語

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

參考文獻：

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

[2]方強.基于WebGL 的3D圖形引擎設計與實現[D].合肥：安徽大學，2013.

[3]百度百科.”OpenGL ES” [DB/OL].http：//baike.baidu.com/link？url=P0fvVPhRHIQ4Z7Af8w1YyYXa4IePYK45dQ4XL3iCD012kn-AE5Tm2lLyoLH5Iq6ut FGM2jFGM8cwoIecEv9s3a.

[4]許虎，聶云峰，舒堅.基于中間件的瓦片地圖服務設計與實現[J].地球信息科學學報，2010（4）：562-567.

[5]劉愛華，韓勇等.基于WebGL技術的網絡三維可視化研究與實現[J].地理空間信息，2012（5）：79-81.

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

（編輯：魯利瑞）

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

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

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

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

五、思考與建議

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

1.建立碎片化學習體系是基礎

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

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

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

3.檢驗和輸出是完善碎片化學習知識體系最關鍵的環節

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

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

參考文獻：

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

[2]王竹立.零存整?。壕W絡時代的學習策略[J].遠程教育雜志，2013（3）.

[3]朱學偉，朱昱，徐小麗.基于碎片化應用的微型學習研究[J].現代教育技術，2011（12）.

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

[5]柳玉婷.微信公眾平臺在移動學習中的應用研究[J].軟件導刊，2013（10）.

[6]張志輝，彭立，王宏艷，公海霞.基于微信的非正式學習的應用研究[J].軟件導刊.2015（7）.（編輯：郭桂真）