大規(guī)模復(fù)雜BIM場(chǎng)景的Web展示方案

胡錦亮

摘要：BIM（Building Information Modeling）是基于三維數(shù)字設(shè)計(jì)解決方案所構(gòu)建的“可視化”數(shù)字建筑模型，而網(wǎng)頁處理大規(guī)模3D場(chǎng)景有一定的性能缺陷?，F(xiàn)在探索提出了BIM與Web大規(guī)模場(chǎng)景結(jié)合的繪制方案。首先，對(duì)大規(guī)模BIM數(shù)據(jù)進(jìn)行體素化處理，然后通過區(qū)域劃分將數(shù)據(jù)劃分為多個(gè)連通區(qū)域，最后使用基于視錐增量式關(guān)注域（Frustum Of Interests）對(duì)一個(gè)連通區(qū)域的數(shù)據(jù)加載進(jìn)行進(jìn)一步的性能優(yōu)化，提出了一整套的加載方案。最終通過實(shí)驗(yàn)，證明了方案的有效性。

關(guān)鍵詞： BIM； Web3D技術(shù)； FOI； 連通圖； 網(wǎng)頁技術(shù)

中圖分類號(hào)：TP391 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）33-0226-03

Abstract： BIM （Building Information Modeling） is Based on the three-dimensional digital design solution built by the "visual" digital building model， and web processing large-scale 3D scene has some performance flaws. Now explores the drawing scheme of combining BIM with Web large scale scene. First， the bulk BIM data is voxelized， and the data is divided into multiple connected regions by region division. Finally， the data loading of a connected region Based on the Frustum of Interests is used to further Performance optimization， put forward a set of loading schema. Finally， through the experiment， proved the effectiveness of the method.

Key words：BIM； Web3D； FOI； connect graph； web technology

1 概述

當(dāng)前是一個(gè)大數(shù)據(jù)的時(shí)代，各行業(yè)的數(shù)據(jù)規(guī)模和種類都在以前所未有的速度增長。建筑業(yè)更是如此，隨著智慧城市的發(fā)展，建筑大數(shù)據(jù)需要包含整個(gè)建筑生命周期中的所有數(shù)據(jù)，同時(shí)對(duì)數(shù)據(jù)進(jìn)行很好的管理，BIM正是處理建筑大數(shù)據(jù)的有力武器。

建筑信息模型BIM（Building Information Modeling）是基于三維數(shù)字設(shè)計(jì)解決方案所構(gòu)建的“可視化”數(shù)字建筑模型，近年來，作為建筑信息化與計(jì)算機(jī)3D可視化交叉合作滲透的新興技術(shù)，BIM已經(jīng)成為建設(shè)及土木行業(yè)信息化發(fā)展的一項(xiàng)重要技術(shù)。BIM技術(shù)的應(yīng)用使原來大規(guī)模（形體關(guān)系復(fù)雜、設(shè)施管線布置錯(cuò)綜、設(shè)計(jì)實(shí)施運(yùn)維困難）建筑數(shù)據(jù)信息的集成、表達(dá)、更新以及傳遞共享越來越簡(jiǎn)捷。

隨著互聯(lián)網(wǎng)時(shí)代的到來，基于Web3D渲染的場(chǎng)景加載技術(shù)也應(yīng)運(yùn)而生，BIM與Web3D技術(shù)相結(jié)合，可以更方便地在網(wǎng)頁上構(gòu)建三維的虛擬世界。但是由于瀏覽器的局限性，其內(nèi)存無法容納很大規(guī)模的數(shù)據(jù)同時(shí)加載，在這種情況下，如何在網(wǎng)頁端處理如此大規(guī)模的BIM場(chǎng)景，同時(shí)實(shí)現(xiàn)展示流暢，是一個(gè)挑戰(zhàn)。

本文主要研究并提出了一套基于BIM與Web3D技術(shù)的大規(guī)模Web場(chǎng)景加載的方案。方案首先對(duì)BIM數(shù)據(jù)進(jìn)行解析，得到體素化的模型數(shù)據(jù)；然后對(duì)場(chǎng)景進(jìn)行連通性分塊，減少同時(shí)需要加載的數(shù)據(jù)量；然后基于FOI [1-4]思想，保證在一個(gè)視點(diǎn)只需要加載最少的數(shù)據(jù)，從而進(jìn)一步減少數(shù)據(jù)量。最后通過實(shí)際數(shù)據(jù)實(shí)驗(yàn)，證明本文提出的方案是可行的。本方案主要使用WebGL以及網(wǎng)頁開發(fā)技術(shù)。

