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

陳勇++張燦燦++劉洲++黃鎮(zhèn)++卞夢(mèng)云++陳琪++徐玲芳++黃兆祥

摘 要：文章旨在為B/S售樓系統(tǒng)中提供更全面、更具針對(duì)性的房型展示，我們?cè)诳蛻艚哟K上添加了室內(nèi)場(chǎng)景漫游功能，通過虛擬看房來加強(qiáng)客戶對(duì)房型的了解，與一般的平面圖或定點(diǎn)的360度環(huán)視相比，擁有無死角、采光變化等優(yōu)勢(shì)。采用WebGL進(jìn)行網(wǎng)頁3D的開發(fā)，以做到高效率且無插件的圖形渲染，因而無需下載運(yùn)行環(huán)境即可成功顯示，不僅為普通客戶提供了良好的體驗(yàn)，還減少了開發(fā)過程中系統(tǒng)功能設(shè)計(jì)上的技術(shù)阻礙。

關(guān)鍵詞：售樓系統(tǒng)；虛擬看房；網(wǎng)頁3D；圖形渲染

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2095-1302（2016）11-00-02

0 引 言

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

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

1.1 系統(tǒng)概述

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

1.2 WebGL工作原理

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

1.3 WebGL的特點(diǎn)

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

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

2.1 模型的建立

WebGL支持對(duì)導(dǎo)入的模型進(jìn)行解析，我們可使用3dsMAX工具來進(jìn)行房屋模型的搭建。3dsMAX不僅免費(fèi)且具有強(qiáng)大的功能，在制作成本上擁有較高的性價(jià)比，每一個(gè)功能幾乎都可以找到多種途徑完成，使用起來十分靈活。這里主要采取兩種途徑實(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)房型漫游主要是將畫面良好地展現(xiàn)在屏幕窗體中，我們所看到的場(chǎng)景即模型中“相機(jī)”的視野景象。場(chǎng)景漫游時(shí)必然會(huì)有相機(jī)移動(dòng)并接觸到目標(biāo)物體，如果不加以觸碰處理則會(huì)造成相機(jī)穿墻而過等結(jié)果，這與實(shí)際效果大相徑庭。為了擁有更加真實(shí)的場(chǎng)景體驗(yàn)，必須對(duì)相機(jī)移動(dòng)采用碰撞檢測(cè)。

常見的碰撞檢測(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è)盒體面做出分離軸判斷。最后通過編程實(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é) 語

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

參考文獻(xiàn)

[1]Kouichi Matsuda， Rodger Lea. WebGL Programming Guide： Interactive 3D Graphics Programming with WebGL[M]. New Jersey： Addison-Wesley， 2013： 93-105.

[2]梁建軍.基于網(wǎng)頁三維技術(shù)的網(wǎng)上博覽會(huì)研究[D].上海：復(fù)旦大學(xué)， 2011.

[3]寧靜.基于WebGL實(shí)物交互技術(shù)及其實(shí)現(xiàn)的研究[D].武漢：華中科技大學(xué)，2014.

[4]朱麗萍，李洪奇，杜萌萌，等.基于WebGL的三維WebGIS場(chǎng)景實(shí)現(xiàn)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2014，12（10）：3645-3650.

[5]Andreas Anyuru.Professional WebGL Programming： Developing 3D Graphics for the Web[M]. New York： Wrox， 2012 ： 303-360.

[6]劉.基于Web的三維立體可視化房地產(chǎn)銷售管理信息系統(tǒng)[D].天津：天津大學(xué)， 2014.

[7]孫茂華，繆淮扣，高洪皓.Web應(yīng)用中數(shù)據(jù)庫交互行為驗(yàn)證[J].計(jì)算機(jī)工程，2012，38（16）： 52-56.

[8]Christer Ericson. Real-Time Collision Detection[M]. Florida： CRC Press， 2005 ： 553-575.