基于Web的Revit模型輕量化和大屏顯示研究

汪學清,董 澤,陳 博,趙云猛

(中國礦業大學(北京) 力學與建筑工程學院,北京 100083)

隨著計算機技術的進步,建設行業的信息化發展勢頭不可阻擋。BIM(Building Information Modeling)技術具有可視化、參數化、可模擬性等諸多優勢,成為建設行業的首選。美國作為最早應用BIM技術的國家,為BIM的應用推出了很多標準,這也為BIM在全球的推廣做出了貢獻[1]。同時我國住房和城鄉建設部也頒布了許多政策和標準[2-4],以鼓勵和支持建筑行業應用BIM技術。現階段,BIM技術在工程應用中依然存在許多問題,施工人員希望在施工現場輕松便捷地瀏覽三維模型,但施工現場環境往往較難滿足BIM軟件的應用。因此,在Web端(瀏覽器)瀏覽建筑模型成為研究應用的熱點,對于指導工程施工具有重要意義。

WebGL技術可被用于創建具有復雜3D結構的網站頁面,通過JavaScript語言編寫網頁代碼即可實現三維模型的展示[5]。HTML5,WebGL以及CSS技術的出現為在網頁瀏覽三維模型并進行交互提供了可能性。前人做了如下研究:AHYUN等[6]基于WebGL搭建的三維模型展示平臺實現了3D空間信息平臺展示功能。賀佳佳[7]將輕量化技術與Revit二次開發結合起來,開發出的BIM輕量化模型顯示平臺基本實現了Web端的輕量化顯示。佘宇深[8]在全橋建模的基礎上,提出了以JSON形式進行輕量化并實現Web顯示的方法。閻超[9]將Revit參數化模型工程信息輸出為XML格式,并實現模型在Web端重構與展示。同時SHIROLE等[10]也通過XML形式實現了對BIM模型信息的訪問,為格式轉換格式提供了新的方向。王占軍等[11]通過采用GLTF格式實現模型數據轉換功能,引入3D Tiles技術實現海量三維模型基于圖形引擎系統的集成與展示功能。呂婧等[12]驗證了BIM模型數據轉換為GLTF格式的可行性,為本文研究提供了參考。綜上,GLTF傳輸格式作為連接BIM模型與Web端模型的“橋梁”應用于Web端模型顯示具有可行性,并且相比于XML格式具有巨大優勢,因此選擇GLTF格式作為中間格式。

要在保證模型真實性的前提下實現Web端的輕量化顯示,必須經過模型格式轉換和渲染交互兩個關鍵環節,其中,須對插件導出的GLTF文件進行輕量化處理。Web端顯示思路如圖1所示。

圖1 BIM模型輕量化顯示流程

1 模型輕量化

實現BIM模型的輕量化,即實現模型文件體量的壓縮。此過程分為兩步:①借助二次開發技術開發自定義插件將Revit模型導出為GLTF格式的中間文件;②通過內置npm載入gltf-pipeline插件壓縮GLTF文件,實現模型輕量化。

1.1 插件導出

Revit模型建立之后,模型幾何和屬性信息都儲存在.rvt格式的文件中,瀏覽器無法進行讀取。借助Revit API開發插件將Revit模型的幾何、材質等信息儲存在GLTF文件中。

插件開發主要分為如下3個步驟:①在Visual Studio2019內新建類庫,命名為RevitexportGltf;②在類庫內引用RevitAPI.dll,RevitAPIUI.dll,并通過IExternalCommand外部命令,加載Excute()函數,借助 Revit內提供的CustomExporter自定義導出接口;③編程結束,在Revit內通過Add-InManager加載.dll文件,查看插件運行結果情況。開發流程如圖2所示。

圖2 插件導出二次開發流程

在CustomExporter類中,重載OnPolyMesh(),OnMaterials()等15個方法,實現模型中點、邊界、材質等元素的提取。幾何信息的獲取主要是獲取三角網格的頂點坐標、頂點索引、法線向量、法線向量索引、幾何體中心、唯一標識符ID;屬性信息的獲取是在導出材質貼圖后,提取出模型的name、userData、標識符ID等,以上幾何信息和屬性信息最后都以Array的形式存儲在GLTF文件中,獲取信息的過程如圖3所示。

圖3 模型信息提取過程

在信息提取過程中,首先調用OnElementBegin()和OnElementEnd()循環遍歷模型的所有元素和“族”實例對象,之后調用OnFaceBegin()函數獲取模型的face數據,調用OnPolymesh()和OnMaterial()函數獲取模型的Geometry與Material,最后通過OnFaceEnd()判斷是否遍歷完模型中的所有構件,若沒有則返回OnElementEnd()函數進行繼續遍歷;若已經遍歷完模型的所有元素就導出GLTF文件,完成格式轉換。

1.2 模型文件數據輕量化

模型成功轉換為GLTF格式后,文件中產生了許多冗余數據,使導出的文件相比之前的文件體量產生了不同程度的增長。因此,通過Draco壓縮算法對模型數據進行輕量化處理,減小模型文件體量。

