葉 娜,嚴(yán)昱欣,張 翔,董麗麗

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

0 引言

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

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

1 整體設(shè)計(jì)

1.1 功能分析

三維校園可視化系統(tǒng)的受眾群體為學(xué)生、校園管理者、校外訪客，旨在校園內(nèi)三維場景的瀏覽器端展示，其將校園內(nèi)的建筑物、地理環(huán)境、校園資源等信息整合。本系統(tǒng)采用B/S結(jié)構(gòu)體系，經(jīng)需求分析將系統(tǒng)劃分為地圖展示模塊、BIM信息模塊、空間GIS模塊與地物對應(yīng)模塊，根據(jù)功能需求分析后設(shè)計(jì)如下子功能，如圖1。

圖1 系統(tǒng)總體功能圖

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

建筑信息查詢模塊為校內(nèi)管理員提供輔助分析，當(dāng)用戶選中建筑物構(gòu)件時(shí)，顯示族名、尺寸等屬性信息。

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

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

1.2 非功能分析

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

1.3 軟件選型

系統(tǒng)軟件開發(fā)采用軟件類應(yīng)用如表1所示。

表1 軟件環(huán)境參數(shù)表

2 系統(tǒng)實(shí)現(xiàn)的關(guān)鍵技術(shù)

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

2.1 Revit二次開發(fā)模型數(shù)據(jù)提取

本節(jié)借助Revit二次開發(fā)將模型的幾何與屬性數(shù)據(jù)解耦，分別以.obj與.json文件格式存儲(chǔ)。其關(guān)鍵步驟為：

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

表2 幾何表屬性類型

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

表3 材質(zhì)表屬性類型

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

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

圖2 圖書館幾何、材質(zhì)、屬性數(shù)據(jù)

2.2 建筑模型輕量化

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

圖3 系統(tǒng)總體功能圖

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

d=‖u-v‖

cost(u,v)=d×k

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

4)根據(jù)預(yù)設(shè)總刪除點(diǎn)數(shù)，將vertices數(shù)組按平均坍塌成本排序，以小至大的規(guī)則刪除，并重構(gòu)其三角面。

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

2.3 BIM到Cesium平臺(tái)數(shù)據(jù)轉(zhuǎn)換

通過上節(jié)將Obj模型的三角網(wǎng)格簡化，本節(jié)研究將Obj模型轉(zhuǎn)換為3DTiles模型格式方案，主要分為Obj轉(zhuǎn)換至glTF、glTF至b3DM、以及b3DM轉(zhuǎn)換為3Dtiles三個(gè)步驟。

2.3.1 ObjToglTF

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

2.3.2 glTFTob3DM

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

2.3.3 b3DMTo3DTiles

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

3 三維可視化校園系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

本系統(tǒng)通過人工收集校園的三維空間數(shù)據(jù)、紋理數(shù)據(jù)與屬性數(shù)據(jù)，根據(jù)數(shù)據(jù)特征采用諸如尺寸批處理、格式轉(zhuǎn)換等預(yù)處理方法?；诖?，完成校園地表建模，并將校園場景分類為點(diǎn)狀、面狀、線狀和體狀元素，使用Revit參數(shù)化建模特性完成建模工作。最后，結(jié)合真實(shí)場景給出BIM信息攜帶量、內(nèi)外觀相似度等評價(jià)指標(biāo)，衡量建模效果。其整體建模效果如圖4，部分內(nèi)部場景如圖5。

圖4 整體校園建模效果

圖5 內(nèi)部場景建模效果

3.1 地圖展示模塊

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

3.1.1 校園場景的瀏覽和控制

用戶可通過鼠標(biāo)操作地圖，對地圖模型進(jìn)行拖拽、縮放、旋轉(zhuǎn)、點(diǎn)擊等操作，借助Cesium中API，加載地球并控制相機(jī)視角。

3.1.2 鷹眼地圖

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

圖6 三維校園可視化系統(tǒng)展示圖

3.1.3 飛行漫游

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

圖7 飛機(jī)漫游展示效果圖

