引 言

近年來，虛擬現(xiàn)實的應(yīng)用發(fā)展火熱，Web3D的相關(guān)技術(shù)也在不斷進步。從1996年 W3C制訂 VRML建模語言開始， 網(wǎng)頁三維圖形的運行機制得到了許多支持，包括 SUN公司的Java3D接口，Unity3D的WebPlayer以及Flash產(chǎn)品等，網(wǎng)頁3D的應(yīng)用越來越廣泛。結(jié)合互聯(lián)網(wǎng) 3D的發(fā)展趨勢，在樓房銷售的線上房型展示方面，我們運用WebGL技術(shù)開發(fā)并提供了虛擬看房功能，以此來減少客戶看房選房的不確定與不便?？蛻敉ㄟ^在瀏覽器上進行房屋模型的場景漫游，可以提前感受目標房源的室內(nèi)布局與各時段的采光效果，方便后續(xù)有針對性的訂房購房。

1 WebGL工作原理及其特點

1.1 系統(tǒng)概述

本文研究的虛擬看房應(yīng)用是售樓管理系統(tǒng)的部分功能， 該系統(tǒng)主要通過人員權(quán)限的分配來執(zhí)行客戶、銷售人員、管理員等不同對象的業(yè)務(wù)關(guān)系，并根據(jù)具體要求與邏輯操作對數(shù)據(jù)資料進行備份處理。售樓管理系統(tǒng)包括客戶接待模塊、業(yè)務(wù)處理模塊、系統(tǒng)管理模塊及數(shù)據(jù)庫模塊等，其中客戶接待模塊擁有公司新聞、樓盤走勢、房型介紹與訂購查詢等業(yè)務(wù)功能。系統(tǒng)的線上接待子模塊結(jié)構(gòu)如圖 1 所示。

1.2 WebGL工作原理

WebGL 是一種腳本層面的Web3D 繪圖標準， 無需任何瀏覽器插件，直接通過腳本編程在網(wǎng)頁上進行空間建模并制作出交互式 3D 動畫。WebGL 可調(diào)用Three.js、GLGE、SpiderGL、X3DOM 等多個函數(shù)庫，簡化了 3D 場景的分析與構(gòu)造。WebGL工作原理圖如圖 2 所示，它通過JavaScript 對OpenGL（統(tǒng)一的、跨平臺的圖形編程接口）的綁定，利用對HTML5 Canvas 網(wǎng)頁標準的支持來解析并繪制出服務(wù)器端傳輸?shù)臄?shù)據(jù)信息，借助系統(tǒng)顯卡加速圖形渲染以保證瀏覽器運行的圖形幀率。

1.3 WebGL的特點

WebGL 實際是HTML5 新標準的一部分，將逐步取代插件安裝與Flash 等網(wǎng)頁 3D 手段，弱化多平臺、多機制的不統(tǒng)一性所造成的技術(shù)障礙。WebGL 與幾種網(wǎng)頁 3D 技術(shù)的對比如表 1 所列。

2 應(yīng)用實例及性能分析

2.1 模型的建立

WebGL支持對導(dǎo)入的模型進行解 析， 我們可使用3dsMAX工具來進行房屋模型的搭建。3dsMAX不僅免費且具有強大的功能，在制作成本上擁有較高的性價比，每一個功能幾乎都可以找到多種途徑完成，使用起來十分靈活。這里主要采取兩種途徑實施建模：

(1) 多邊形直接建模。首先需設(shè)計好抽象的場景，提取數(shù) 據(jù)規(guī)格后用多邊形構(gòu)造初始模型，并添加光照、材質(zhì)等元素， 最后進行紋理貼圖工作。這種方法幾乎能完成任何模型的建 立，尤其是類似室內(nèi)建筑這樣的簡單場景。

 (2) 幾何面片建模。在規(guī)定好模型底面邊界與方位后，基 于細分網(wǎng)格擠壓出形狀，可以用很少的細節(jié)實現(xiàn)光滑的輪廓 形狀。其中，為了減少工作量可以先導(dǎo)入由 CAD 等造型軟件 制作好的平面網(wǎng)格圖，對其進行擠壓與法線翻轉(zhuǎn)等操作后，再 處理好材質(zhì)、紋理等細節(jié)方面的效果。室內(nèi)窗體建模示意圖 如圖 3 所示。

2.2 碰撞檢測 

室內(nèi)房型漫游主要是將畫面良好地展現(xiàn)在屏幕窗體中，我 們所看到的場景即模型中“相機”的視野景象。場景漫游時必 然會有相機移動并接觸到目標物體，如果不加以觸碰處理則會 造成相機穿墻而過等結(jié)果，這與實際效果大相徑庭。為了擁有 更加真實的場景體驗，必須對相機移動采用碰撞檢測。 

常見的碰撞檢測中會給目標加上一層“包圍盒”，在檢測 到包圍盒有交集時再分析幾何體的相交性，這樣有利于性能 上的低消耗。包圍盒的形式除圖4所示的三種之外，還有8-DOP 以及凸殼兩種對復(fù)雜形狀進行處理的類型，它們對目標對象的包裹程度更嚴密，碰撞質(zhì)量更精確。

室內(nèi)的漫游功能在碰撞精度上不需要較高的要求，考 慮到內(nèi)存使用與檢測效率等方面的因素，選擇“有向包圍盒 (OBB)”方式可以更好地滿足需求。圖中顯示的二維平面中示 意了包圍盒的檢測原理，可以在兩個包圍盒中間找到超平面， 而垂直于超平面的分離軸上的 AB 映射不相交必為分離。對于 三維場景中這種檢測方法可能會將并非同側(cè)的盒體視為相交， 因此需要對每個盒體面做出分離軸判斷。最后通過編程實現(xiàn) 對檢測到的碰撞做出響應(yīng)事件，合理控制相機的運動范圍。 WebGL 實現(xiàn)的室內(nèi)場景漫游效果如圖 5 所示。

2.3 性能分析 

WebGL 不僅擁有免插件的優(yōu)勢，其在 JS 的執(zhí)行效率與 場景烘焙上也表現(xiàn)良好。我們在不同瀏覽器的內(nèi)核支持情況下， 對復(fù)雜場景操作分別進行性能測試，最終得到動態(tài)場景的快 速烘焙效率 ( 單位 ：s) 對比如圖 6 所示?？梢钥闯?，F(xiàn)ireFox 與 Chrome 的運行效率綜合較好，而 IE 瀏覽器仍需要針對 JS 進行優(yōu)化。盡管如此，它們的圖形幀率都達到 60 FPS 左右， 基本不會表現(xiàn)出卡頓延遲等現(xiàn)象。

3 結(jié) 語

HTML5 標準對三維圖形的支持為網(wǎng)絡(luò)虛擬現(xiàn)實應(yīng)用提 供了方便，隨著不同的瀏覽器對 WebGL 的開放與統(tǒng)一， 其應(yīng)用范圍也會更加廣泛。我們可以在移動端實現(xiàn)更為 便捷的瀏覽操作，在模型中添加數(shù)據(jù)點來提示信息概要， 并設(shè)計出更優(yōu)化的加載引擎來完成更加復(fù)雜的圖形數(shù)據(jù)。