Draco是谷歌開發的一種大幅加速3D數據網格的編碼、傳輸和解碼的庫,主要應用于壓縮和解壓3D網格和點云數據,能有效改善3D圖形網格的存儲和傳輸。Draco的底層壓縮基于Edgebreaker算法,Edgebreaker通過一系列步驟遍歷網格。對于每一步,算法都需要訪問并編碼一個尚未訪問的三角形網格。在每個階段,輸入網格被劃分為不相連的區域,這些區域可以共享一個頂點,但沒有邊共享。Edgebreaker通過分析頂點v與柵邊g、邊界B之間的關系,可以分為下面五種情況[13]:C,L,E,R,S。五種標識符如圖4所示。

圖4 操作符分類

五種標識符分別代表著五種遍歷三角形網格的方式:圖4(a)中操作符S表示兩邊網格都未被遍歷;圖4(b)中操作符R表示左邊網格未被遍歷,右邊網格已被遍歷;圖4(c)中操作符C表示左右兩邊網格都未被遍歷;圖4(d)中操作符L表示左邊網格已被遍歷,右邊網格未被遍歷;圖4(e)中操作符E表示兩邊網格都已遍歷。

如圖5所示,對于一個有邊界的簡單網格進行壓縮時,Edgebreaker算法起始于綠色的門,跟隨藍色箭頭表示的路徑依次進行遍歷,并借助圖4所示的五種操作符方法遍歷三角形網格,直到將所有網格遍歷。

圖5 Edgebreaker網格壓縮示意

2 模型Web端重構、交互與優化

Three.js作為一種簡化使用WebGL技術的方式[14],近幾年被國內外程序員廣泛使用。故本文在Three.js框架內實現輕量化模型在Web端的重構、渲染與顯示,渲染流程如圖6所示。

圖6 Three.js渲染流程

首先在Three.js框架中構建三維場景(Scene)、相機(Camera)、渲染器(Renderer)和光源(Light)等主要元素,之后導入輕量化后的GLTF格式文件,接著在VScode中利用Three.js框架中的gltfLoader和dracoLoader對GLTF文件內模型數據進行解析,最后通過添加方法等,在瀏覽器中實現模型重構與交互。

模型重構之后,為了方便瀏覽和查看其屬性信息,可以通過在VScode添加控件等為模型增加交互功能。其中包括平移、縮放、旋轉、拾取、高亮與屬性表格等。

2.1 幾何變換:平移、縮放與旋轉

模型首先要通過幾何變換中的平移、旋轉、縮放或組合變換實現將坐標系由局部坐標系轉換到世界坐標系。

1) 平移。在平移操作過程中需要進行矩陣變換。假如場景中存在點A,坐標為(X,Y,Z,1),經過平移后的坐標為A1,坐標為(X1,Y1,Z1,1)。過程中點按照平移矩陣T平移,在各個軸方向的位移分量分別為Xt,Yt,Zt,則平移前的點A和平移后的點A1關系如下:

(1)

其中平移矩陣T:

(2)

2) 旋轉。在旋轉操作中,三個主要因素是旋轉軸、旋轉方向和旋轉角度。假設以z軸為旋轉軸,逆時針旋轉θ°后,則旋轉前的點A(X,Y,Z)和旋轉后的點A1(X1,Y1,Z1)關系如下:

(3)

3) 縮放。假設三個坐標軸的縮放因子分別為Zx,Zy,Zz,縮放矩陣為R,則縮放前的點A和縮放后的點A1關系如下:

(4)

其中縮放矩陣R:

(5)

2.2 坐標系轉換

模型坐標系經過幾何變換之后,還需要依次經過視圖變換、投影變換、視口變換,將世界坐標系轉換為標準設備坐標系,再轉為屏幕坐標系,以實現對模型坐標的獲取,轉換流程如圖7所示。

圖7 模型坐標轉換流程

2.3 射線法拾取

在交互事件中對模型構件的拾取是通過射線法獲取的。射線法是利用一根有箭頭的紅色射線去和三維場景中的模型構件相交,相交的模型對象就是被拾取到的模型。

紅色射線由透視相機發出,穿過藍色屏幕上的位置P0,繼續延伸,交視棱臺近截面于P1,交視棱臺遠截面于P3,得到一條線段P1P3,線段P1P3就是眼睛能看到的射線在透視空間中的部分,并且這條線段相交的模型,就是鼠標點擊選中的空間模型;這個交點坐標就是鼠標點擊選中模型的交點空間三維坐標。射線法原理如圖8所示。

圖8 射線法原理

2.4 屬性獲取表格

屬性信息是通過構件唯一標識符確定的,通過元素ElementId獲取,并在重構時與模型相關聯,然后采用射線法,進行鼠標拾取,當射線與第一個構件相交時觸發事件使其高亮并展示構件屬性信息。通過這種方法可以實現在瀏覽器中實時查看具體構件詳細屬性的功能,屬性獲取欄如圖9所示。

