基于Web的BIM模型輕量化展示及渲染控制研究

王 琪，李智杰，李昌華，張 頡

(西安建筑科技大學 信息與控制工程學院，西安 710055)

0 引言

建筑信息模型(BIM,building information model)在建筑的設計、施工、運維的全生命周期中具有極高的應用價值[1]。BIM技術在國內外都有良好的發展，但是對于目前建筑業的需要，建筑體量也是愈來愈龐大，更多的信息數據導致BIM軟件對于計算機的軟硬件要求很高，而且BIM的實現大多是基于C/S架構的，需要用計算機操作并且安裝專業的BIM軟件，這嚴重影響了BIM的發展。隨著Web端以及3D渲染引擎的迅速崛起，對BIM模型的Web端渲染提供了一種可行性方案[2]。在信息化社會，移動端已成為主流，所以將BIM模型以B/S架構可視化渲染，并擺脫專有軟件、終端平臺的約束，這對于BIM的推動以及輕量化研究都有重大意義[3]。因此，對于BIM模型數據的輕量化以及將其放置在Web端進行渲染優化都是十分必要的。

目前在Web端實現BIM模型輕量化展示以及場景渲染控制，國內外研發部門和學者已有相關研究。Autodesk所研發的Forge云平臺以及廣聯達推出的協筑平臺都包含了BIM模型網頁端瀏覽功能，但是不提供用戶需要的開發接口且存在敏感數據安全隱患問題。為此，學者們通過建立私有云的方式改善了該問題，文獻[4-6]實現了BIM模型在Web端展示，并提供了模型輕量化的實現方案，但是對于模型數據的優化以及場景渲染效果不佳。文獻[7-8]從模型三角面片入手，提出了模型簡化邊折疊算法，將三角網格簡化降低面片復雜度，但是影響了模型外觀。文獻[9-10]通過剔除視野范圍內的不可見構件，降低了場景的GPU開銷，然而剔除計算過程又極其復雜，嚴重降低了渲染速度，文獻[11]提出了八叉樹剔除算法，解決了這一難題，然而構建八叉樹的過程會極大的消耗存儲空間。

鑒于此，本文提出了一種基于Web的BIM模型輕量化展示及渲染控制方法，對于模型數據優化，通過冗余頂點刪除法和Draco算法來壓縮模型數據，在確保保真度的前提下，將模型數據體量以及網頁端加載時間降低；對于渲染優化，提出了一種LOD與自適應渲染相結合的LOD-AD優化算法來對場景內構件進行渲染控制，有效剔除低重要度構件。實驗結果表明，本文方法極大壓縮了模型體量，并且在幀率較低的情況下自適應選擇次要圖元的剔除以及重要圖元的優先渲染，在不影響模型外觀情況下渲染流暢度大大提升，從而實現三維模型在Web端的輕量化顯示及渲染優化。

1 Revit模型數據優化

1.1 Revit模式數據轉換

Revit是Autodesk公司推出的一款BIM軟件，在建筑業內盛行應用它來作為BIM建模和信息化管理工具，具有較好的數據完整性和兼容性，能夠很好的達到工作需求，并且Revit提供了完善的開發接口，供用戶自行開發需要的功能。Revit模型中含有大量的數據結構，其中包含了模型的名稱、位置、幾何、屬性信息等，當然也包含了很多冗余信息，因此提取重要信息減少模型數據以實現模型的輕量化具有一定的工程意義。本文主要實現模型中的幾何信息以及屬性信息的提取，并將它們轉化為輕量化數據結構。

幾何信息中含有大量的組成建筑圖元的面、點、邊等信息，屬性信息中含有模型的材質、紋理、標高等信息[12]。對于幾何信息，將這些點、線、面轉化為渲染所需的最基本單位——三角面片的形式存儲，包括三角面片的頂點坐標、頂點索引、法線向量、法線向量索引、幾何體中心、唯一標識符ID[13]；對于屬性信息，可以在單獨導出材質貼圖后，直接提取出模型的name、userData、標識符ID，以上的幾何信息和屬性信息，都以數組的形式存儲以此來建立輕量化數據結構。

