基于BIM+Cesium三維可視化校園系統的設計與實現

葉 娜,嚴昱欣,張 翔,董麗麗

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

0 引言

為迎合信息化社會發展的趨勢，響應國家建設“數字校園”、“智慧校園”的號召。三維可視化校園作為建設“數字化、智慧化”校園的基礎關注點而得到廣泛重視，如清華大學、華中科技大學、長安大學、哈爾濱工業大學等紛紛以本校建筑模型為基礎研發了原型校園平臺系統。但目前大多可視化校園系統存在以下問題：(1)展示的內容較單一，多數系統缺少展示其內部構造和構件屬性信息；(2)系統缺乏跨平臺能力，硬件要求高；(3)部分系統欠缺設計適合的地理空間分析，難以為校園的管理與二次規劃提供參考。在建筑信息模型(BIM)、地理信息系統(GIS)發展日益成熟的當前，測繪地理信息科技發展“十三五”規劃中明確提出開展面向社會化應用的BIM+GIS融合關鍵技術研究[1-4]。

本文針對上述問題，整合BIM+WebGIS-Cesium技術構建以西安建筑科技大學為樣本的原型系統，該系統能同時提供校園內建筑物的模型信息與外部的周邊環境信息，實現三維全景展示、地圖切換、建筑構件查詢、校園用戶興趣點(POI)定位、導航、空間分析等核心功能。在為校內師生提供便利的同時，盡量滿足管理者對建筑物室內外信息一體化的需求，達到學校對外文化宣傳展示的目的。

1 整體設計

1.1 功能分析

三維校園可視化系統的受眾群體為學生、校園管理者、校外訪客，旨在校園內三維場景的瀏覽器端展示，其將校園內的建筑物、地理環境、校園資源等信息整合。本系統采用B/S結構體系，經需求分析將系統劃分為地圖展示模塊、BIM信息模塊、空間GIS模塊與地物對應模塊，根據功能需求分析后設計如下子功能，如圖1。

圖1 系統總體功能圖

地圖展示模塊主要負責校園三維模型的顯示與多種地圖模式的切換，其主要功能有飛行漫游、鷹眼地圖與控制場景展示。

建筑信息查詢模塊為校內管理員提供輔助分析，當用戶選中建筑物構件時，顯示族名、尺寸等屬性信息。

空間GIS模塊重點體現空間分析效果，其包含圖形繪制、地圖量測、通視分析、剖面分析等。

地物對應查詢模塊用戶可在該模塊中，查詢學校設施、教學樓、自習室等基本信息。用戶可通過地物對應查看建筑物位置與周邊環境，幫助快速定位；也可通過自習室環境查詢功能，選擇合適的自習室。

1.2 非功能分析

在性能與效率方面，本系統從時間與硬件資源特征兩方面保證了用戶請求系統功能URI響應迅速；在維護性與擴充性方面，系統采用前后端分離、接口開發的模式，實現前后臺“高內聚、低耦合”；在易用性與易理解性方面，系統設計了簡潔美觀的頁面布局；在移植性與跨平臺方面，本系統選擇無插件、可跨平臺的Cesium框架，由支持顯示三維地球的開源Javascript工具庫構成[5-6]。

1.3 軟件選型

系統軟件開發采用軟件類應用如表1所示。

表1 軟件環境參數表

2 系統實現的關鍵技術

因數據格式不同，使用Revit所建的.rvt模型無法直接應用于Cesium引擎，所支持的文件格式包含glTF、b3DM與3DTiles。glTF格式是3DTiles瓦片內部模型采用的數據格式，將glTF加入層次細節模型(level of detail, LOD)構成3DTiles瓦片格式[7-8]。

2.1 Revit二次開發模型數據提取

本節借助Revit二次開發將模型的幾何與屬性數據解耦，分別以.obj與.json文件格式存儲。其關鍵步驟為：

