基于WebGL 的BIM 模型輕量化研究

馮雨晴， 奚雪峰， 崔志明

（蘇州科技大學 電子與信息工程學院，江蘇 蘇州 215009；2.蘇州市虛擬現(xiàn)實智能交互及應(yīng)用技術(shù)重點實驗室，江蘇 蘇州 215009）

BIM 即建筑信息模型（Building Information Modeling），是指在建設(shè)工程及設(shè)施全生命周期內(nèi)，對建筑的物理和功能特性進行數(shù)字化表達，并依此設(shè)計、施工、運營的過程和結(jié)果的總稱[1]。 BIM 作為基于可視化建筑信息模型的信息集成和管理技術(shù)，具有運行狀態(tài)可視化、日常設(shè)計模擬化、信息模型協(xié)同工作、模擬工程進度實時性等優(yōu)勢。BIM 發(fā)展20 多年，其應(yīng)用在我國已經(jīng)10 年有余。根據(jù)《關(guān)于推進建筑信息模型應(yīng)用的指導(dǎo)意見》[2]，到2020 年底，甲級勘察、設(shè)計單位以及特級、一級房屋建筑工程施工企業(yè)應(yīng)掌握并實現(xiàn)BIM 與企業(yè)管理系統(tǒng)和其他信息技術(shù)的一體化集成應(yīng)用，新立項的項目在勘察設(shè)計、施工、運營維護中，集成應(yīng)用BIM 的項目比率達到90%。

由于裝配式建筑涉及建筑、結(jié)構(gòu)、機電及水利等設(shè)備，同時需要建筑設(shè)計、生產(chǎn)、施工、管理等方面的協(xié)同合作，所以BIM 的應(yīng)用實施具有專業(yè)程度深、多方協(xié)作、多單位決策等特性[3]。這也就需要BIM 的模型能夠在多平臺上跨平臺使用，同時支持不同系統(tǒng)的要求，從而滿足不同終端的實際需求應(yīng)用。 在瀏覽器端，大多數(shù)采用插件的形式[4]，例如Flash、 Unity3D、Navisworks，但這些插件都需要用戶提前安裝，并且對現(xiàn)在主流的瀏覽器的支持并不友好。

WebGL（Web Graphics Library）最早是由Mozilla 工程師提出，創(chuàng)建一套用于2D 和3D 圖形交互的API[5]。WebGL 符合絕大多數(shù)瀏覽器的Web 標準，可以使用GPU 加速，使物理和圖像處理的效果可以作為網(wǎng)頁界面的一部分。 WebGL1.0 以O(shè)pen GLES2.0 為基礎(chǔ)，為3D 圖形提供API。 它與HTML5 的canvas 標簽相結(jié)合，并通過DOM 接口進行訪問。 WebGL 2.0 以O(shè)pen GLES3.0 為基礎(chǔ)，保證了WebGL 1.0 的許多可選擴展的可用性并公開了新的API。 WebGL 中的著色器是直接在GLSL 中工作的，通過字符串信息與WebGL API 相互通信。 著色器的作用是來確定模型中每個頂點的位置，并應(yīng)用WebGL 對點、線、三角形等基本元素進行光柵化處理，通過片元著色器來計算每個基本元素的顏色。 由于WebGL 具有復(fù)雜的底層細節(jié)，為了方便用戶操作，Three.js 封裝好關(guān)于WebGL 特性的JavaScript API， 這使得用戶無需掌握復(fù)雜的WebGL 底層細節(jié)也可以創(chuàng)建三維圖形。 Three.js 是通過對WebGL 接口的封裝和簡化而形成的一個圖形庫，它為直接在瀏覽器中創(chuàng)建三維場景提供了大量的特性和API，除了一些低版本瀏覽器，幾乎所有的瀏覽器都對Three.js 具有兼容性。相較于其他傳統(tǒng)的渲染3D 圖形的方式，WebGL 具有開源、跨平臺、無插件等優(yōu)勢。

