WebGL在網頁室內房型展示中的應用

陳勇++張燦燦++劉洲++黃鎮++卞夢云++陳琪++徐玲芳++黃兆祥

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

關鍵詞：售樓系統；虛擬看房；網頁3D；圖形渲染

中圖分類號：TP311 文獻標識碼：A 文章編號：2095-1302（2016）11-00-02

0 引 言

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

1 WebGL工作原理及其特點

1.1 系統概述

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

1.2 WebGL工作原理

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

1.3 WebGL的特點

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

2 應用實例及性能分析

2.1 模型的建立

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

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

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

2.2 碰撞檢測

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

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

的包裹程度更嚴密，碰撞質量更精確。

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

2.3 性能分析

WebGL不僅擁有免插件的優勢，其在JS的執行效率與場景烘焙上也表現良好。我們在不同瀏覽器的內核支持情況下，對復雜場景操作分別進行性能測試，最終得到動態場景的快速烘焙效率（單位：s）對比如圖6所示。可以看出，FireFox與Chrome的運行效率綜合較好，而IE瀏覽器仍需要針對JS進行優化。盡管如此，它們的圖形幀率都達到60 FPS左右，基本不會表現出卡頓延遲等現象。

3 結 語

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

參考文獻

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

[2]梁建軍.基于網頁三維技術的網上博覽會研究[D].上海：復旦大學， 2011.

[3]寧靜.基于WebGL實物交互技術及其實現的研究[D].武漢：華中科技大學，2014.

[4]朱麗萍，李洪奇，杜萌萌，等.基于WebGL的三維WebGIS場景實現[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的三維立體可視化房地產銷售管理信息系統[D].天津：天津大學， 2014.

[7]孫茂華，繆淮扣，高洪皓.Web應用中數據庫交互行為驗證[J].計算機工程，2012，38（16）： 52-56.

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