在輕量化實現過程中，將Revit模型展現至Web端，需要一個中間格式作為橋梁。glTF(Graphics Language Transmission Format，圖形語言傳輸格式)是跨平臺的3D對象通用標準[14]，該格式在Web端的解析與加載更加便捷迅速，因此本文采用glTF格式作為Revit和Web端的傳輸格式。

對于Revit數據的導出，可利用其強大的開發接口，采用Revit二次開發技術實現模型信息的提取，其中IExpotContext接口中含有所有模型數據的導出函數，因此本文通過調用該接口中含有的函數來完成模型信息的提取并轉換為glTF格式，具體的Revit模型的數據導出流程如圖1所示。

圖1 Revit模型的數據導出

如圖1所示，數據在導出之前會首先判斷當前的Revit是否在三維視圖中，若不是會報錯并終止模型插件的繼續運行，若在三維視圖中，模型會通過OnElementBegin()以及OnIstanceBegin()函數遍歷界面中所有的元素(element)和族實例(Instance)，然后利用OnPolymesh()和OnMaterial()函數來提取所有元素的幾何、屬性信息，最后調用OnFaceEnd()函數完成所有幾何體的循環，將模型信息導出為glTF格式。

1.2 模型數據輕量化

雖然建立了輕量化數據結構，但模型文件中依舊存在著冗余數據，降低了模型解析率和傳輸速度，導致加載緩慢甚至加載失敗，嚴重影響用戶體驗，因此模型數據輕量化尤為重要，需要對glTF模型文件作進一步優化處理。在glTF文件中包含了大量的三角面片，而三角面片是由無數個頂點信息組成，頂點之間也是依靠連接關系相連，因此模型的壓縮可以從頂點刪除、頂點連接關系壓縮方面來研究。本文主要通過冗余頂點刪除法和Draco網格壓縮算法實現模型數據的優化。

1)冗余頂點刪除法。

Revit構件的幾何信息在保存至glTF文件中均以三角面片形式存儲，三角面片都是由頂點信息組成，以減少運行內存的使用空間，但是文件內部依舊含有大量的冗余頂點，例如模型邊界某頂點位于其相鄰兩個頂點之間且有可能三點共線或者該點與另外兩定點之間的夾角在一定范圍內并不影響模型外觀的展示，則該頂點可稱為冗余頂點。如圖2所示，點E在邊BC上，點D在邊BC下且角D接近180°，此時點E與D都是冗余頂點，刪除后模型外觀也基本不變。

圖2 冗余頂點刪除過程圖

(1)

設置閾值ω，若α≥ω，則表明該頂點影響因子很小，可將改點視為冗余頂點并剔除該頂點；反之，則保留該頂點。三維模型中的剔除原理類似，將頂點相鄰三條邊向量化并判斷夾角與閾值的大小關系進行剔除即可。

2)Draco壓縮算法。

Draco是由谷歌提出的一種用于壓縮和解壓三維幾何網格數據的庫[15]。其算法主要原理是將三維模型在傳輸或存儲的過程中，壓縮模型中的數據信息。Draco中主要使用了經典三維網格壓縮算法Edgebreaker[16]。該算法的網格訪問是基于區域增長原理的，在訪問網格的過程中，需始終維持一個由邊組成的有向邊界，該邊界將網格劃分為兩類，即已訪問和未訪問部分，并且每訪問一個多邊形，則會輸出一個該多邊形與邊界的拓撲關系操作符，并將該多邊形納為已編碼部分，至此三角面的壓縮完成[17]。如圖3表示了壓縮過程中的五種基本操作符。

圖3 Edgebreaker的五種基本操作符

在圖中，X表示當前遍歷的三角形，v表示被遍歷三角形的第三頂點。圖3(a)中的操作符L表示左側三角形已經被遍歷過，右側三角形沒有被遍歷過；圖3(b)中的操作符C表示左右兩側三角形都沒有被遍歷過；圖3(c)中的操作符R表示右側的三角形已被遍歷過，而左側的三角形沒有被遍歷過；圖3(d)中的操作符S表示左右兩側三角形都沒有被遍歷過；圖3(e)中的操作符E表示左右兩側三角形都被遍歷過。