由于BIM 中千兆級模型文件、上萬份圖紙文件和每天百萬次操作請求的龐大數(shù)據(jù)，在現(xiàn)實中無法便捷的加載和操控模型，因此，Revit 模型輕量化顯示研究具有重要的應(yīng)用價值。 為了實現(xiàn)Revit 模型能夠在瀏覽器端的輕量化顯示，筆者通過Revit[6]二次開發(fā)的技術(shù)和WebGL 技術(shù)來解決Revit 模型的幾何轉(zhuǎn)化和輕量化顯示的問題，并且針對大體積的Revit 模型改進了八叉樹優(yōu)化算法，達到Revit 模型輕量化的目的。 筆者主要工作：（1）Revit 二次開發(fā)技術(shù)研究。研究Revit API 的接口函數(shù)，利用二次開發(fā)技術(shù)開發(fā)插件實現(xiàn)將IFC 文件的導(dǎo)出、幾何信息的提取以及將Revit 模型文件轉(zhuǎn)化為GLTF 格式的文件。（2）Revit 模型幾何轉(zhuǎn)換研究。研究導(dǎo)出的GLTF 文件的建筑要素和模型輕量化的方法， 并將三角化幾何轉(zhuǎn)換和八叉樹算法作為模型的輕量化方法， 研究WebGL 技術(shù)和渲染框架。 通過解析模型文件實現(xiàn)模型的幾何轉(zhuǎn)換， 將轉(zhuǎn)換后的三角面片送入WebGL 的渲染中，實現(xiàn)模型的輕量化顯示。（3）渲染優(yōu)化。針對體積大的Revit 模型中包含海量的模型數(shù)據(jù)從而導(dǎo)致模型渲染速率降低的問題，利用八叉樹優(yōu)化算法對模型的場景進行有效的管理，在不影響模型精細程度的情況下提升渲染的速率。

1 國內(nèi)外研究現(xiàn)狀

最初的建筑信息通過手繪的方式記錄。 進入信息化時代后，開始使用計算機來輔助建筑設(shè)計，BIM 便是其中的一種主流技術(shù)。BIM 的核心是利用數(shù)字化管理技術(shù)建立與實際建筑相符合的虛擬工程模型，并在其中輸入與現(xiàn)實建筑信息相對應(yīng)的數(shù)據(jù)，形成建筑的模型。

文獻[7－8]通過VRML 技術(shù)實現(xiàn)了在瀏覽器端口加載三維模型的方法，但是這也需要一個專門的插件，同時調(diào)用接口也較為復(fù)雜。 文獻[9－10]介紹了BIM 在橋梁施工上的應(yīng)用，對斜拉橋的施工進行了虛擬可視化，從多種角度分析了施工的可能性和協(xié)調(diào)性；通過使用不同的施工順序方案和工作分解結(jié)構(gòu)，將可視化的三維模型、成本和進度相集成，從而模擬了真實情況下的動態(tài)圖像和效果。 文獻[11－12]中，通過結(jié)合多種繪畫的手段，實現(xiàn)了在配置較低的移動端設(shè)備上加載模型的方案，不過這種方案改變了原始模型的風格，并且刪減了太多的信息，從而在一定的程度上改變了原有設(shè)計圖紙的意圖，并不適合在工業(yè)建筑領(lǐng)域精準模型的需求。文獻[13－14]采用WebGL 的技術(shù)和Three.js 的渲染引擎，實現(xiàn)了用數(shù)據(jù)驅(qū)動模型以及靜態(tài)模型的導(dǎo)入、解析和處理等功能，但是只能實現(xiàn)對小體積的模型的處理操作，對大體積的模型操作時，會出現(xiàn)卡頓甚至崩潰。 文獻[15－16]利用點云技術(shù)對莫干山以及建筑文物進行構(gòu)建，然后使用WebGL 和Three.js 等技術(shù)使其能夠在瀏覽器中進行加載和渲染，并實現(xiàn)了對模型的一些基本操作。

文獻[17－18]實現(xiàn)了將三維模型轉(zhuǎn)換為瀏覽器可以識別的格式，然后部署在服務(wù)器平臺上，利用網(wǎng)頁讓模型能夠在網(wǎng)絡(luò)中流動。 其優(yōu)勢在于網(wǎng)頁應(yīng)用程序不會受到平臺的限制，即PC 端和移動端可以同時瀏覽同一個模型的數(shù)據(jù)。 文獻[19－20]利用八叉樹的思想優(yōu)化了大模型場景下的多類別的模型任務(wù)。 八叉樹是一種樹形的數(shù)據(jù)結(jié)構(gòu)，每個內(nèi)部節(jié)點都有八個子節(jié)點。 在三維空間的應(yīng)用中，常用八叉樹對三維空間進行分割。八叉樹有兩種數(shù)據(jù)存儲的方式，分別是線性的和非線性的方式。 非線性方式中每個父節(jié)點都會存儲8 個子節(jié)點的位置信息，而線性的八叉樹每一個孩子節(jié)點都對應(yīng)著父節(jié)點的位置信息。