3.2 建筑信息查詢模塊

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

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

3.3 空間GIS模塊

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

3.3.1 地圖量測

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

圖9 地圖量測實(shí)現(xiàn)

3.3.2 圖形繪制

圖形繪制為地圖的量算與分析提供素材，本系統(tǒng)定義Draw.js方法來實(shí)現(xiàn)繪制坐標(biāo)點(diǎn)、線段、正方形、圓形與五邊形，實(shí)現(xiàn)效果如圖10。

圖10 圖形繪制效果圖

3.3.3 卷簾地圖

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

圖11 卷簾地圖效果圖

3.3.4 空間分析

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

圖12 通視分析效果圖

裁剪分析是指在三維場景內(nèi)，可模擬動(dòng)態(tài)的裁剪模型效果，瀏覽模型在某一剖面下的內(nèi)部細(xì)節(jié)。本系統(tǒng)僅實(shí)現(xiàn)了基于3DTiles模型的裁剪效果，所使用的關(guān)鍵接口為ClippingPlaneCollection、ClippingPlane、Plane、Cesium3DTileset、CallbackProperty。

圖13 裁剪分析效果圖

3.3.5 導(dǎo)航

本系統(tǒng)引入百度地圖api，獲取瀏覽器位置來確定當(dāng)前實(shí)時(shí)定位的方法制作二維導(dǎo)航，其效果如圖14。

圖14 導(dǎo)航功能效果圖

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

圖15 三維導(dǎo)航功能效果圖

3.4 地物對應(yīng)查詢模塊

用戶可在地物對應(yīng)查詢模塊中，查詢學(xué)校設(shè)施和教學(xué)樓的基本信息，其中包括校園POI查詢、行政部門查詢、教學(xué)設(shè)備查詢與自習(xí)室查詢。

3.4.1 校園POI查詢

通過前端的Ajax和JavaScript技術(shù)，將每個(gè)查詢點(diǎn)的經(jīng)緯度傳入三維地球中與之定位。其實(shí)現(xiàn)的效果見圖16。

圖16 超市POI查詢效果圖

3.4.2 自習(xí)室環(huán)境數(shù)據(jù)監(jiān)測

自習(xí)室環(huán)境數(shù)據(jù)查詢的主要流程為：單片機(jī)通過串口發(fā)送數(shù)據(jù)，電腦端用串口調(diào)試軟件接收數(shù)據(jù)；使用Socket通信將數(shù)據(jù)發(fā)送至后臺(tái)接口，使用ID與自習(xí)室關(guān)聯(lián)，通過insert方法插入到數(shù)據(jù)庫中，將上一時(shí)刻的數(shù)據(jù)覆蓋，只保留最新數(shù)據(jù)。用戶點(diǎn)擊查詢時(shí)，后臺(tái)返回最新數(shù)據(jù)顯示于前端界面。自習(xí)室環(huán)境數(shù)據(jù)查詢結(jié)果，搜索圖書館查詢當(dāng)前人數(shù)、溫濕度和噪音，如圖17。

圖17 自習(xí)室查詢結(jié)果圖

4 結(jié)束語

本文的工作及創(chuàng)新點(diǎn)為結(jié)合BIM+WebGIS技術(shù)構(gòu)建以本校為原型的三維校園可視化系統(tǒng)，通過將局部的建筑模型信息與宏觀的空間地理信息相結(jié)合，盡量滿足管理者對建筑物室內(nèi)外信息一體化的需求。在BIM至WebGIS平臺(tái)轉(zhuǎn)換過程中，研究了Revit二次開發(fā)將模型的幾何與屬性分離，以及Obj至3DTiles格式的轉(zhuǎn)換方法，保證其幾何與屬性數(shù)據(jù)的正確保留；最后結(jié)合三維可視化、空間分析、信息查詢?nèi)齻€(gè)方面設(shè)計(jì)并實(shí)現(xiàn)瀏覽器端三維校園可視化系統(tǒng)，為校內(nèi)外師生的生活學(xué)習(xí)提供幫助。