鄭 華 劉 佳

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

面向Web的建筑模型分析與碰撞檢測(cè)

鄭 華 劉 佳

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

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

WebGL 模型分析 碰撞檢測(cè) 場(chǎng)景巡游

1 引 言

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

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

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

直接使用WebGL原生的JavaScript代碼進(jìn)行Web3D開發(fā)是比較困難的，這涉及大量的數(shù)學(xué)和3D圖形學(xué)知識(shí)，由此誕生了許多基于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，西班牙）成為了佼佼者，他以簡(jiǎn)單、直觀的方式封裝了3D圖形編程中常用的對(duì)象，使用了很多圖形引擎的高級(jí)技巧，極大地提高了性能，是完全免費(fèi)和開源的。

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

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

2 模型的導(dǎo)入與拆解

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

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

下面以北京皇家大飯店為例，介紹如何將模型導(dǎo)入到Web，并對(duì)模型進(jìn)行拆解，找出所有子類用于碰撞檢測(cè)。

2.1 模型的導(dǎo)入

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

圖1 模型的導(dǎo)入

2.2 模型的拆解與處理

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

圖2 子類分析

為提高程序的可移植性，我們?cè)诰W(wǎng)頁(yè)文件中傳入模型參數(shù)，并在獨(dú)立的js腳本文件中進(jìn)行模型的導(dǎo)入和分析工作。

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

3 巡游過(guò)程中的碰撞檢測(cè)

Three.js引擎通過(guò)FirstPersonControls.js腳本支持第一人稱視角巡游，通過(guò)將本地?cái)z像機(jī)和THREE.FirstPersonControls對(duì)象綁定，并在 App對(duì)象的update事件中調(diào)用FirstPersonControls對(duì)象的update方法實(shí)現(xiàn)第一人稱視角巡游。

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

圖3 碰撞檢測(cè)流程

包圍盒是碰撞檢測(cè)中廣泛使用的一種方法，其核心思想是用體積略大于模型本身但幾何特性簡(jiǎn)單的包圍盒來(lái)近似地描述需要進(jìn)行碰撞檢測(cè)的復(fù)雜幾何對(duì)象，然后對(duì)包圍盒進(jìn)行碰撞檢查。

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

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

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

圖4 包圍盒模型

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

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

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

圖5 碰撞檢測(cè)效果

4 整合與使用

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

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

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

至此，完成了Obj模型的第一人稱視角巡游，程序?qū)⒆詣?dòng)分析傳入的模型，并在巡游過(guò)程中進(jìn)行碰撞檢查，作為一個(gè)封裝好的通用類，該方法其實(shí)可運(yùn)用在任何Obj模型中，比如機(jī)械模型、零件模型、產(chǎn)品模型等，通過(guò)調(diào)整顯示比例，還可以顯示微小模型。

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

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

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

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

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

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

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

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

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

[8]梁弼,肖麗利,薛文. 古建筑文物三維全景展示的設(shè)計(jì)與實(shí)現(xiàn)[J]. 微型機(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

中國(guó)分類號(hào)：TP3A

1673-1816(2016)02-0089-06

2015-12-08

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