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

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

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

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

0 引 言

近年來，虛擬現(xiàn)實的應(yīng)用發(fā)展火熱，Web3D的相關(guān)技術(shù)也在不斷進(jìn)步。從1996年W3C制訂VRML建模語言開始，網(wǎng)頁三維圖形的運行機制得到了許多支持，包括SUN公司的Java3D接口，Unity3D的Web Player以及Flash產(chǎn)品等，網(wǎng)頁3D的應(yīng)用越來越廣泛。結(jié)合互聯(lián)網(wǎng)3D的發(fā)展趨勢，在樓房銷售的線上房型展示方面，我們運用WebGL技術(shù)開發(fā)并提供了虛擬看房功能，以此來減少客戶看房選房的不確定與不便?？蛻敉ㄟ^在瀏覽器上進(jìn)行房屋模型的場景漫游，可以提前感受目標(biāo)房源的室內(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ù)資料進(jìn)行備份處理。售樓管理系統(tǒng)包括客戶接待模塊、業(yè)務(wù)處理模塊、系統(tǒng)管理模塊及數(shù)據(jù)庫模塊等，其中客戶接待模塊擁有公司新聞、樓盤走勢、房型介紹與訂購查詢等業(yè)務(wù)功能。系統(tǒng)的線上接待子模塊結(jié)構(gòu)如圖1所示。

1.2 WebGL工作原理

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

1.3 WebGL的特點

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

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

2.1 模型的建立

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

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

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

2.2 碰撞檢測

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

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

的包裹程度更嚴(yán)密，碰撞質(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ù)雜場景操作分別進(jìn)行性能測試，最終得到動態(tài)場景的快速烘焙效率（單位：s）對比如圖6所示?？梢钥闯觯現(xiàn)ireFox與Chrome的運行效率綜合較好，而IE瀏覽器仍需要針對JS進(jìn)行優(yōu)化。盡管如此，它們的圖形幀率都達(dá)到60 FPS左右，基本不會表現(xiàn)出卡頓延遲等現(xiàn)象。

3 結(jié) 語

HTML5標(biāo)準(zhǔn)對三維圖形的支持為網(wǎng)絡(luò)虛擬現(xiàn)實應(yīng)用提供了方便，隨著不同的瀏覽器對WebGL的開放與統(tǒng)一，其應(yīng)用范圍也會更加廣泛。我們可以在移動端實現(xiàn)更為便捷的瀏覽操作，在模型中添加數(shù)據(jù)點來提示信息概要，并設(shè)計出更優(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)上博覽會研究[D].上海：復(fù)旦大學(xué)， 2011.

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

[4]朱麗萍，李洪奇，杜萌萌，等.基于WebGL的三維WebGIS場景實現(xiàn)[J].計算機工程與設(shè)計，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ù)庫交互行為驗證[J].計算機工程，2012，38（16）： 52-56.

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