1)獲取模型的幾何數據。首先通過構件的幾何屬性GeomentryElement實例，遍歷實例得到幾何實體Solid；其次獲取實體各面，通過face.Triangulate()獲取三角網格；繼而使用List存放三角形的頂點、計算法線與貼圖坐標；最后以表2所示屬性拼接寫入.obj文件。

表2 幾何表屬性類型

2)獲取構件材質。首先利用Elment.GetMaterialIds獲取ElementId，轉化為Material對象獲取顏色color、透明度Transparency、光澤度Shininess；其次設置Texture對象，導出紋理貼圖；接著將Color.red/blue/green做歸一化處理，記作散射光Kd，1.0-Transparency/100.0記作漸隱指數d；最后以表3所示屬性拼接寫至.mtl材質文件。

表3 材質表屬性類型

3)提取模型的屬性數據。首先定義對象Data及屬性Id、族名FamilyName、類別Category、底部約束baseConstrain、頂部約束heightType、體積volume等屬性；其次創建 List elements，根據類別Category將revit的element元素循環賦值給data，存入list；隨后使用IO流創建本地.json文件，讀取并序列化寫入數據JsonConvert.SerializeObject>(myStr)；最后保存本地json文件，關閉流。

以學校圖書館為例，通過上述四步將模型的幾何、材質、屬性解耦，其數據提取結果如圖2(片段)。

圖2 圖書館幾何、材質、屬性數據

2.2 建筑模型輕量化

本節使用基于八叉樹剖分的近似曲率邊折疊簡化算法來簡化Obj文件內的三角網格，其思想為以八叉樹結構進行管理與剖分模型，將原始Obj網格對象劃分為八個子模型后，使用近似曲率的邊折疊算法[9]簡化三角網格。通過該方法相比僅用邊折疊算法保留更多模型特征，其算法流程如圖3。

圖3 系統總體功能圖

該算法分為以下幾步：(1)用八叉樹結構管理Obj模型；(2)步驟二：Obj模型解析，定義點(vertices)與面(faces)的數據結構，將原始幾何數據放入不同的數據結構中。(3)遍歷vertices數組點，計算點與其所有相鄰邊的坍塌成本，計算該點的坍塌總成本如下：

d=‖u-v‖

cost(u,v)=d×k

其中:d為邊長，k為曲率值，Tu是含有頂點u的所有三角形集合，Tuv是同時包含頂點u和v的三角形集合，TotalCost為u點的坍塌總成本，n為u點的鄰接點個數。最終該點的平均坍塌成本為：

4)根據預設總刪除點數，將vertices數組按平均坍塌成本排序，以小至大的規則刪除，并重構其三角面。

5)逐一將八個子模塊送入邊折疊算法，拼接顯示出最終模型，并保存至新Obj文件。

2.3 BIM到Cesium平臺數據轉換

通過上節將Obj模型的三角網格簡化，本節研究將Obj模型轉換為3DTiles模型格式方案，主要分為Obj轉換至glTF、glTF至b3DM、以及b3DM轉換為3Dtiles三個步驟。

2.3.1 ObjToglTF

關鍵步驟如下：①通過obj路徑，加載文件；②按行解析Obj文件數據，劃分f，o，g，v，mtllib分別找到面、組、頂點和紋理。③定義結點node、網格mesh、基元Primitive的獲取方法和一些輔助變量，如二維坐標系Cartesian2、三維坐標系Cartesian3、三維矩陣Matrix3、包圍盒BoundingBox等； ④分析與定義glTF的生成規則，如位置、法向量、UV、索引等緩沖區buffer，及訪問緩沖區的訪問器；定義增加結點、材質、紋理、三角網格、數組索引的方法。⑤將解析后Obj文件，根據定義寫出glTF方法轉換并存儲在相應的屬性。

2.3.2 glTFTob3DM

