基于WebGL的建筑大模型實時顯示系統設計與實現

文/陳敏 楊陽

通過運用WebGL技術具有的優勢特性，并以此為基礎構建起建筑大模型實時顯示系統，可以在有效實現建筑大模型實時在線顯示的同時，以可視化的方式幫助建筑工程設計人員全面了解建筑設計施工效果，進而及時發現其中存在的問題并進行有效改善。因此該系統的設計不僅有助于保障建筑工程質量，同時也可以在一定程度上推動建筑行業進一步落實信息化建設。

1 基于WebGL的建筑大模型實時顯示系統設計分析

1.1 系統分層設計

在本文所設計的基于WebGL建筑大模型實時顯示系統中，采用分層設計理念對系統結構進行設計。即在采用B/S架構作為系統基礎框架下，按照模型數據的獲取、預處理、存儲、顯示的基本流程，將整個系統依次劃分成模型數據的獲取層與預處理層、模型數據的存儲層與顯示預處理層以及顯示層。首先在模型數據的獲取層中，將通過利用專業的BIM建模軟件直接將IFC格式文件導出，隨后在預處理層中對數據進行解析、去重以及轉化為glTF格式等處理，并將其存儲至相應的數據庫中后。根據用戶實際需要，將數據請求命令傳輸至模型數據顯示預處理層中，最終由模型數據的顯示層利用可視化技術對其進行直觀、清晰顯示。如圖1所示。

1.2 系統主要功能

1.2.1 數據的預處理

由于來自于各BIM建模軟件中的建筑模型數據文件格式不盡相同，因此為了使得各項建筑模型數據均可以在基于WebGL的建筑大模型實時顯示系統中進行有機整合與統一處理，需要對數據進行相應的預處理，即對模型數據文件格式進行有效統一。在本文所設計的系統中，統一將具有良好通用性的IFC文件作為模型數據來源，系統在對調用的各BIM建模軟件中的IFC格式數據文件進行預處理時，首先需要對IFC進行解析并將其中的幾何數據與屬性數據精準提取出來。隨后將重復的幾何數據篩除，并對其進行八叉樹劃分。此時系統只需嚴格依照glTF格式標準對模型數據進行相應轉化即可。

1.2.2 在線讀取數據

在線讀取數據這一系統功能模塊主要負責幫助前端完成模型數據的獲取和解析，隨后將其添加至相應的場景當中，由于建筑大模型中的模型數據量較大，因此本文在系統設計中選擇使用IndexedDB瀏覽器緩存模型數據，用以確保系統在離線狀態下也可以隨時調用所需數據。在文件解析過程中，該功能模塊將自動對glTF的JSON文件進行解析，在獲得其中的結構信息后利用JSON文件當中所含有的二進制文件索引信息，在對應的文件當中精準提取出模型數據并將其添加至相應的場景圖當中。

1.2.3 場景更新管理

為有效協調系統當中的其他模型，本文在設計基于WebGL的建筑大模型實時顯示系統時，還專門設有場景管理功能，用于對其他系統功能模塊進行靈活調度，從而完成對整個模型顯示流程。在構建場景圖時，系統主要運用渲染隊列計算的方式獲取所需裝載的場景圖節點列表，隨后系統將在線讀取數據建立與場景圖相對應的節點。在更新場景時，系統首先將對JSON文件進行八叉樹劃分，在確定模型數據位于椎體內的情況下，對所需渲染的模型數據集運行LOD算法，并在獲取需要渲染的模型數據的LOD映射后，精準判斷Cache命中與否。如果命中則直接交由Cache模塊對命中的模型數據集進行處理，并通過渲染隊列的方式實時更新場景圖。如果Cache沒有命中，則需要通過系統對所需加載的模型數據集進行數據在線讀取后再進行渲染隊列，由此有效完成對場景圖的動態更新。

1.2.4 模型數據渲染

系統在渲染模型數據時，主要通過對WebGL底層繪圖API接口進行調用，繪制出渲染隊列當中可渲染的基礎幾何圖元，隨后運用可視化技術將其直接顯示在屏幕中即可。具體來說，需要在渲染隊列初始化后，由系統負責自動獲取渲染對象材質信息，同時運用專門的著色器接口并借助GPU進行部分計算以獲取對應著色器信息，最終有效確定渲染模型對象，并調用相適宜的著色器完成模型數據渲染即可。系統在設計渲染模型數據功能時，選擇將Three.js當中的renderer渲染器引入其中，這主要是由于該引擎擁有眾多可供Web端使用的渲染器，能夠有效滿足WebGL渲染要求。

