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

馮雨晴， 奚雪峰， 崔志明

（蘇州科技大學 電子與信息工程學院，江蘇 蘇州 215009；2.蘇州市虛擬現實智能交互及應用技術重點實驗室，江蘇 蘇州 215009）

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

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

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

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

1 國內外研究現狀

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

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

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

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

2 Revit 模型輕量化研究

2.1 模型數據結構建立

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

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

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

圖1 模型數據結構

2.2 Revit 模型幾何轉換

在獲取所需的模型數據之后，需要將數據打包轉換為GLTF 格式，根據確定需要導出的Revit 模型的數據類型設計GLTF 的數據結構，并利用Revit 二次開發技術開發插件，將Revit 模型文件導出為GLTF 文件，從而實現Revit 模型幾何信息及其相關屬性信息的提取， 并將其分別存儲在GLTF 格式文件的幾何區域和屬性區域，實現Revit 模型的幾何轉換。

獲得GLTF 數據結構之后，需要開發程序將Geometries、Materials 和Object 三部分的信息提取出來并實現數據結構的轉換。 文中選擇應用Revit 二次開發技術開發一款插件將模型的信息進行提取。 Revit 能夠進行二次開發的前提是AutodeskRevit 提供了豐富的應用程序編程接口API，其加載過程如圖2 所示。文中選擇C#語言完成二次開發的編程，應用的開發平臺是VisualStudio 2017 和Revit2018，VisualStudio 2017 用于代碼編寫，Revit2018 用于代碼測試。

圖2 附加模塊的加載

2.3 算法流程

Revit 二次開發的環境搭建完成之后即可在VisualStudio 2017 平臺中進行程序的編寫，插件開發的核心步驟如下：（1）添加外部引用：引用兩個最常用的動態鏈接庫RevitAPIUI.dll 和RevitAPI.dll。 （2）外部命令接口IExternalCommand 的實現：IExternal-Command 接口只有一個抽象函數Excute，重載這個函數來實現IExternalCommand，Excute 函數將作為外部命令的主函數被調用。 （3）Revit 二次開發BIM 模型導出：Revit 提供了專門的導出類CustomExporter。 使用CustomExporter 自定義導出接口，使用Exporter 導出數據模型。（4）Revit 模型幾何信息和屬性信息的提取：幾何信息的提取例如模型的點是通過函數On Polymesh（）實現。通過Revit 二次開發技術開發插件，將Revit 模型轉換為GLTF 格式文件，最后將生成的GLTF 格式文件進行本地存儲。

2.4 八叉樹場景渲染優化

插件開發將Revit 模型導出適用于WebGL 解析的文件之后， 接下來就是應用WebGL 技術將Revit 模型渲染在瀏覽器端。

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

圖3 射線相交法原理圖

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

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

圖4 Revit 模型的渲染樹

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

3 實驗與測試

3.1 渲染時間測試

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

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

圖5 Revit 模型三維交互效果

表1 實驗設備信息

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

表2 Revit 模型渲染時間對比

3.2 平臺兼容性測試

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

圖6 平臺兼容性測試

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

4 結語

以實現Revit 模型的輕量化渲染為目標。 首先，對Revit 模型的IFC 文件信息和模型輕量化方式進行研究， 利用二次開發的技術實現了將Revit 模型轉換為GLTF 文件的功能。 然后， 利用WebGL 技術解決了GLTF 文件的幾何轉換和輕量化顯示問題。最后，通過八叉樹算法，優化了大體積模型的渲染問題。通過上述最優化設計仿真與實驗表明，文中提出的方法能夠對模型細節進行較好保留的同時，加快在瀏覽器端模型的加載速度，實現交互功能。