綜上所述，現(xiàn)有系統(tǒng)基于BIM 和WebGL 技術(shù)已經(jīng)可以實現(xiàn)對部分模型的渲染和交互，但是還存在以下的問題：（1）需要下載特定的插件才能夠?qū)D形進行渲染；（2）支持模型的格式比較單一，只能渲染簡單模型或者只能渲染復(fù)雜模型；（3）對模型沒有進行輕量化的處理，使得圖形在渲染的時候造成了很大的壓力，提高了用戶使用門檻。 為此，筆者利用Revit 接口的二次開發(fā)技術(shù)，將模型導(dǎo)出，再利用WebGL 實現(xiàn)網(wǎng)頁端數(shù)據(jù)的加載，通過八叉樹實現(xiàn)對渲染算法的優(yōu)化，達到模型輕量化的目標。 在無需特定插件的情況下，對簡單和復(fù)雜的模型進行輕量化處理，實現(xiàn)在網(wǎng)頁端的交互功能。

2 Revit 模型輕量化研究

2.1 模型數(shù)據(jù)結(jié)構(gòu)建立

Revit 模型對象包括HostObject 和Instance， 其中HostObject 是包括系統(tǒng)自帶的一些模型對象， 比如墻體、樓板、屋頂；Instance 是用戶自己搭建的一些模型實例，它們在Revit 建模中統(tǒng)稱族。 針對這兩種模型類型文中采用了兩種不同的輕量化策略。

首先是用戶自己創(chuàng)建Instance 模型的輕量化策略。 由于每一種Instance 模型在創(chuàng)建之后會生成唯一的SymbolId，如果在場景中存在兩個相同SymbolId 的Instance 實例模型，此時這兩個模型的頂點（vertices）以及三角面（face）數(shù)據(jù)都是一樣的，只是它們的模型矩陣不一樣，也就是兩個模型的position（位置）和roation（旋轉(zhuǎn)）不同。 Revit 自帶的模型矩陣是3×3，此時具有相同Instance 模型的頂點和面的浮點型數(shù)據(jù)只需要存儲一份，不同模型可以通過相同的材質(zhì)索引來鏈接。 一個模型文件重復(fù)的Instance 模型構(gòu)件越多，輕量化的效果也就越顯著。

其次是關(guān)于HostObject 系統(tǒng)族實例的輕量化， 這是該文的一個重點。 當前研究對這方面的插件優(yōu)化較少，主要原因是HostObject 沒有Instance 實例那樣有固定的SymbolId 去判別。 文中通過直接判別同一HostObject 族下實例之間的頂點數(shù)據(jù)來判斷是否可以合并。 在讀取模型HostObject 時，將相同系統(tǒng)族名稱的實例放進同一個組別中，并將組別中第一個模型對象的頂點數(shù)據(jù)作為參照對象，之后的模型的頂點數(shù)據(jù)都直接與之頂點數(shù)據(jù)進行對比，這里主要對比的是兩個模型的頂點數(shù)據(jù)是否存在scale（縮放）關(guān)系。 若兩個模型vertices 頂點總數(shù)一致，并且其中有連續(xù)的兩組頂點存在相同的縮放比例，即可直接將這兩個模型看做相同的模型，此時只需要記錄兩個模型各自position（位置）、roation（旋轉(zhuǎn)）以及scale（縮放）三個維度的數(shù)據(jù)，它們的頂點和三角面的數(shù)據(jù)只需要存儲一份即可。 最終整個模型的數(shù)據(jù)結(jié)構(gòu)如圖1 所示。

圖1 模型數(shù)據(jù)結(jié)構(gòu)

2.2 Revit 模型幾何轉(zhuǎn)換