關鍵步驟如下：①根據b3DM切片格式要求，創建其相應的屬性。創建一個的b3DM切片，頭文件長度為28位，定義特征表Json長度featureTableJsonByteLength、特征表二進制數組長度featureTableBinaryByteLength、批處理表Json數據長度batchTableJsonByteLength、批處理表二進制數據長度batchTableBinaryByteLength,以及該切片二進制glb數據的長度。②glTF到B3DM的轉換，根據batchID進行劃分，判斷被切分到哪個切片中。隨后將glTF的數據對應B3DM的屬性格式內。③ B3DM文件的設計及創建，將glb二進制數據劃分在各個瓦片中, 設計頭文件的各部分對應關系和長度限制，單位為位。④返回b3DM切片頭文件header、批處理表batchTableJson、二進制數據glb。

2.3.3 b3DMTo3DTiles

關鍵步驟如下：①引入前兩步轉換好的glTF和B3DM文件，定義瓦片集的規則。②根據每一個瓦片的數據和屬性，計算每層瓦片的幾何誤差、轉換方法、包圍盒等。其中在3DTiles這種HLOD的結構中，根節點為最粗糙模型，其幾何誤差最大，葉子節點為原模型，其幾何誤差為0；本設計選擇標準的長方體AABB包圍盒的box，3DTiles中用一個有12個元素的數組來表示包圍盒，前三個元素為包圍盒中心坐標，后面每三個元素組成包圍盒x，y，z軸的方向及半軸的長度(這個長度用向量的長度來表示)。transform屬性是一個以列主序存儲的4×4矩陣，通過此屬性，Tile的坐標就可為其局部坐標系內坐標，最后通過自身transform矩陣變換到父節點的坐標系內。屬性信息通過batchTable的id關聯到3DTiles的tileset.json中。③將計算結果，按照官方文檔定義的順序，寫入tileset.json。

3 三維可視化校園系統設計與實現

本系統通過人工收集校園的三維空間數據、紋理數據與屬性數據，根據數據特征采用諸如尺寸批處理、格式轉換等預處理方法。基于此，完成校園地表建模，并將校園場景分類為點狀、面狀、線狀和體狀元素，使用Revit參數化建模特性完成建模工作。最后，結合真實場景給出BIM信息攜帶量、內外觀相似度等評價指標，衡量建模效果。其整體建模效果如圖4，部分內部場景如圖5。

圖4 整體校園建模效果

圖5 內部場景建模效果

3.1 地圖展示模塊

該模塊滿足用戶可通過多角度、多方位瀏覽校園全景的需要，其中包括三維校園可視化場景的瀏覽和控制、鷹眼地圖與飛行漫游。

3.1.1 校園場景的瀏覽和控制

用戶可通過鼠標操作地圖，對地圖模型進行拖拽、縮放、旋轉、點擊等操作，借助Cesium中API，加載地球并控制相機視角。

3.1.2 鷹眼地圖

其功能為主視圖與鷹眼視圖相互控制，各視圖內地圖數據保持一致，方便用戶快速定位；主視圖中顯示當前地圖范圍，而鷹眼視圖以“紅框”框選出其范圍；用戶也可操作紅框位置，改變主視圖中地圖范圍，實現效果如圖6右下角。

圖6 三維校園可視化系統展示圖

3.1.3 飛行漫游

在校園場景中，用戶可隨時調整相機視角查看模型細節，故在此制作了一種飛行漫游的方式，可通過繪制不同的飛行路線和角度，俯瞰可視化場景。其實現步驟為初始化定義界面監聽函數InitEvent()，漫游列表函數loadData()；結合相機視角函數定義高度、傾斜、旋轉角度、位置、線條、飛行坐標隊列等元素定義漫游路徑；定義開始、暫停、結束等飛行狀態。

圖7 飛機漫游展示效果圖

3.2 建筑信息查詢模塊

該模塊實現了兩個子功能，分別為經緯度查詢與BIM建筑構件信息查詢。以“綜合樓”為例，將子功能顯示于圖8。左上角查詢了該建筑空間的經緯度，中間方框處顯示出該控件的屬性，如“綜合樓-F2-F5-240mm-外墻”。

圖8 建筑物BIM信息查詢效果圖

3.3 空間GIS模塊

