汪學(xué)清,董 澤,陳 博,趙云猛

(中國(guó)礦業(yè)大學(xué)(北京) 力學(xué)與建筑工程學(xué)院,北京 100083)

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

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

要在保證模型真實(shí)性的前提下實(shí)現(xiàn)Web端的輕量化顯示,必須經(jīng)過模型格式轉(zhuǎn)換和渲染交互兩個(gè)關(guān)鍵環(huán)節(jié),其中,須對(duì)插件導(dǎo)出的GLTF文件進(jìn)行輕量化處理。Web端顯示思路如圖1所示。

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

1 模型輕量化

實(shí)現(xiàn)BIM模型的輕量化,即實(shí)現(xiàn)模型文件體量的壓縮。此過程分為兩步:①借助二次開發(fā)技術(shù)開發(fā)自定義插件將Revit模型導(dǎo)出為GLTF格式的中間文件;②通過內(nèi)置npm載入gltf-pipeline插件壓縮GLTF文件,實(shí)現(xiàn)模型輕量化。

1.1 插件導(dǎo)出

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

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

圖2 插件導(dǎo)出二次開發(fā)流程

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

圖3 模型信息提取過程

在信息提取過程中,首先調(diào)用OnElementBegin()和OnElementEnd()循環(huán)遍歷模型的所有元素和“族”實(shí)例對(duì)象,之后調(diào)用OnFaceBegin()函數(shù)獲取模型的face數(shù)據(jù),調(diào)用OnPolymesh()和OnMaterial()函數(shù)獲取模型的Geometry與Material,最后通過OnFaceEnd()判斷是否遍歷完模型中的所有構(gòu)件,若沒有則返回OnElementEnd()函數(shù)進(jìn)行繼續(xù)遍歷;若已經(jīng)遍歷完模型的所有元素就導(dǎo)出GLTF文件,完成格式轉(zhuǎn)換。

1.2 模型文件數(shù)據(jù)輕量化

模型成功轉(zhuǎn)換為GLTF格式后,文件中產(chǎn)生了許多冗余數(shù)據(jù),使導(dǎo)出的文件相比之前的文件體量產(chǎn)生了不同程度的增長(zhǎng)。因此,通過Draco壓縮算法對(duì)模型數(shù)據(jù)進(jìn)行輕量化處理,減小模型文件體量。

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

圖4 操作符分類

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

如圖5所示,對(duì)于一個(gè)有邊界的簡(jiǎn)單網(wǎng)格進(jìn)行壓縮時(shí),Edgebreaker算法起始于綠色的門,跟隨藍(lán)色箭頭表示的路徑依次進(jìn)行遍歷,并借助圖4所示的五種操作符方法遍歷三角形網(wǎng)格,直到將所有網(wǎng)格遍歷。

圖5 Edgebreaker網(wǎng)格壓縮示意

2 模型Web端重構(gòu)、交互與優(yōu)化

Three.js作為一種簡(jiǎn)化使用WebGL技術(shù)的方式[14],近幾年被國(guó)內(nèi)外程序員廣泛使用。故本文在Three.js框架內(nèi)實(shí)現(xiàn)輕量化模型在Web端的重構(gòu)、渲染與顯示,渲染流程如圖6所示。

圖6 Three.js渲染流程

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

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

2.1 幾何變換:平移、縮放與旋轉(zhuǎn)

模型首先要通過幾何變換中的平移、旋轉(zhuǎn)、縮放或組合變換實(shí)現(xiàn)將坐標(biāo)系由局部坐標(biāo)系轉(zhuǎn)換到世界坐標(biāo)系。

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

(1)

其中平移矩陣T:

(2)

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

(3)

3) 縮放。假設(shè)三個(gè)坐標(biāo)軸的縮放因子分別為Zx,Zy,Zz,縮放矩陣為R,則縮放前的點(diǎn)A和縮放后的點(diǎn)A1關(guān)系如下:

(4)

其中縮放矩陣R:

(5)

2.2 坐標(biāo)系轉(zhuǎn)換

模型坐標(biāo)系經(jīng)過幾何變換之后,還需要依次經(jīng)過視圖變換、投影變換、視口變換,將世界坐標(biāo)系轉(zhuǎn)換為標(biāo)準(zhǔn)設(shè)備坐標(biāo)系,再轉(zhuǎn)為屏幕坐標(biāo)系,以實(shí)現(xiàn)對(duì)模型坐標(biāo)的獲取,轉(zhuǎn)換流程如圖7所示。

圖7 模型坐標(biāo)轉(zhuǎn)換流程

2.3 射線法拾取

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

紅色射線由透視相機(jī)發(fā)出,穿過藍(lán)色屏幕上的位置P0,繼續(xù)延伸,交視棱臺(tái)近截面于P1,交視棱臺(tái)遠(yuǎn)截面于P3,得到一條線段P1P3,線段P1P3就是眼睛能看到的射線在透視空間中的部分,并且這條線段相交的模型,就是鼠標(biāo)點(diǎn)擊選中的空間模型;這個(gè)交點(diǎn)坐標(biāo)就是鼠標(biāo)點(diǎn)擊選中模型的交點(diǎn)空間三維坐標(biāo)。射線法原理如圖8所示。

圖8 射線法原理

2.4 屬性獲取表格

屬性信息是通過構(gòu)件唯一標(biāo)識(shí)符確定的,通過元素ElementId獲取,并在重構(gòu)時(shí)與模型相關(guān)聯(lián),然后采用射線法,進(jìn)行鼠標(biāo)拾取,當(dāng)射線與第一個(gè)構(gòu)件相交時(shí)觸發(fā)事件使其高亮并展示構(gòu)件屬性信息。通過這種方法可以實(shí)現(xiàn)在瀏覽器中實(shí)時(shí)查看具體構(gòu)件詳細(xì)屬性的功能,屬性獲取欄如圖9所示。