在獲取所需的模型數(shù)據(jù)之后，需要將數(shù)據(jù)打包轉(zhuǎn)換為GLTF 格式，根據(jù)確定需要導(dǎo)出的Revit 模型的數(shù)據(jù)類型設(shè)計GLTF 的數(shù)據(jù)結(jié)構(gòu)，并利用Revit 二次開發(fā)技術(shù)開發(fā)插件，將Revit 模型文件導(dǎo)出為GLTF 文件，從而實現(xiàn)Revit 模型幾何信息及其相關(guān)屬性信息的提取， 并將其分別存儲在GLTF 格式文件的幾何區(qū)域和屬性區(qū)域，實現(xiàn)Revit 模型的幾何轉(zhuǎn)換。

獲得GLTF 數(shù)據(jù)結(jié)構(gòu)之后，需要開發(fā)程序?qū)eometries、Materials 和Object 三部分的信息提取出來并實現(xiàn)數(shù)據(jù)結(jié)構(gòu)的轉(zhuǎn)換。 文中選擇應(yīng)用Revit 二次開發(fā)技術(shù)開發(fā)一款插件將模型的信息進行提取。 Revit 能夠進行二次開發(fā)的前提是AutodeskRevit 提供了豐富的應(yīng)用程序編程接口API，其加載過程如圖2 所示。文中選擇C#語言完成二次開發(fā)的編程，應(yīng)用的開發(fā)平臺是VisualStudio 2017 和Revit2018，VisualStudio 2017 用于代碼編寫，Revit2018 用于代碼測試。

圖2 附加模塊的加載

2.3 算法流程

Revit 二次開發(fā)的環(huán)境搭建完成之后即可在VisualStudio 2017 平臺中進行程序的編寫，插件開發(fā)的核心步驟如下：（1）添加外部引用：引用兩個最常用的動態(tài)鏈接庫RevitAPIUI.dll 和RevitAPI.dll。 （2）外部命令接口IExternalCommand 的實現(xiàn)：IExternal-Command 接口只有一個抽象函數(shù)Excute，重載這個函數(shù)來實現(xiàn)IExternalCommand，Excute 函數(shù)將作為外部命令的主函數(shù)被調(diào)用。 （3）Revit 二次開發(fā)BIM 模型導(dǎo)出：Revit 提供了專門的導(dǎo)出類CustomExporter。 使用CustomExporter 自定義導(dǎo)出接口，使用Exporter 導(dǎo)出數(shù)據(jù)模型。（4）Revit 模型幾何信息和屬性信息的提?。簬缀涡畔⒌奶崛±缒Ｐ偷狞c是通過函數(shù)On Polymesh（）實現(xiàn)。通過Revit 二次開發(fā)技術(shù)開發(fā)插件，將Revit 模型轉(zhuǎn)換為GLTF 格式文件，最后將生成的GLTF 格式文件進行本地存儲。

2.4 八叉樹場景渲染優(yōu)化

插件開發(fā)將Revit 模型導(dǎo)出適用于WebGL 解析的文件之后， 接下來就是應(yīng)用WebGL 技術(shù)將Revit 模型渲染在瀏覽器端。

利用WebGL 技術(shù)實現(xiàn)Revit 模型的輕量化顯示，還需要實現(xiàn)對模型的旋轉(zhuǎn)、縮放、查詢等功能。 要實現(xiàn)對模型的三維交互，首先就需要對模型進行拾取，文中通過射線相交的方式實現(xiàn)對模型的拾取。 射線相交法就是將生成的二維坐標轉(zhuǎn)換成三維坐標，然后與相機的原點相連接生成一條射線，原理圖如圖3 所示。

圖3 射線相交法原理圖

通過對模型的拾取，獲取模型的屬性信息后，會獲取包含數(shù)千個“族”實例對象的Revit 模型。 由于大體積的模型包含大量的幾何信息，所以文中利用八叉樹算法對Revit 模型數(shù)據(jù)進行有效的管理，從而達到優(yōu)化渲染的目的。

文中選用WebGL 的框架。 Object3D 是WebGL 中大多數(shù)對象的基類，構(gòu)成其框架的包括場景、相機、燈光和渲染最小幾何單元等，所以可以用Object3D 的Group 類對模型進行分組，根據(jù)所構(gòu)建的場景圖來構(gòu)造Revit 模型的渲染樹，如圖4 所示。

圖4 Revit 模型的渲染樹