空間GIS模塊由四個子功能構成，分別為地圖量測、圖形繪制、卷簾地圖和空間分析。

3.3.1 地圖量測

地圖量測實現了測距與側面，為校園規劃提供輔助[10]。其核心實現步驟為：①定義鼠標移動事件、單擊事件和雙擊事件；②完成鼠標事件代碼編寫，其中包括拾取點、轉換坐標系、定義單位和換算方法等；③通過兩點間距離公式計算兩點間距離(公里)與微元法計算測量區域面積(平方公里)。圖9為測量整個校園邊界長度(去掉三維模型后)。

圖9 地圖量測實現

3.3.2 圖形繪制

圖形繪制為地圖的量算與分析提供素材，本系統定義Draw.js方法來實現繪制坐標點、線段、正方形、圓形與五邊形，實現效果如圖10。

圖10 圖形繪制效果圖

3.3.3 卷簾地圖

卷簾地圖旨在地圖視口中構建一個卷簾，以天地圖影像(可更改)與原地圖場景左右兩側分布，用戶通過鼠標拖動滑塊重新繪制canvas渲染地圖范圍，從而改變左右圖層的顯示尺寸，該功能方便用戶進行二三維地圖對比，如圖11。

圖11 卷簾地圖效果圖

3.3.4 空間分析

空間分析實現了通視分析與剖面分析，在本系統采用射線法來判別兩點之間是否有其他物體遮擋(如實體Entity、基元Primitive、地形Terrain、3DTiles等元素)，所需調用的接口API中支持Cesium.Ray、Cesium.Cesium3DTileset、Cesium.Scene、Cesium.Cartesian3方法。

圖12 通視分析效果圖

裁剪分析是指在三維場景內，可模擬動態的裁剪模型效果，瀏覽模型在某一剖面下的內部細節。本系統僅實現了基于3DTiles模型的裁剪效果，所使用的關鍵接口為ClippingPlaneCollection、ClippingPlane、Plane、Cesium3DTileset、CallbackProperty。

圖13 裁剪分析效果圖

3.3.5 導航

本系統引入百度地圖api，獲取瀏覽器位置來確定當前實時定位的方法制作二維導航，其效果如圖14。

圖14 導航功能效果圖

圖15為將路線顯示于地圖中，本示例為查找6號宿舍樓到體育館的路線。

圖15 三維導航功能效果圖

3.4 地物對應查詢模塊

用戶可在地物對應查詢模塊中，查詢學校設施和教學樓的基本信息，其中包括校園POI查詢、行政部門查詢、教學設備查詢與自習室查詢。

3.4.1 校園POI查詢

通過前端的Ajax和JavaScript技術，將每個查詢點的經緯度傳入三維地球中與之定位。其實現的效果見圖16。

圖16 超市POI查詢效果圖

3.4.2 自習室環境數據監測

自習室環境數據查詢的主要流程為：單片機通過串口發送數據，電腦端用串口調試軟件接收數據；使用Socket通信將數據發送至后臺接口，使用ID與自習室關聯，通過insert方法插入到數據庫中，將上一時刻的數據覆蓋，只保留最新數據。用戶點擊查詢時，后臺返回最新數據顯示于前端界面。自習室環境數據查詢結果，搜索圖書館查詢當前人數、溫濕度和噪音，如圖17。

圖17 自習室查詢結果圖

4 結束語

本文的工作及創新點為結合BIM+WebGIS技術構建以本校為原型的三維校園可視化系統，通過將局部的建筑模型信息與宏觀的空間地理信息相結合，盡量滿足管理者對建筑物室內外信息一體化的需求。在BIM至WebGIS平臺轉換過程中，研究了Revit二次開發將模型的幾何與屬性分離，以及Obj至3DTiles格式的轉換方法，保證其幾何與屬性數據的正確保留；最后結合三維可視化、空間分析、信息查詢三個方面設計并實現瀏覽器端三維校園可視化系統，為校內外師生的生活學習提供幫助。