圖9 屬性獲取欄

高亮顯示是通過射線法拾取技術(shù),拾取到三維世界中的某個(gè)對(duì)象,當(dāng)使用鼠標(biāo)點(diǎn)擊某個(gè)結(jié)構(gòu)時(shí),被選中的結(jié)構(gòu)、顏色會(huì)發(fā)生改變,同時(shí)會(huì)彈出對(duì)應(yīng)屬性,效果如圖10所示,其中墻裝飾高亮顯示為粉色。

圖10 高亮拾取

3 模型顯示與交互實(shí)驗(yàn)

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

表1 模型信息

3.1 模型外觀

為了更好地還原在Revit中的模型外觀,在二次開發(fā)中導(dǎo)出GLTF格式的同時(shí)導(dǎo)出模型的材質(zhì)貼圖。在模型重構(gòu)過程中配上材質(zhì)貼圖后,模型的Revit效果圖和網(wǎng)頁端渲染圖的對(duì)比如圖11所示。

圖11 模型外觀對(duì)比

3.2 瀏覽器兼容性測(cè)試與交互事件

在操作過程中,先添加controls軌道球控件,檢測(cè)鍵盤和鼠標(biāo)的操作事件并將其定義于瀏覽器之中。執(zhí)行操作時(shí)會(huì)接收到反饋的對(duì)象,給該對(duì)象添加一個(gè)監(jiān)聽事件來監(jiān)聽鼠標(biāo)、鍵盤的變化。執(zhí)行controls語句時(shí),相機(jī)參數(shù)隨著用戶操作鼠標(biāo)鍵盤變化,最終呈現(xiàn)出變化后的渲染結(jié)果,鼠標(biāo)鍵盤操作事件見表2。引用代碼如下:

表2 鼠標(biāo)鍵盤交互事件

const controls=new OrbitControls(camera, canvas)

事件交互功能在Chrome瀏覽器進(jìn)行測(cè)試,效果如圖12所示。

圖12 Chrome瀏覽器模型交互

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

圖13 不同瀏覽器展示效果

在測(cè)試的四種瀏覽器中交互結(jié)果見表3,較好地實(shí)現(xiàn)了模型的交互功能,瀏覽器兼容性測(cè)試結(jié)果良好。

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

3.3 Draco算法壓縮效率

Draco算法壓縮模型的效率直接影響到Web端輕量化顯示的效果。建筑模型在通過插件導(dǎo)出之后,文件體量會(huì)發(fā)生不同程度的變化。經(jīng)過Draco壓縮算法輕量化處理之后,文件體量會(huì)大大減小,壓縮優(yōu)化率會(huì)穩(wěn)定在50%以上,并且隨著模型體量的增加,壓縮優(yōu)化率降低,具體數(shù)據(jù)見表4。

表4 BIM整體模型參數(shù)化信息

4 大屏顯示

數(shù)據(jù)大屏展示系統(tǒng)具有直觀化、關(guān)聯(lián)化、藝術(shù)化和交互性的特點(diǎn),可以通過合理的可視化使用戶感知大量數(shù)據(jù),用可視化方式呈現(xiàn)出來,會(huì)更直觀體現(xiàn)數(shù)據(jù)信息[15]。本文通過使用iframe標(biāo)簽,將Web端模型輕量化顯示的Index.html文件內(nèi)嵌于通過CSS3技術(shù)和HTML5創(chuàng)建的數(shù)據(jù)大屏系統(tǒng)中,更美觀、更細(xì)致地展示BIM模型。數(shù)據(jù)大屏系統(tǒng)架構(gòu)如圖14所示。

圖14 數(shù)據(jù)大屏系統(tǒng)架構(gòu)

1) 技術(shù)層:主要包括在創(chuàng)建數(shù)據(jù)大屏系統(tǒng)時(shí)需要采用的架構(gòu)技術(shù),如CSS3,HTML5以及Three.js框架等。

2) 展示層:大屏展示平臺(tái),頁面包括左側(cè)模型展示和右側(cè)構(gòu)件、圖表等數(shù)據(jù)展示。

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

為大屏系統(tǒng)設(shè)置的登錄界面如圖15所示。

圖15 登陸界面

BIM模型大屏展示系統(tǒng)頁面布局如圖16所示。從登陸界面進(jìn)入到BIM模型展示系統(tǒng)后,左側(cè)為主要信息展示區(qū)域,展示BIM模型,右側(cè)為次要信息展示區(qū)域。為避免長(zhǎng)時(shí)間直視大屏產(chǎn)生視覺疲勞,讓畫面保持平穩(wěn),主題色、背景色選用低飽和度、低亮度的暗色系中的藍(lán)色、深藍(lán)色為主題顏色,比較符合BIM技術(shù)的科技感和可視化特點(diǎn)。

圖16 頁面布局效果

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

圖17 塔樓模型三維視圖

Revit模型在Web端的重構(gòu)與交互功能在大屏系統(tǒng)保持正常運(yùn)行,整體效果如圖18所示。

圖18 大屏展示系統(tǒng)中的模型交互

5 結(jié)論

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

2) 在Web端實(shí)現(xiàn)模型顯示與交互功能的基礎(chǔ)上,增加了數(shù)據(jù)大屏功能,使模型展示更系統(tǒng)、更美觀、更詳細(xì),達(dá)到了較好的輕量化顯示效果。