WebGL在網(wǎng)頁(yè)室內(nèi)房型展示中的應(yīng)用

引 言

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

1 WebGL工作原理及其特點(diǎn)

1.1 系統(tǒng)概述

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

1.2 WebGL工作原理

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

1.3 WebGL的特點(diǎn)

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

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

2.1 模型的建立

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

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

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

2.2 碰撞檢測(cè) 

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

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

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

2.3 性能分析 

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

3 結(jié) 語(yǔ)

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