2 數(shù)據(jù)預(yù)處理

2.1 BIM數(shù)據(jù)解析

我們所關(guān)注的模型標(biāo)準(zhǔn)是BIM，BIM（Building Information Modeling）作為新一代智能建造核心技術(shù)的標(biāo)準(zhǔn)，在移動(dòng)互聯(lián)網(wǎng)上實(shí)現(xiàn)大規(guī)模BIM 場(chǎng)景在線可視化具有十分重要的意義。我們以主流的BIM 格式IFC（Industry Foundation Classes）為輸入數(shù)據(jù)，對(duì)大規(guī)模三維BIM場(chǎng)景數(shù)據(jù)進(jìn)行深入的語義分析，提出一套輕量級(jí)的Web3d數(shù)據(jù)解析方案，對(duì)原始數(shù)據(jù)進(jìn)行預(yù)處理。

BIM模塊之間的關(guān)系錯(cuò)綜復(fù)雜，一個(gè)IFC文件中的實(shí)例可以被映射到多個(gè)其他所導(dǎo)出的IFC文件中，這樣就使得IFC文件很難去管理，對(duì)于網(wǎng)絡(luò)傳輸也有很大影響。一些研究[5-7]已經(jīng)證實(shí)這些冗余數(shù)據(jù)是阻礙BIM存儲(chǔ)和傳輸?shù)闹饕?fù)擔(dān)。所以需要對(duì)IFC數(shù)據(jù)進(jìn)行輕量化工作。

通過研究，我們提出了一個(gè)方案，在保持IFC原始文件格式的前提下，對(duì)整個(gè)IFC文件的內(nèi)容、引用進(jìn)行掃描分析，查找并去除IFC文件中一些由于數(shù)據(jù)重復(fù)引起的冗余信息，提取出模型片元對(duì)應(yīng)的點(diǎn)的坐標(biāo)、片元的法向量、片元的顏色等等有用的信息，并對(duì)所提取出的信息進(jìn)行格式化，最終得到方便網(wǎng)絡(luò)傳輸以及瀏覽器端解析的數(shù)據(jù)，以此來降低BIM的數(shù)據(jù)量，并適應(yīng)網(wǎng)絡(luò)的快捷傳輸與網(wǎng)頁在線渲染。

2.2 基于連通圖的場(chǎng)景劃分

由于場(chǎng)景規(guī)模太大，我們可以在合適的情況（如模型內(nèi)部環(huán)境）下，將模型數(shù)據(jù)按照一定的規(guī)范劃分為多個(gè)區(qū)塊，在合適的時(shí)間加載合適的模型區(qū)塊，同時(shí)刪除不可見區(qū)塊及時(shí)清除瀏覽器緩存，這樣可以大幅度降低所占用的瀏覽器內(nèi)存，避免瀏覽器內(nèi)存溢出導(dǎo)致崩潰的問題。

基于數(shù)據(jù)解析后得到的基于體素的模型數(shù)據(jù)，我們提出了一個(gè)基于連通圖的區(qū)塊劃分方案。我們將模型按照封閉性劃分為多個(gè)區(qū)塊，各個(gè)封閉區(qū)塊只有通過一個(gè)或多個(gè)的數(shù)據(jù)有限的“出入口”與別的區(qū)塊連通，通過結(jié)合視點(diǎn)與“出入口”的位置信息就可以判斷是否該進(jìn)行場(chǎng)景切換，我們根據(jù)這些“出入口”可以繪制出一個(gè)連通圖，從而確定場(chǎng)景切換的具體時(shí)機(jī)和規(guī)范。連通關(guān)系如圖1所示。

在完成場(chǎng)景劃分后，我們可以根據(jù)當(dāng)前視點(diǎn)的位置確定需要加載的部分場(chǎng)景，而通過場(chǎng)景漫游移動(dòng)視點(diǎn)時(shí)，根據(jù)連通點(diǎn)動(dòng)態(tài)調(diào)整所需要顯示的場(chǎng)景，從而大幅度減少需要加載的數(shù)據(jù)。

3 基于FOI的漸進(jìn)式加載技術(shù)