Revit 模型是由很多的“族”實例對象構(gòu)成，每個“族”實例又由若干的點、線、面組成，將“族”實例作為劃分的基本單位，這樣保證了八叉樹的每個節(jié)點的一致性。 首先對導(dǎo)出的GLTF 文件進行讀取，遍歷其中所有的“簇”的實例對象，將每個“族”實例對象放入沒有子節(jié)點的節(jié)點中，然后判斷每個“族”實例對象的閾值大小和深度：若大于閾值或沒有達到最大深度，將對其進行重新調(diào)整。 最后，將生成的Revit 模型的八叉樹場景存入GLTF 文件中。

3 實驗與測試

3.1 渲染時間測試

文中以小型工程模型和空調(diào)壓縮機模型為例，實現(xiàn)輕量化平臺的測試。 首先，在Revit Architecture 中打開需要測試的Revit 模型文件；然后，利用Revit 二次開發(fā)的技術(shù)開發(fā)插件，將Revit 模型轉(zhuǎn)化為GLTF 的文件格式；最后，通過WebGL 的技術(shù)來解析GLTF 格式文件，實現(xiàn)模型在瀏覽器端的輕量化顯示。

模型的渲染時間是指當模型開始渲染的線程到能夠顯示到瀏覽器中所占用的時間。 為了測試輕量化平臺的渲染性能，文中對空調(diào)壓縮機模型和大型工廠模型進行測試（如圖5 所示），實驗平臺選用臺式機和筆記本，其配置見表1。

圖5 Revit 模型三維交互效果

表1 實驗設(shè)備信息

為了驗證八叉樹算法是否能夠加快Revit 模型的渲染時間，進行了對比實驗，實驗結(jié)果見表2。從表中的數(shù)據(jù)可以看出，模型通過八叉樹算法渲染后，對于較小的空調(diào)壓縮機模型，模型在臺式機上渲染的時間達到了3 s，但是在筆記本上的渲染時間達到了15 s，雖然大于在臺式機上的渲染時間，但仍在用戶等待的范圍之內(nèi)，但是沒有經(jīng)過八叉樹算法優(yōu)化的模型渲染時間較長，大型工廠模型渲染時間增加了14 s，空調(diào)壓縮機模型渲染時間增加了6 s。在筆記本上渲染的時間有所增加，但是通過八叉樹算法優(yōu)化后的模型，渲染時間有所縮短。

表2 Revit 模型渲染時間對比

3.2 平臺兼容性測試

對于不同的瀏覽器，其兼容性不同，用戶的使用體驗也不一樣，因此對于輕量化平臺進行兼容性測試是非常必要的。 為了讓用戶能夠在不同的瀏覽器中使用該平臺，文中對不同的瀏覽器的兼容性進行了測試，如圖6 所示。 分別在Chrome 瀏覽器、360 瀏覽器、以及IE10 瀏覽器上進行了測試。 測試的內(nèi)容包括，能夠在瀏覽器內(nèi)瀏覽模型，能否對模型進行移動、旋轉(zhuǎn)、縮放等。 結(jié)果見表3。 通過表中內(nèi)容可以看出，Chrome 瀏覽器的兼容性是最好的，能夠通過鼠標對渲染的模型進行移動、選擇、縮放等操作；而在360 瀏覽器中，無法對渲染的模型進行移動和旋轉(zhuǎn)；在IE10 瀏覽器中，無法對模型進行移動和縮放。 360 瀏覽器、IE10 瀏覽器對輕量化平臺的兼容性稍差，Chrome 瀏覽器對輕量化平臺的兼容性最好。

圖6 平臺兼容性測試

表3 不同版本瀏覽器兼容性測試

4 結(jié)語

以實現(xiàn)Revit 模型的輕量化渲染為目標。 首先，對Revit 模型的IFC 文件信息和模型輕量化方式進行研究， 利用二次開發(fā)的技術(shù)實現(xiàn)了將Revit 模型轉(zhuǎn)換為GLTF 文件的功能。 然后， 利用WebGL 技術(shù)解決了GLTF 文件的幾何轉(zhuǎn)換和輕量化顯示問題。最后，通過八叉樹算法，優(yōu)化了大體積模型的渲染問題。通過上述最優(yōu)化設(shè)計仿真與實驗表明，文中提出的方法能夠?qū)δＰ图毠?jié)進行較好保留的同時，加快在瀏覽器端模型的加載速度，實現(xiàn)交互功能。