圖9 屬性獲取欄

高亮顯示是通過射線法拾取技術,拾取到三維世界中的某個對象,當使用鼠標點擊某個結構時,被選中的結構、顏色會發生改變,同時會彈出對應屬性,效果如圖10所示,其中墻裝飾高亮顯示為粉色。

圖10 高亮拾取

3 模型顯示與交互實驗

本文以某一高層建筑塔樓作為渲染的主要對象,以某辦公樓、某教學樓作為對比對象,模型信息見表1。采用的機器型號為Intel(R) Core(TM) i9-12900H@ 2.70GHz、16 GB內存以及64位Windows11操作系統的筆記本電腦,基于Google Chrome瀏覽器實現。

表1 模型信息

3.1 模型外觀

為了更好地還原在Revit中的模型外觀,在二次開發中導出GLTF格式的同時導出模型的材質貼圖。在模型重構過程中配上材質貼圖后,模型的Revit效果圖和網頁端渲染圖的對比如圖11所示。

圖11 模型外觀對比

3.2 瀏覽器兼容性測試與交互事件

在操作過程中,先添加controls軌道球控件,檢測鍵盤和鼠標的操作事件并將其定義于瀏覽器之中。執行操作時會接收到反饋的對象,給該對象添加一個監聽事件來監聽鼠標、鍵盤的變化。執行controls語句時,相機參數隨著用戶操作鼠標鍵盤變化,最終呈現出變化后的渲染結果,鼠標鍵盤操作事件見表2。引用代碼如下:

表2 鼠標鍵盤交互事件

const controls=new OrbitControls(camera, canvas)

事件交互功能在Chrome瀏覽器進行測試,效果如圖12所示。

圖12 Chrome瀏覽器模型交互

瀏覽器兼容性對模型渲染效果和交互功能有重要影響。因此,對常用的多個瀏覽器進行兼容性測試,效果如圖13所示。

圖13 不同瀏覽器展示效果

在測試的四種瀏覽器中交互結果見表3,較好地實現了模型的交互功能,瀏覽器兼容性測試結果良好。

表3 瀏覽器兼容性操作事件

3.3 Draco算法壓縮效率

Draco算法壓縮模型的效率直接影響到Web端輕量化顯示的效果。建筑模型在通過插件導出之后,文件體量會發生不同程度的變化。經過Draco壓縮算法輕量化處理之后,文件體量會大大減小,壓縮優化率會穩定在50%以上,并且隨著模型體量的增加,壓縮優化率降低,具體數據見表4。

表4 BIM整體模型參數化信息

4 大屏顯示

數據大屏展示系統具有直觀化、關聯化、藝術化和交互性的特點,可以通過合理的可視化使用戶感知大量數據,用可視化方式呈現出來,會更直觀體現數據信息[15]。本文通過使用iframe標簽,將Web端模型輕量化顯示的Index.html文件內嵌于通過CSS3技術和HTML5創建的數據大屏系統中,更美觀、更細致地展示BIM模型。數據大屏系統架構如圖14所示。

圖14 數據大屏系統架構

1) 技術層:主要包括在創建數據大屏系統時需要采用的架構技術,如CSS3,HTML5以及Three.js框架等。

2) 展示層:大屏展示平臺,頁面包括左側模型展示和右側構件、圖表等數據展示。

3) 應用層:模型渲染交互功能、登錄、模型全景展示。

為大屏系統設置的登錄界面如圖15所示。

圖15 登陸界面

BIM模型大屏展示系統頁面布局如圖16所示。從登陸界面進入到BIM模型展示系統后,左側為主要信息展示區域,展示BIM模型,右側為次要信息展示區域。為避免長時間直視大屏產生視覺疲勞,讓畫面保持平穩,主題色、背景色選用低飽和度、低亮度的暗色系中的藍色、深藍色為主題顏色,比較符合BIM技術的科技感和可視化特點。

圖16 頁面布局效果

為獲得更好的操作體驗,優先考慮使用Google Chrome瀏覽器瀏覽頁面。大屏展示頁面地址為http://127.0.0.1:5501/bigscreen.html。本文設計的數據大屏展示系統,用戶可以選擇模型和修改系統版式以提供直觀、舒適的數據大屏交互體驗。塔樓Revit模型上傳到數據大屏系統的三維視圖如圖17所示。

圖17 塔樓模型三維視圖

Revit模型在Web端的重構與交互功能在大屏系統保持正常運行,整體效果如圖18所示。

圖18 大屏展示系統中的模型交互

5 結論

1) 通過Revit二次開發,實現了模型從RVT格式到GLTF格式的轉換;采用Draco壓縮算法,實現了模型文件的輕量化處理;選用Three.js引擎,實現了BIM模型在Web端的顯示以及模型交互功能。

2) 在Web端實現模型顯示與交互功能的基礎上,增加了數據大屏功能,使模型展示更系統、更美觀、更詳細,達到了較好的輕量化顯示效果。