通過這五種基本操作符描述了利用有向環形將網格分割成數條路徑的方法，圖4是對一個不規則圖形的三角網格模型進行Edgebreaker壓縮的示意圖，圖中的箭頭表示壓縮時所經過的路徑。

圖4 Edgebreaker網格分割路徑示例

本文利用冗余頂點刪除法和Draco壓縮算法將提取出來的Revit模型數據的幾何信息進行壓縮，降低了模型的數據體量，提高了模型文件在Web端的傳輸速度，并在此基礎上保證模型的高保真度。

2 Revit模型的Web端渲染

2.1 模型映射

glTF數據中包含的幾何數據中含有各個三角面片的局部坐標系，而WebGL中的所有物體在全局坐標系中都有精確的位置坐標，因此導出的glTF模型在Web上顯示時必須進行坐標系變換，坐標變換如圖5所示。

圖5 坐標變換

從全局坐標系到世界坐標系的轉變，實際是空間幾何圖形的平移、縮放與旋轉的單獨或組合變換而成[18]。兩坐標系間的過渡矩陣計算如下：

T1=RxRyRzT

(2)

(3)

(4)

(5)

(6)

其中：假設(x1,y1,z1)為glTF格式中的局部坐標系原點在Web端全局坐標系中的坐標；局部坐標系的Z軸垂直于地面；Y軸指向正北；Rx，Ry，Rz為繞X軸、Y軸、Z軸旋轉得到的旋轉矩陣；θx，θy，θz為旋轉后與X軸、Y軸、Z軸的交角。綜上，glTF文件中的幾何屬性可依據式(2)來完成空間坐標系的轉換，使構件的幾何信息能在Web端完成關系映射。

2.2 模型的Web端重建

完成了Revit導出數據與WebGL的空間關系映射后需要將文件中的模型信息在Web端重組并展示出來。Three.js是WebGL技術的一種表現方式，其代碼體量小、加載迅速、操作簡單[19]。因此本文選擇Three.js作為渲染框架來展示模型，基本渲染流程如圖6所示。

圖6 Three.js渲染流程圖

在三維模型顯示的過程中，首先引入Three.js及相關功能的類庫，以便于開發人員通過庫內函數的直接調用完成場景中對象的創建；之后完成場景的建立并對場景內的元素進行加載，包括了設置相機屬性、燈光屬性、渲染器基本參數等；接著通過Three.js框架自帶的glTFLoader函數解析glTF文件，并將所有組成模型的三角面片轉化為對象添加至場景中；最后通過渲染器渲染場景內所有組件元素，完成幾何模型在WebGL上的加載。

3 場景渲染控制算法

3.1 LOD場景控制算法

LOD(Level Of Detail，層次細節)[20]是為簡化場景中可見幾何體的多邊形細節而提出的一類加速算法。視覺原則中，距離視點越遠的模型在計算機上所占面積越小，對幾何體的影響也最小，因此提出的模型繪制方法是對近距離幾何體繪制詳細的細節，而對遠距離的幾何體進行簡化，這便是LOD技術的原理[21]。

本文提出了一種最小包圍球的LOD優化算法對場景進行優化，即大面片以及距離視點近的面片顯示渲染，而距離視點遠以及小面片隱藏剔除。由于模型三角面片規則形狀不一，很難判斷其大小，因此可以使用最小包圍球的概念，用圓形來包圍住三角面片，通過圓形的半徑表示面片的大小。用場景中的三角面片最小包圍球的半徑r來表示該三角面片的大小；包圍球圓心到相機的距離d表示該三角面片距離視點的距離，d可通過式(7)來確定，其中(x0,y0,z0)表示相機坐標，(x,y,z)表示三角面片包圍球圓心坐標；TH表示設置的初始閾值。通過式(8)來判斷是否渲染此三角面片，當圓形半徑與圓心到相機的距離之比小于等于閾值時隱藏且不渲染該三角面片，當圓形半徑與圓心到相機的距離大于閾值時顯示且渲染該三角面片。

