鄭 華 劉 佳

（石家莊鐵路職業(yè)技術(shù)學院 河北石家莊 050061）

面向Web的建筑模型分析與碰撞檢測

鄭 華 劉 佳

（石家莊鐵路職業(yè)技術(shù)學院 河北石家莊 050061）

傳統(tǒng)的Web通過文字、圖片、視頻等媒體對實物或模型進行展示，沒有人機交互，用戶只能被動觀看。針對大型建筑模型在Web中的展示問題，本文提出了一種利用WebGL技術(shù)，使用戶可以在Web環(huán)境下對建筑模型進行第一人稱巡游的方法，先將模型導入到Web，然后對模型進行拆解和分析，利用拆解出的子類解決巡游過程中的碰撞檢測問題。實驗結(jié)果表明，對于具備橫平豎直結(jié)構(gòu)的三維模型，該方法均可達到良好的的Web巡游與碰撞檢測效果。

WebGL 模型分析 碰撞檢測 場景巡游

1 引 言

在建筑行業(yè)信息化的大背景下，如何將各類3D建筑模型有效地進行展示，是目前亟待解決的一個主要問題。目前，大型的建筑模型只能在專業(yè)的建模工具中進行編輯和瀏覽，需要高端的圖形硬件設(shè)備和熟練的軟件操作人員，難以大范圍普及運用。如果能將模型放在Web上，并且能以交互的方式展示給用戶，則問題可以被很好地解決。

傳統(tǒng)的Web通過事先渲染好的靜態(tài)圖片或視頻來展示建筑模型，不能交互，用戶只能被動觀看，無法主動瀏覽。因此允許用戶通過交互的方式，主動地、有選擇性地瀏覽建筑模型，是一種更好的展示建筑的方法。

在過去的10年里，誕生了很多Web3D引擎，比如：VRML、X3D、Viewpoint、Cult3D、Shockwave3D、Java3D、Unity3D、Flash3D等，他們都有一個共同點，就是要求用戶要在瀏覽器上安裝插件，由于互不兼容，人們需要為不同的網(wǎng)頁安裝不同的插件，這降低了一部分用戶體驗，免插件的Web3D技術(shù)由此誕生。2009年8月，Khronos提出WebGL繪圖技術(shù)，它是一個跨平臺、免費的、用于在Web瀏覽器上創(chuàng)建三維圖形的API，基于OpenGL ES 2.0標準，使用OpenGL著色語言 GLSL，而且還提供了類似于標準的OpenGL的API。

直接使用WebGL原生的JavaScript代碼進行Web3D開發(fā)是比較困難的，這涉及大量的數(shù)學和3D圖形學知識，由此誕生了許多基于WebGL的JavaScript 3D引擎，如GLGE（http://www.glge.org ）、SceneJS（http://www.scenejs.org）、CubicVR（http://www.cubicvr.org）、Three.js（http://www.threejs.org）等。在眾多的引擎中，Three.js（Ricardo Cabello Miguel，西班牙）成為了佼佼者，他以簡單、直觀的方式封裝了3D圖形編程中常用的對象，使用了很多圖形引擎的高級技巧，極大地提高了性能，是完全免費和開源的。

Three.js封裝了3D編程中的圖形技巧，降低了3D編程的門檻，然而他并沒有提供應(yīng)用級的編程框架，實踐中，程序員往往需要做大量重復的工作，導致程序可讀性差，為此，Tony Parisi[美]編寫了一個基于Three.js的模擬框架Sim.j，這是一個輕量級的開發(fā)框架，可極大地提高程序的可讀性和可重用性。

本文利用WebGL技術(shù)、Three.js引擎和Sim.js框架，介紹了一種將建筑模型導入到Web的方法，通過對模型進行拆解，找出了模型中的所有子類（墻面、樓梯、窗戶、家具等），支持用戶通過第一人稱視角的方式對建筑模型進行主動巡游。文章主要解決了兩個問題：一是建筑模型的導入與拆解，二是巡游過程中的碰撞檢測。

2 模型的導入與拆解

在3D建模領(lǐng)域，由于歷史原因（沒有統(tǒng)一標準），過去用于工業(yè)建模設(shè)計上的交換格式，3ds和Obj成為了最具代表性的兩種靜態(tài)模型格式，其中Obj格式由于沒有專利限制，使用文本存儲，被大家廣泛采納。現(xiàn)在幾乎所有的建模工具都支持Obj格式的輸出，這也是本論文之所以采用Obj格式模型進行分析的原因。

Obj是一種靜態(tài)模型，主要的內(nèi)容是點、線、面、法線和材質(zhì)。Three.js默認情況下，會將Obj模型整體封裝成一個Object3D對象，并以網(wǎng)格（Mesh）的形式返回給用戶。在巡游過程中，我們需要逐一分析模型中的子類，如墻面、窗戶、樓梯等，并在巡游的同時，進行碰撞檢查（保證用戶不會穿墻而過）。

