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

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

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

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

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

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

一、引言

“互聯網+”是創新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　全景漫游內部元素聯系圖

三、漫游系統的構建

1.全景圖獲取

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

（1）全景圖的拍攝

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

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

（2）全景圖的拼接

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

圖2　裝潢實訓工場全景圖

2.三維環境的設置

（1）鏡頭設置

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

//設置透視投影鏡頭，縱橫比為Window的縱橫比，最近視角1，最遠視角1000

//計算移動鏡頭

（2）場景設置

三維場景使用THREE.Scene（）來設置；主要代碼設置如下：

//創建一個場景

scene=new THREE.Scene（）；

//將全景圖放到場景中并做成圓環

//設置縮放為-1

（3）渲染器設置

為實現流暢的預覽效果，本文采用Three.js庫中渲染效果較好的WebGLRenderer來實現圖形渲染。這里就結合了HTML5中的canvas標簽，主要代碼設置如下：

//渲染器設置，動態生成canvas元素設定縱橫比

（4）鼠標操作設置

為實現更友好的交互效果，可以選擇用鼠標進行場景的相關操作，如按住鼠標左鍵進行鏡頭的平移或速度控制等。分別為鼠標經過、鼠標按下、鼠標放松和鼠標滾輪4種事件編寫相應的觸發程序，主要代碼設置如下：

//添加事件，用于用戶可以通過鼠標移動來觀看四周環境

//修改狀態為按下，這時候觸發move事件才能拖動屏幕

isUserInteracting=true；

//將當前鼠標在頁面內的坐標賦值給變量

onPointerDownPointerX=event.clientX；

onPointerDownPointerY=event.clientY；

//獲取計算縮放

onPointerDownLon=lon；

onPointerDownLat=lat；

｝

//鼠標移動事件

function onDocumentMouseMove（event）｛

//判斷鼠標當前是否按下，如果按下才可以拖動

if（isUserInteracting）｛

//通過相關計算，將計算結果賦值給lon和lat

//設置鼠標按鍵松開事件

function onDocumentMouseUp（event）｛

//修改狀態為松開，這時候無法觸發move事件

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

圖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=P0fvVPhRHIQ4Z7Af8w1YyYX-a4IePYK45dQ4XL3iCD012kn-AE5Tm2lLyoLH5Iq6ut FGM2jFGM8cwoIecEv9s3a.

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

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

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

（編輯：魯利瑞）

G434

A

1673-8454（2016）18-0078-03