(7)

(8)

3.2 LOD-AD場景控制算法

在Web端渲染BIM模型時，會占用計算機的GPU資源，其性能指標可利用FPS(Frames per Second，幀率)來表達，即GPU每秒所刷新的次數，通常情況下FPS的上限值設定為60 FPS，更高的幀率可以使模型渲染更為流暢。對于Web端的模型渲染，30 FPS已能足夠流暢展示三維場景，更高的幀率可提高用戶使用場景交互功能時的體驗感。

在自定義導出的glTF格式中導出Revit的模型Category.name來確定模型構件類型，通過模型構件類型的重要程度劃分模型層級，引入幀率來自適應剔除層級類型，本文設置的層級如表1所示。

表1 層級劃分

當FPS>30，顯示所有族類型；當15≤FPS≤30，加載第二層級的族類型；當FPS<15嚴重影響渲染流暢度，僅加載第三層級的族類型。

LOD場景控制算法雖然能渲染剔除遠距離小構件三角面片，但是對于大場景構件的優化卻很有限，幀率并不能達到理想狀態。因此本文結合自適應層級劃分和LOD優化算法，提出LOD-AD場景控制算法，先進行LOD算法優化后再通過幀率監測來自適應層級劃分剔除，從而達到最優場景渲染效果。具體算法原理如圖7所示。

圖7 算法原理圖

4 實驗與結果分析

為了驗證模型數據優化和場景渲染控制方法的可行性，本文選擇5個不同體量大小的BIM模型組成實驗數據進行驗證，模型基本信息如表2所示。實驗采用Intel(R) Core(TM) i5-5257U@ 2.70 GHz、8 GB內存以及64位Windows10操作系統的筆記本電腦，基于Chromr瀏覽器實現。

表2 模型基本信息

4.1 模型數據優化有效性分析

針對原模型體量過大，在Web端重組加載時間過長的問題，提出以glTF為中間格式，并采用冗余頂點刪除法和Draco算法來達到模型數據優化目的。為分析模型數據優化的有效性，通過模型數據優化前后的體量、傳輸時間和保真度來進行實驗驗證。

實驗依據表2中的5個BIM模型為實驗對象，使用了模型數據壓縮算法與未使用算法的模型體量對比如表3所示，模型傳輸時間對比如圖8所示。

表3 模型體量對比

圖8 模型傳輸時間對比

從表3可以看出，隨著模型的體量增大，本文的數據優化算法效果更佳，模型體量壓縮率提高更明顯。這是由于更大體量的模型具有更多的三角面片，而本文的壓縮算法是針對三維幾何網格的，而網格正是由無數個三角面片組成。盡管不同模型壓縮率有所差別，但是該算法相較于原模型整體壓縮率均在93%以上。

從圖8的模型傳輸時間可見，模型A～E在數據優化后傳輸時間相較于優化前明顯縮短。模型在網頁端利用GPU重組導出的模型數據會消耗一定時間，且體量越大的模型重組所需的時間更多，而利用數據優化算法后的模型在Web端重組速度明顯加快，這能極大的降低計算機GPU的消耗，提升用戶的操作體驗。

對于模型的保真度，采用數據優化算法后的glTF文件，實現其在網頁端的重組渲染，通過對比模型數據保真度與模型渲染保真度兩方面來驗證。

1)模型數據保真度。

在導出的glTF文件中，包含了模型的統一標識符ID，各個構件擁有自己的標識符ID，在模型的幾何信息與屬性信息中都含有標識符ID使得它們互相關聯。因此通過點擊構件后，獲取鼠標所在位置來與模型幾何信息進行匹配，得到該構件元素的標識符ID，通過該ID調取出模型的屬性信息。

對于模型數據的保真度以商務樓的屋頂為例，對比Revit原模型與網頁端模型的屬性信息，如圖9所示。

圖9 屬性信息保真度對比

圖9(a)中的重要信息在圖9(b)中均能一一對應(框圖標記)，由圖中的屬性信息對比可見，數據優化后即使信息體量減少明顯但是模型主要屬性信息并未丟失，也未出現信息錯誤的情況，確保了模型信息的高保真度。