在實(shí)際環(huán)境中，人的視野是有限的，超出這個(gè)界限的區(qū)域或不可見或模糊不清，實(shí)際上人所關(guān)注的區(qū)域正是在視野內(nèi)[8] 。通過確定當(dāng)前視點(diǎn)位置對(duì)模型數(shù)據(jù)進(jìn)行過濾，這是一種輕量化的解決方案。

同時(shí)，結(jié)合數(shù)據(jù)處理階段所解析得到的基于網(wǎng)格體素的模型數(shù)據(jù)，我們可以更方便得計(jì)算視野區(qū)域內(nèi)的模型數(shù)據(jù)，不需要去判斷每一個(gè)模型片元是否在視野范圍內(nèi)，而只要去判斷規(guī)格簡(jiǎn)單的體素盒是否在視野中即可，然后間接決定該體素盒對(duì)用的多個(gè)模型片元是否在視野中，減少判斷難度和判斷次數(shù)。

根據(jù)上述思想，我們提出了FOI （Frustum Of Interests）的概念，即視錐增量式關(guān)注域，其主要思路是近似模擬人的可視域，根據(jù)視點(diǎn)以及視錐區(qū)域計(jì)算算法動(dòng)態(tài)計(jì)算需要渲染的模型片元，這樣就可以做到只調(diào)度視錐范圍內(nèi)的模型數(shù)據(jù)，而對(duì)其他數(shù)據(jù)不加載，概念圖2如下。

當(dāng)用戶在場(chǎng)景中漫游時(shí)，視點(diǎn)處于不同的位置往往有不同的FOI域，這就要求我們裝載的數(shù)據(jù)是實(shí)時(shí)變化的，由于重繪的時(shí)間間隔較短，F(xiàn)OI域在每個(gè)間隔內(nèi)的變化也是可計(jì)算的，根據(jù)行為的不同視錐區(qū)域往往只變化一個(gè)體素單位大小或者改變很小的角度，根據(jù)這一理論，我們提出了IFC大規(guī)模數(shù)據(jù)的傳輸調(diào)度機(jī)制，關(guān)鍵步驟如下：

（1） 拾取當(dāng)前視點(diǎn)對(duì)應(yīng)的可見區(qū)域FOI內(nèi)的所有IFC構(gòu)件。

（2） 發(fā)送數(shù)據(jù)請(qǐng)求到服務(wù)器端，請(qǐng)求數(shù)據(jù)庫中的IFC構(gòu)件的數(shù)據(jù)信息；

（3） 服務(wù)器傳輸獲取的數(shù)據(jù)信息到客戶端；

（4） 客戶端進(jìn)行渲染；

（5） 根據(jù)漫游的行為（停頓、前進(jìn)、轉(zhuǎn)身）狀態(tài)應(yīng)用增量式FOI替換算法計(jì)算視錐內(nèi)新增的IFC構(gòu)件和被移除的構(gòu)件；

（6） 根據(jù)獲取的變化信息對(duì)數(shù)據(jù)進(jìn)行處理，至（1）步；

以上步驟思路大致為：初始化視點(diǎn)在一個(gè)確定的位置，這時(shí)計(jì)算根據(jù)當(dāng)前視點(diǎn)以及視線朝向計(jì)算視錐內(nèi)的模型，然后根據(jù)體素信息把響應(yīng)的體素模型渲染出來；當(dāng)在場(chǎng)景中進(jìn)行漫游時(shí)，動(dòng)態(tài)調(diào)用FOI替換算法計(jì)算當(dāng)前視點(diǎn)的位置對(duì)比上一步視點(diǎn)所需要去掉以及增加的體素，然后進(jìn)行模型動(dòng)態(tài)調(diào)整。

在FOI概念中最核心的是FOI替換算法，這也是我們對(duì)計(jì)算diff進(jìn)行的輕量化操作。當(dāng)視點(diǎn)變化時(shí)，我們需要再次計(jì)算模型片元是否在視錐范圍內(nèi)?？紤]到diff操作是頻繁觸發(fā)的，如果我們依然按照初始化時(shí)對(duì)所有體素盒進(jìn)行遍歷操作來判斷，那么所需要的計(jì)算量極大，很容易造成頁面崩潰卡死。FOI替換算法巧妙地減少了計(jì)算量。其核心思想是：首先約定每個(gè)計(jì)算周期的視點(diǎn)位置相對(duì)于上一個(gè)計(jì)算周期的視點(diǎn)位置變化不超過一個(gè)體素格距離（根據(jù)視點(diǎn)移動(dòng)速度設(shè)置合適的計(jì)算周期），這樣我們只需要對(duì)視錐外層的體素進(jìn)行增減判斷就可以了，而不需要遍歷所有體素。通過這種diff算法，我們?cè)跍p少計(jì)算量和減少內(nèi)存消耗兩方面進(jìn)行了輕量化處理。