下面以北京皇家大飯店為例，介紹如何將模型導入到Web，并對模型進行拆解，找出所有子類用于碰撞檢測。

2.1 模型的導入

在3ds Max中將模型以O(shè)bj格式輸出，導出時注意將材質(zhì)文件一并導出以保證后期的渲染效果，然后在網(wǎng)頁中通過Three.js提供的loader.load方法可直接導入Obj模型，導入后，程序?qū)⒌玫秸麄€模型的一個Object3D對象，如圖1所示。

圖1 模型的導入

2.2 模型的拆解與處理

通過循環(huán)讀取該Object3D對象的Children屬性，即可得到模型中的所有子類，Children是一個數(shù)組，是Three.js內(nèi)置的一個層級對象，每個數(shù)組元素代表了模型中的一個子類，它也是一個Object3D對象。得到模型的所有子類后，創(chuàng)建這些子類的包圍盒（boundingBox），保存他們的位置和中心點，如圖2所示。

圖2 子類分析

為提高程序的可移植性，我們在網(wǎng)頁文件中傳入模型參數(shù)，并在獨立的js腳本文件中進行模型的導入和分析工作。

為使程序結(jié)構(gòu)更加清晰，本文利用Sim.js框架對這部分功能的代碼進行了封裝，通過創(chuàng)建Obj類統(tǒng)一了接口，其中init方法用于導入模型，createmodel方法用于模型中的子類分析，代碼如下：

3 巡游過程中的碰撞檢測

Three.js引擎通過FirstPersonControls.js腳本支持第一人稱視角巡游，通過將本地攝像機和THREE.FirstPersonControls對象綁定，并在 App對象的update事件中調(diào)用FirstPersonControls對象的update方法實現(xiàn)第一人稱視角巡游。

在巡游過程中，需要進行碰撞檢測，即當攝像機和模型中的任意一個子類碰撞時，應(yīng)該終止巡游，攝像機退回原位，要求用戶另尋路徑，碰撞檢測過程的基本思路如圖3所示。

圖3 碰撞檢測流程

包圍盒是碰撞檢測中廣泛使用的一種方法，其核心思想是用體積略大于模型本身但幾何特性簡單的包圍盒來近似地描述需要進行碰撞檢測的復雜幾何對象，然后對包圍盒進行碰撞檢查。

常見的包圍盒類型有包圍球（sphere）、沿坐標軸的包圍盒AABB（Axis—Aligned Bounding Boxes）、方向包圍盒OBB（Oriented Bounding Box）、和k-DOPs（Discrete Orientation Polytope）等。如何選擇一種合適的包圍盒主要考慮兩個因素：一是要考慮包圍盒與模型的緊密程度，緊密度高意味著碰撞檢測的精準度就高；二是要考慮計算復雜度，高精準的碰撞檢測同時也意味著大量額外的計算開銷。

由于大多數(shù)建筑模型具備橫平豎直的結(jié)構(gòu)，因此采用AABB包圍盒可以保證碰撞檢測的精準度；另外，建筑模型需要在Web瀏覽器中進行實時渲染，保證用戶可以平滑的進行巡游必須被重點考慮，因此并不適宜采用高復雜的碰撞算法。

結(jié)合本例，我們?yōu)槊恳粋€子類計算包圍盒、三邊長和中心點坐標，判斷攝像機是否進入包圍盒的內(nèi)部（如圖4所示）。如果進入了，表示發(fā)生了碰撞，攝像機退回原位置，否則繼續(xù)巡游。

圖4 包圍盒模型

通過計算攝像機在X、Y、Z三個方向上距離包圍盒中心點的距離，如果他們均小于包圍盒三條邊長的一半，那么可以認定碰撞了。另外還需要注意兩個問題，一是建筑模型有一個顯示比例的問題，二是攝像機有一個近剪裁面問題，在計算時要考慮進去。

在Obj類中，已經(jīng)分析出了模型的所有子類，并計算了他們的包圍盒（Boxs）和中心點（Boxs_pos），通過擴展App類，增加testcollision方法，實現(xiàn)碰撞檢測，代碼如下：

碰撞檢測效果如圖5所示，圖中攝像機與左邊墻面屋檐發(fā)生了碰撞，墻面材質(zhì)顏色變紅，攝像機返回舊位置，保證用戶可以從其它方向繼續(xù)巡游。

圖5 碰撞檢測效果

4 整合與使用

最后，將上述程序一并封裝到APP類中去，并在html文件中傳入建筑模型的相關(guān)信息，即完成了一個通用的Obj模型瀏覽器，網(wǎng)頁文件的部分代碼如下：