2)模型渲染保真度。

為了更好呈現模型渲染外觀的保真度，在導出glTF格式的同時還導出了模型的材質貼圖，配上材質貼圖后該模型的網頁端渲染和該模型的Revit原圖的對比如圖10所示。

圖10 模型外觀保真度對比圖

由圖10的模型渲染保真度對比可見模型外觀無明顯差異，在網頁端的渲染能夠很好的代替Revit建模軟件的模型展示，起到方便用戶實時查看模型的效果。

通過上述模型數據優化可行性分析實驗可見，優化后模型的壓縮及傳輸過程都有明顯改進，且保真度完好。因此，使用本文的模型數據優化算法更有利于模型的Web端傳輸。

4.2 場景渲染控制可行性分析

本文針對模型渲染后場景幀率過低問題提出了LOD-AD優化算法來對模型構件進行有效剔除，達到提高幀率的目的。對此，本文以構件類型較多的辦公樓為例具體展現LOD-AD優化算法的顯示效果，并以表2中的5個BIM模型作為實驗對象，設置相同閾值和相同視距下這些對象的LOD-AD優化后與優化前的FPS對比，以此驗證本文渲染控制的可行性。

選擇族類型較多的辦公樓模型為例來展現其顯示效果，原模型在Web端顯示以及LOD-AD場景控制算法優化后顯示效果圖如圖11所示。

圖11 辦公樓模型展示

可以看出，原模型FPS在15～30之間，模型自適應選擇第二層級渲染，剔除第二層級以外的所有族類型，從圖中可見圖11(a)中室內的桌椅、室外綠化等構件在圖11(b)中被剔除，但是模型的重要圖元如墻、屋頂、樓板等圖元顯示渲染，并且在渲染過程中剔除了遠距離小構件三角面片，依據此方法完成幀率監測的場景自適應以及遠距離小面片構件自動剔除的控制效果，從而完成低重要度構件剔除、高重要度構件實時渲染，達到模型外觀保留的效果。

圖12列舉了表2中五種不同體量的建筑初始模型、使用LOD渲染控制算法模型以及LOD-AD渲染控制算法模型(閾值參數0.05，視點距離模型中心距離3m)的幀率比較結果。

圖12 幀率對比

可以看出，未使用任何優化算法的初始模型，在模型面片數量較少的模型A、模型B中幀率均在30以上，能達到流暢渲染的目的，但是當模型體量更大擁有更多的三角面片時，模型幀率極低，網頁端渲染卡頓明顯；當使用LOD場景控制算法時模型幀率相對有所改善，但是在達到模型D、模型E那樣較多三角面片組成的大體量模型時，網頁端卡頓依舊存在；本文所提出的LOD-AD場景渲染控制算法相較于原模型與LOD優化后的模型，幀率提高明顯，即使是對于模型E這樣的超大模型也依舊能保持40以上的FPS。

通過場景渲染控制可行性分析可知，LOD-AD控制算法不僅能確保模型外觀基本保留，而且能大幅提高幀率，對于大模型依舊能完成流暢渲染。因此，本文提出的LOD-AD渲染控制算法能有效達到場景渲染優化的效果。

5 結束語

本文針對BIM模型體量大，在Web端模型加載緩慢及渲染卡頓等問題，提出將glTF格式作為Revit與Web端的數據傳輸格式，進而通過冗余頂點刪除法和Draco算法將glTF格式中的三維網格壓縮，并使用提出的LOD-AD渲染控制算法將模型場景中的構件選擇性剔除及渲染。實驗結果表明，本文提出的BIM模型輕量化展示以及渲染控制方法極大的減少了模型體量以及模型傳輸時間，保證了模型的保真度，且極大程度的提高了模型渲染效果，解決了Web端重組模型后流暢度較低的問題。但是，本文對相機視野外的模型還可以進一步剔除且Web端頁面仍可進一步完善，下一步工作可通過可視域分析將不可見模型虛化渲染或者直接渲染剔除，借助大屏技術添加建筑施工信息監測等功能，以期實現更好的輕量化顯示效果。