4 瀏覽器輕量化技術(shù)

4.1 多線程技術(shù)

有了上述的數(shù)據(jù)處理以及算法實(shí)現(xiàn)基礎(chǔ)，我們還要具體結(jié)合Web瀏覽器端的具體情況。瀏覽器處理數(shù)據(jù)、計(jì)算和渲染圖形的能力比較差，在本課題中，瀏覽器需要同時(shí)完成分析處理場(chǎng)景數(shù)據(jù)、渲染大規(guī)模模型、發(fā)送數(shù)據(jù)請(qǐng)求等一系列工作。如果不能夠優(yōu)化瀏覽器性能，提升瀏覽器處理能力，那么必然會(huì)導(dǎo)致很嚴(yán)重的瀏覽器卡頓，影響用戶體驗(yàn)。傳統(tǒng)的javascript只支持單線程編程，在處理數(shù)據(jù)量較大的計(jì)算時(shí)會(huì)遇到性能瓶頸。

HTML5中提出了多線程webworker的概念，使得瀏覽器可以使用利用多線程去完成一些復(fù)雜的工作。在本文工作中，我們將網(wǎng)絡(luò)交互（如發(fā)送請(qǐng)求以及獲取數(shù)據(jù)）、FOI算法計(jì)算數(shù)據(jù)差異放在獨(dú)立的一個(gè)線程中去處理，而在瀏覽器主線程中只負(fù)責(zé)模型的渲染工作。

4.2 異步場(chǎng)景渲染

良好的用戶交互和用戶視覺體驗(yàn)是可視化場(chǎng)景加載非常重要的要求。目前渲染模型有兩種方式：發(fā)送多個(gè)請(qǐng)求獲取數(shù)據(jù)，拿到所有數(shù)據(jù)后統(tǒng)一進(jìn)行模型的渲染；或者每發(fā)送一個(gè)數(shù)據(jù)請(qǐng)求都調(diào)用渲染接口進(jìn)行部分?jǐn)?shù)據(jù)渲染。

我們常規(guī)選擇的方法是方法一，這種方法在數(shù)據(jù)下載時(shí)，頁面呈現(xiàn)空白狀態(tài)，用戶可能會(huì)感覺頁面卡死或者網(wǎng)絡(luò)報(bào)錯(cuò)，當(dāng)數(shù)據(jù)量比較大時(shí)，數(shù)據(jù)全部下載占用的時(shí)間比較長，用戶體驗(yàn)很不好。

方法二是在下載數(shù)據(jù)的同時(shí)也進(jìn)行模型渲染，配合上文提到的多線程技術(shù)，可以使兩個(gè)步驟同步執(zhí)行，用戶可以馬上看見模型一塊一塊出現(xiàn)，而不用等待很長時(shí)間，這樣用戶體驗(yàn)比較好。同時(shí)我們進(jìn)行了進(jìn)一步的優(yōu)化，比如添加Modal層防止用戶在模型加載時(shí)非法操作以及設(shè)置模型出現(xiàn)的順序（通常以視點(diǎn)當(dāng)前位置開始出現(xiàn)，然后向四周蔓延為最佳順序）。

4.3 函數(shù)節(jié)流

本文所提出方案是基于場(chǎng)景漫游的，視點(diǎn)在場(chǎng)景中漫游時(shí)，F(xiàn)OI算法頻繁被觸發(fā)，而可能移動(dòng)距離，視點(diǎn)還處于當(dāng)前體素塊中，這樣就白白消耗了系統(tǒng)的性能，容易造成頁面的卡頓。我們使用了函數(shù)節(jié)流的方法，確定一個(gè)最小時(shí)間范圍，如果在這個(gè)范圍內(nèi)重復(fù)觸發(fā)，則不會(huì)調(diào)用算法去檢查差異，當(dāng)超過這個(gè)最小時(shí)間則觸發(fā)一次，并重新計(jì)算時(shí)間，javascript實(shí)現(xiàn)的節(jié)流算法如下：