代碼中斜體部分標示了模型的相關(guān)參數(shù)，他們分別是模型文件、材質(zhì)文件、模型的位置和顯示比例。

5 結(jié)論與后期改進

至此，完成了Obj模型的第一人稱視角巡游，程序?qū)⒆詣臃治鰝魅氲哪Ｐ?，并在巡游過程中進行碰撞檢查，作為一個封裝好的通用類，該方法其實可運用在任何Obj模型中，比如機械模型、零件模型、產(chǎn)品模型等，通過調(diào)整顯示比例，還可以顯示微小模型。

基于上述研究成果，后期可以研究可視化的建筑模型（BIM）管理信息系統(tǒng)。由于程序中分析出了模型中的所有子類，將他們和數(shù)據(jù)庫關(guān)聯(lián)，就可以進行可視化的建筑模型信息化系統(tǒng)開發(fā)。

最后，基于WebGL的3D網(wǎng)頁無論在PC端還是移動端，都受到了廣泛的支持，比如IE從11.0以后完全支持WebGL，F(xiàn)irefox for Android則在移動端完全支持WebGL，這使得基于WebGL的項目可以在PC和移動端的程序代碼得到統(tǒng)一，大大降低了開發(fā)成本。

[1]劉愛華,韓勇,張小壘.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實現(xiàn)[J].地理空間信息,2012,10(05):79-81

[2]譚文文,丁世勇,李桂英. 基于 webGL和 HTML5的網(wǎng)頁 3D 動畫的設(shè)計與實現(xiàn)[J]. 電腦知識與技術(shù),2011,7(28):6981-6983

[3]霍冬,鄭偉華,盛步云. 基于WebGL的機械產(chǎn)品三維展示技術(shù)研究[J]. 制造業(yè)自動化,2013,35(09):73-77

[4]周敬敬,陳昕,吳開超. 利用 WebGL技術(shù)實現(xiàn)機房動態(tài)虛擬裝配設(shè)計的可視化[J]. 科研信息化技術(shù)與應(yīng)用,2013,4(02):87-92

[5]趙學偉,沈旭昆,齊越. 基于Web的交互式三維發(fā)布系統(tǒng)[J].計算機工程, 2007,33(22):5-7

[6]王珩瑋,胡振中,林佳瑞. 面向Web的BIM三維瀏覽與信息管理[J]. 土木建筑工程信息技術(shù),2013,5(03):1-7

[7]王磊,高玨,金野. 基于Web3D無插件的三維模型展示的研究[J]. 計算機技術(shù)與發(fā)展,2015,25(04):217-220

[8]梁弼,肖麗利,薛文. 古建筑文物三維全景展示的設(shè)計與實現(xiàn)[J]. 微型機與應(yīng)用,2014,33(16):10-14

[9] Cantor D. WebGL Beginner’s Guide[M]. Birmingham, United Kingdom: Packt Publishing, Limited, 2012

[10]P.M.Hubbard.Approximating polyhedra with sphms for time-critical collision detection[J].ACM TrimsGraph,1996,15(3):179-210

[11]N· Beckmann,H-P.Kriegel,R.Schneider.The r__tree:an efficient and robust access method for points and rectangles[C[.ACM SIGMOD International Conference Oil Management of Data,Atlantic,1990:322.331

[12]N.Greene.Detecting intersection of a rectangular solid and a eonvex polyhedron[C[.In:Heckbert P S.Graphics Germs IV.USA:Academic Press,1994:74.82

[13]J·T.Klosowski,M.Held,J.S.B.Mitchell.Efficient collision detection using bounding volume hierarchies ofk-DOPs[J].IEEE Transactions On Visualization and Computer Graphics,1998,4(1):21.36

Analysis and Collision-detect of the Web-oriented Building Model

ZHENG Hua LIU Jia
(Shijiazhuang Institute of Railway Technology Shijiazhuang Hebei 050061 China)

Traditional Web shows objects or models through text, pictures, video and other media. There is no human-computer interaction and users can only passively watch. To solve the presentation problem of the large architectural models on the Web, this paper presents a method of WebGL technology, which allows users to browse building model with the first-person roaming in Web environment. This technology firstly imports the model into Web, then dismantles and analyzes it, finally with the use of dismantled subclasses, solve the collision-detections problem during roaming. The experimental results show that for the 3D-model with vertical-horizontal structure, this method can achieve good results of Web roaming and collision detection.

WebGL Model-analysis Collision-detection scene-roaming

中國分類號：TP3A

1673-1816(2016)02-0089-06

2015-12-08

鄭華（1977-），男，漢，安徽歙縣人，副教授，碩士，研究方向計算機網(wǎng)絡(luò)技術(shù)、Web3D。