圖1：系統結構設計圖

1.2.5 模型數據緩存

由于建立在WebGL的建筑大模型實時顯示系統中涉及的模型數據量眾多，因此系統需要專門設計出可以有效緩存海量的模型數據的功能，以快速完成模型數據讀取與傳輸工作，同時避免在流量器段占用過多內存。為此，本文通過結合相關研究資料，選擇使用專業的壓縮算法對建筑大模型進行壓縮處理，在有效防止模型過大的基礎上，引入多級緩存機制以達到有效緩存龐大模型數據量的效果。數據在線讀取模塊在正確寫入IndexedDB之后，位于前端內存當中的系統緩存模塊將負責對未來可能加入至渲染隊列當中的模型數據進行有效預測，并直接將其加載至相應的內存中，進而可以為系統處理提供有效便利。在運用已有的多級緩存算法時，鑒于系統中的模型數據經常因攝像機縮放或旋轉而發生變動，因此為實現動態模型數據的實時緩存與有效顯示，本文還選擇將模型權重值加入到多級緩存算法中。即使用如下所示的公式：

在該公式當中，Q代表模型權重值，W為模型在當前可視范圍內與否，L1與L2分別代表模型數據與攝像機的間距，以及模型數據不在可視范圍內時，其與可視范圍最小歐式距離之間的間距。一般情況下，工作人員可以根據LOD算法分層范圍確定L1的值，如果模型數據在可視范圍內，則可以將L2值設置為0。在這一系統模型數據緩存功能中，模型數據權重值越大，其將會被優先置換出系統緩存空間。

2 基于WebGL的建筑大模型實時顯示系統實驗分析

2.1 實驗準備

為有效驗證本文所設計的基于WebGL的建筑大模型實時顯示系統的應用成效，本文選用Chrome與Firefox瀏覽器負責完成系統試驗運行。在BIM模型數據選擇上，采用專業BIM技術公司提供的大規模建筑BIM技術模型。其中A建筑模型大小在930MB左右，擁有超過2330萬個模型頂點數，模型的三角面片數與幾何單元數分別約為778萬個與79800個，模型轉換后大小為296MB。B建筑模型大小則接近2.3GB，擁有大約1.5億個模型頂點數，模型的三角面片數與幾何單元數分別約為4900萬個與16.4萬個，模型轉換后大小為448MB。所選模型如圖2、圖3所示。

2.2 實驗結果

根據相關實驗結果顯示，在實驗平臺中分別渲染兩個數據集，得到A建筑模型數據集的渲染幀率在28到35fps之間，B建筑模型數據集的渲染幀率在16到21fps之間。而渲染幀率的大小可以在一定程度上體現出系統流暢性，當渲染幀率相對較高的情況下，系統中畫面之間可以實現無縫跳轉，用戶能夠獲得較好的使用體驗。在本實驗平臺中，無論面對小規模還是大規模的建筑模型，系統均可以有效實現流暢漫游瀏覽。而對于A建筑模型數據集而言，系統只需12s便可以完成渲染操作，由于B數據集規模相對較大，因此系統渲染時間相對較長，但通過從若干面中選取所需渲染部分并直接將其送至渲染隊列中，使得渲染系統壓力得到相應減小，因此在110s左右系統便可以完成大規模數據集的渲染。而如果在條件允許的情況下，運用高性能的計算機與瀏覽器，則可以將所占內存降至最小，即便在渲染時需要進行大量數據傳輸，也不會消耗過多時間而影響系統渲染成效。不同模型渲染性能對比如圖4所示。

3 結束語

總而言之，本文通過將八叉樹與Three.js等運用在基于WebGL的建筑大模型實時顯示系統中，圍繞BIM建筑模型數據量較大的特點，在設計使用IndexedDB瀏覽器緩存模型數據的同時，對系統顯示場景進行八叉樹管理，同時使用WebGL技術當中的著色器技術以及Three.js當中的渲染組件渲染數據集，可以實現建筑大模型的實時在線顯示，便于相關工作人員隨時瀏覽、查看建筑模型。

圖2：A模型顯示圖

圖3：B模型顯示圖

圖4：模型渲染性能對比