function throttle（method，delay，duration）{

var timer=null， begin=new Date（）；

return function（）{

var context=this， args=arguments， current=new Date（）；；

clearTimeout（timer）；

if（current-begin>=duration）{

method.apply（context，args）；

begin=current；

}else{

timer=setTimeout（function（）{

method.apply（context，args）；

}，delay）；}}}

通過該方法，根據(jù)場(chǎng)景漫游的速度設(shè)置合理的最小時(shí)間，可以減少檢查更新的次數(shù)，進(jìn)一步減輕瀏覽器計(jì)算的負(fù)擔(dān)。

5 實(shí)驗(yàn)結(jié)果

最后本文通過實(shí)驗(yàn)對(duì)上述提出的方法進(jìn)行了測(cè)試。測(cè)試環(huán)境為 Windows 10 操作系統(tǒng)，使用 Chrome 瀏覽器進(jìn)行展示，硬件 配置為 Intel（R） Core（TM） i5-2400 CPU @3.10GHz 處理器、4.0GB 內(nèi)存、NVIDIA GeForce GTX460 顯卡。模型數(shù)據(jù)大小為200M，進(jìn)行5次加載漫游實(shí)驗(yàn)。使用方案前后對(duì)比如表1所示。

從表1可以看出，使用本文方案后，防止了頁面的崩潰，縮短了模型的加載時(shí)間，減少了內(nèi)存消耗量，同時(shí)場(chǎng)景的FPS顯著提高，這些都提高了用戶的使用體驗(yàn)；而在使用以往直接加載方案時(shí)，頁面時(shí)常出現(xiàn)崩潰情況，且加載時(shí)間較長，內(nèi)存占用較高，頁面也有明顯的卡頓現(xiàn)象。測(cè)試效果如圖3所示。

圖3 測(cè)試效果圖

6 結(jié)論

以上實(shí)驗(yàn)表明，本文提出的方案適合大規(guī)模BIM模型在瀏覽器端的加載以及渲染，減少系統(tǒng)資源消耗，優(yōu)化模型加載，提高用戶體驗(yàn)，為瀏覽器端大規(guī)模場(chǎng)景渲染提供了方向。

參考文獻(xiàn)：

[1] Wang W， Jia J. An incremental smlaoi algorithm for progres? sive downloading large scale webvr scenes[C]. Proceedings of the 14th International Conference on 3D Web Technology. ACM， 2009： 55-60.

[2] Falby J， Zyda M， Pratt D， et.al. Npsnet： hierarchical data structures for real-time three-dimensional visual simulation [J]. Computer Graphics， 1993， 17（1）：65-69.

[3] Schuwerk C， Chaudhari N， Steinbach E. An area-of-interest based communication architecture for shared haptic virtual en? vironments[C]. Haptic Audio Visual Environments and Games （HAVE）， 2013 IEEE International Symposium on. IEEE， 2013： 57-62.

[4] 賈金原， 王偉， 王明飛，等. 基于多層增量式可擴(kuò)展扇形興趣 區(qū)域的大規(guī)模 DVE 場(chǎng)景對(duì)等漸進(jìn)式傳輸機(jī)制[J]. 計(jì)算機(jī)學(xué) 報(bào)， 2014， 37（6）：1324-1334.

[5] L. Zhang， R. Issa， Ontology based partial building information model extraction，J. Comput. Civ. Eng. 27 （6） （2013） 576-584.

[6] J. Won， G. Lee， C. Cho， No-schema algorithm for extracting a partial model from an IFC instance model， J. Comput. Civ. Eng. 27 （6） （2013） 585-592.

[7] Y.-H. Lin， Y.-S. Liu， G. Gao， X.-G. Han， C.-Y. Lai，M. Gu， The IFC-based path planning for 3D indoor spaces， Adv. Eng. Inform. 27 （2） （2013） 189-205.

[8] 王偉， 賈金原， 張晨曦， 等. 大規(guī)模虛擬場(chǎng)景漸進(jìn)式傳輸?shù)难?究進(jìn)展[J]. 計(jì)算機(jī)科學(xué)， 2010， 37（2）：38-43.