基于Cesium 的傳統(tǒng)建筑虛擬交互場(chǎng)景構(gòu)建關(guān)鍵技術(shù)研究

謝益炳，彭衛(wèi)榮，吳早生，劉葉偉，裴媛媛

（1.華匯工程設(shè)計(jì)集團(tuán)股份有限公司，浙江 紹興 312000；2.浙江華匯巖土勘測(cè)有限公司，浙江 紹興 312000；3.紹興市建筑市場(chǎng)管理中心，浙江 紹興 312000；4.江西理工大學(xué) 土木與測(cè)繪工程學(xué)院，江西 贛州 341000；5.安徽建筑大學(xué) 土木工程學(xué)院，安徽 合肥 230601）

我國(guó)傳統(tǒng)建筑數(shù)量多、分布廣，復(fù)原、修繕、保護(hù)和利用好傳統(tǒng)建筑，對(duì)延續(xù)城市歷史文脈和傳統(tǒng)風(fēng)貌、提升城市品質(zhì)具有十分重要的意義。傳統(tǒng)建筑數(shù)字化一直是傳承和保護(hù)古建的有效途徑。住房和城鄉(xiāng)建設(shè)部2019 年公布《歷史建筑數(shù)字化技術(shù)標(biāo)準(zhǔn)》，要求傳統(tǒng)建筑數(shù)字化保護(hù)不僅需要進(jìn)行平面、立面、剖面等圖紙、文字的記載與存檔，還需要形成可視化的虛擬場(chǎng)景，通過網(wǎng)絡(luò)、電子化的終端桌面展示，導(dǎo)覽傳統(tǒng)建筑的三維模型或?qū)嶓w，才能有效傳播傳統(tǒng)建筑蘊(yùn)含的文脈和彰顯的社會(huì)與經(jīng)濟(jì)價(jià)值。

時(shí)下興起的三維實(shí)景技術(shù)，完全切合傳統(tǒng)建筑數(shù)字化保護(hù)和虛擬場(chǎng)景對(duì)基礎(chǔ)數(shù)據(jù)的需求。通過傾斜攝影測(cè)量技術(shù)獲取傾斜三維模型等實(shí)景數(shù)據(jù)，更加簡(jiǎn)單快捷，紋理更加逼真，更能反映對(duì)象的真實(shí)情況，為傳統(tǒng)建筑虛擬場(chǎng)景單體化、各類地理場(chǎng)景數(shù)據(jù)或信息的深加工提供支撐。然而，要實(shí)現(xiàn)傳統(tǒng)建筑單體化、各類屬性和圖片等信息的鏈接、查詢、分析，必須以可視化的、可交互的虛擬場(chǎng)景為平臺(tái)。

虛擬場(chǎng)景構(gòu)建的技術(shù)很多，其中，基于Cesium技術(shù)，尤其以傾斜攝影三維模型為數(shù)據(jù)源，實(shí)現(xiàn)傳統(tǒng)建筑數(shù)字化，獲得了國(guó)內(nèi)外專家學(xué)者的廣泛關(guān)注與研究。2015 年，開放地理空間聯(lián)盟（OGC）推出開源標(biāo)準(zhǔn)3D Tiles，為許多異質(zhì)的三維地理目標(biāo)提供流式處理過程。在此基礎(chǔ)上，很多學(xué)者研究了空間坐標(biāo)變換和空間位置變換、模型構(gòu)建和可視化等，實(shí)現(xiàn)所有地理數(shù)據(jù)類型的可視化。但針對(duì)較復(fù)雜的模型數(shù)據(jù)，處理過程較復(fù)雜，能轉(zhuǎn)化的地理模型格式有限［1-3］。針對(duì)不同格式數(shù)據(jù)與3D Tiles格式之間的模型關(guān)系和轉(zhuǎn)換方法、多層次模型構(gòu)建等，以竇世卿等［4-5］為代表的學(xué)者實(shí)現(xiàn)了Web 環(huán)境下3D Tiles 格式的可視化，但傾斜三維模型的融入還有所欠缺。對(duì)于傾斜三維實(shí)景模型與3D Tiles融合和可視化的問題，徐照等［6-7］提出了在三維Web GIS 框架下，基于Web GIS 應(yīng)用程序，實(shí)現(xiàn)傾斜三維模型和地理要素?cái)?shù)據(jù)的可視化，側(cè)重?cái)?shù)據(jù)或模型的管理，在古建筑、特色小鎮(zhèn)等開展試點(diǎn)，但受到虛擬場(chǎng)景的面積和數(shù)據(jù)量的限制。關(guān)于大場(chǎng)景和海量三維空間地理數(shù)據(jù)的研究，魏世軒等［8-10］從基礎(chǔ)底圖設(shè)計(jì)、空間數(shù)據(jù)存儲(chǔ)、空間數(shù)據(jù)展示、空間數(shù)據(jù)查詢等方面展開研究，較完整地實(shí)現(xiàn)了基于Cesium 的空間數(shù)據(jù)展示與查詢系統(tǒng)，但對(duì)可視化虛擬場(chǎng)景交互和單體化涉及較少。孟天杭等［11-14］提出了基于Cesium 技術(shù)數(shù)據(jù)驅(qū)動(dòng)的大規(guī)模三維場(chǎng)景瓦片構(gòu)建的解決方案、傾斜攝影三維模型單體化的方法，構(gòu)建了響應(yīng)式頁(yè)面布局的Web 端系統(tǒng)等，也對(duì)海量三維空間數(shù)據(jù)的可視化進(jìn)行了相關(guān)研究，但在場(chǎng)景響應(yīng)、屬性管理、動(dòng)態(tài)單體化矢量面提取等方面存在不足。

綜上所述，基于Cesium 引擎與3D Tiles 標(biāo)準(zhǔn)的研究已應(yīng)用于多個(gè)行業(yè)，然而在傳統(tǒng)建筑虛擬場(chǎng)景構(gòu)建和數(shù)字化方面，應(yīng)用和研究成果較少，原因主要是現(xiàn)存的傳統(tǒng)建筑多成片存在，或者已發(fā)展為旅游景點(diǎn)、街區(qū)，大范圍的古建筑群落不僅需要充足、流暢的場(chǎng)景空間，而且需要精細(xì)的紋理，對(duì)可視化交互的要求較高。因此，本文在已有文獻(xiàn)研究的基礎(chǔ)上，以傳統(tǒng)建筑傾斜三維模型為基礎(chǔ)數(shù)據(jù)，遵循WebGL 技術(shù)標(biāo)準(zhǔn)，利用Cesium 技術(shù)，研究三維瓦片數(shù)據(jù)（3D Tiles）的組織原理，實(shí)現(xiàn)傳統(tǒng)建筑傾斜影像數(shù)據(jù)轉(zhuǎn)化，構(gòu)建傳統(tǒng)建筑虛擬場(chǎng)景，解決場(chǎng)景中各種對(duì)象的單體化及若干信息的鏈接與分析等問題。

1 傳統(tǒng)建筑傾斜三維模型構(gòu)建

傾斜攝影測(cè)量是一項(xiàng)高新技術(shù)，已經(jīng)逐步取代了正射影像在測(cè)繪領(lǐng)域應(yīng)用的地位，廣泛應(yīng)用于數(shù)字城市、智慧城市、文化遺產(chǎn)保護(hù)等領(lǐng)域。

1.1 傾斜三維模型構(gòu)建原理

使用無人機(jī)傾斜攝影測(cè)量平臺(tái)，平臺(tái)集成定位導(dǎo)航傳感器，架設(shè)五鏡頭傾斜相機(jī)，開展航線規(guī)劃，從前、后、左、右及垂直方向拍攝，獲取不同角度的實(shí)景影像和定位導(dǎo)航的POS 數(shù)據(jù)。二次檢查外業(yè)航攝成果，確保元數(shù)據(jù)、POS 信息與影像成果等信息完備、對(duì)應(yīng)，且影像質(zhì)量可靠、無漏缺、文件格式正確、相機(jī)參數(shù)信息齊全。然后運(yùn)用特定的軟件，對(duì)影像進(jìn)行勻光處理，并與POS 數(shù)據(jù)進(jìn)行平差、快速匹配、空三加密，從而獲得被測(cè)對(duì)象的數(shù)字表面模型、正射影像及側(cè)面影像，再通過解算獲得傾斜三維實(shí)景模型（見圖1）。

圖1 傾斜三維模型構(gòu)建的技術(shù)流程Fig.1 Technical Process for Building an Inclined 3D Model

1.2 傳統(tǒng)建筑傾斜三維模型構(gòu)建

傳統(tǒng)建筑所處環(huán)境一般較為復(fù)雜，但模型要求的精細(xì)度較高。因此，需要進(jìn)行詳細(xì)的傾斜攝影測(cè)量設(shè)計(jì)，才能獲得可靠的航攝數(shù)據(jù)。本文使用大疆無人機(jī)M300 搭載五鏡頭相機(jī)，獲取某傳統(tǒng)建筑街區(qū)的傾斜實(shí)景影像數(shù)據(jù)，方案如下：

（1）數(shù)據(jù)資料整理與分析：空域申請(qǐng)、測(cè)繪控制數(shù)據(jù)收集、區(qū)域KML 形成和像控規(guī)劃。

（2）航線設(shè)計(jì)：設(shè)計(jì)航攝分區(qū)、比例尺、重疊度、航高、航飛時(shí)間等。本例采用南北向飛行，共6 條航線，每條航線長(zhǎng)度1 131 m，地面分辨率2.5 cm，絕對(duì)航高94 m，航向重疊度和旁向重疊度均為85%。

（3）傾斜航空攝影：除了正射獲取影像外，其他四個(gè)傾斜方向的傾角為45°。

（4）航空攝影數(shù)據(jù)質(zhì)量檢查：總照片數(shù)為2 325，各類信息和參數(shù)齊全。

基于外業(yè)獲取航攝數(shù)據(jù)成果，采用Bentley 公司的Context Capture 軟件處理影像數(shù)據(jù)，最后生成傳統(tǒng)建筑街區(qū)的實(shí)景三維模型。圖2 為某傳統(tǒng)建筑街區(qū)基于傾斜實(shí)景影像構(gòu)建的TIN 三角網(wǎng)，圖3為基于傾斜影像構(gòu)建的某傳統(tǒng)建筑街區(qū)的傾斜三維模型一幀。

圖2 某傳統(tǒng)建筑街區(qū)的TIN 三角網(wǎng)Fig.2 TIN of a traditional block

圖3 某傳統(tǒng)建筑街區(qū)的傾斜實(shí)景三維模型Fig.3 Inclined Realistic 3D Model of a traditional block

2 基于Cesium 傳統(tǒng)建筑虛擬交互場(chǎng)景構(gòu)建的關(guān)鍵技術(shù)

2.1 傳統(tǒng)建筑場(chǎng)景數(shù)據(jù)處理技術(shù)

利用Context Capture 解算生成的傾斜實(shí)景三維模型，可輸出不同坐標(biāo)系統(tǒng)、不同格式的三維實(shí)景模型和二維矢量數(shù)據(jù)，如OBJ、OSGB、STL 等。Cesium 可以加載glTF 和3D Tiles 格式模型數(shù)據(jù)，但加載glTF 格式的數(shù)據(jù)模型（＞1 G 數(shù)據(jù)量）容易導(dǎo)致瀏覽器崩潰，而加載多層級(jí)的3D Tiles 格式的數(shù)據(jù)模型時(shí)，具有顯示效果好、還原性高等優(yōu)勢(shì)，因此，構(gòu)建大規(guī)模虛擬交互場(chǎng)景時(shí)，通常采用3D Tiles格式的數(shù)據(jù)模型。

傾斜攝影測(cè)量技術(shù)生成的傳統(tǒng)建筑場(chǎng)景三維模型數(shù)據(jù)可以保存為多種數(shù)據(jù)格式，但不能直接導(dǎo)出3D Tiles 格式的數(shù)據(jù)模型，需要進(jìn)行數(shù)據(jù)格式的轉(zhuǎn)換，以便形成傳統(tǒng)建筑虛擬交互場(chǎng)景的框架基礎(chǔ)。

（1）OSGB 與3D Tiles 數(shù)據(jù)格式轉(zhuǎn)化

OSGB 格式是最常用的數(shù)據(jù)格式，通過Page LOD 的形式組織命名，并保存傾斜攝影獲取的影像場(chǎng)景數(shù)據(jù)，將影像數(shù)據(jù)劃分為無數(shù)個(gè)瓦片，每個(gè)瓦片分別存儲(chǔ)于一個(gè)文件夾中，是一種二進(jìn)制格式的數(shù)據(jù)文件。3D Tiles 數(shù)據(jù)由瓦片集配置索引文件和瓦片數(shù)據(jù)組成，瓦片集配置索引文件用以記錄所有的瓦片節(jié)點(diǎn)信息，為樹狀結(jié)構(gòu)；瓦片數(shù)據(jù)的主要作用為存儲(chǔ)所有的地理信息數(shù)據(jù)。

經(jīng)研究，OSGB 與3D Tiles 數(shù)據(jù)格式轉(zhuǎn)換的重點(diǎn)在于解析OSGB 數(shù)據(jù)中的XML 數(shù)據(jù)，并將解析數(shù)據(jù)重新整合為疊加LOD 數(shù)據(jù)的glTF 格式數(shù)據(jù)，最終生成3D Tiles 格式數(shù)據(jù)。反之，可以采用基于Earth SDK 開源框架構(gòu)建的Cesium Lab 數(shù)據(jù)處理系統(tǒng)，或者根據(jù)3D Tiles 數(shù)據(jù)標(biāo)準(zhǔn)自行開發(fā)的數(shù)據(jù)轉(zhuǎn)換工具，完成3D Tiles 向OSGB 的轉(zhuǎn)換。

（2）OBJ、3DS 與3D Tiles 數(shù)據(jù)格式轉(zhuǎn)化

采用Cesium 技術(shù)構(gòu)建虛擬交互環(huán)境的過程中，經(jīng)常需要導(dǎo)入事先處理好的OBJ、3DS 等格式的模型。目前高版本的Context Capture 或轉(zhuǎn)換器都能將其他格式模型轉(zhuǎn)化成glTF 格式數(shù)據(jù)。本文采用如下方法，可將OBJ 直接轉(zhuǎn)換為3D Tiles 數(shù)據(jù)格：

1）采用網(wǎng)格劃分，將OBJ、3DS 模型細(xì)分為多個(gè)子模型，采用二叉樹遍歷合理進(jìn)行空間拆分或重組模型表面紋理，根據(jù)原模型的UV 坐標(biāo)，重新計(jì)算新模型的UV 坐標(biāo)值，保存為新的網(wǎng)格模型；

2）根據(jù)四叉樹原理，對(duì)網(wǎng)格模型進(jìn)行LOD 多層級(jí)數(shù)據(jù)處理，拆分模型，減少模型面數(shù)；

3）為每一級(jí)得出的數(shù)據(jù)生成b3dm 格式的模型數(shù)據(jù)，并遍歷生成tileset.json 文件。

2.2 場(chǎng)景對(duì)象改進(jìn)的動(dòng)態(tài)單體化

傾斜三維模型的單體化方法，主要分為切割單體化、ID 單體化、動(dòng)態(tài)單體化［10］。傳統(tǒng)建筑比較密集，結(jié)構(gòu)復(fù)雜，建筑相交處多，因此，本文研究了一種基于Cesium 技術(shù)改進(jìn)的快速動(dòng)態(tài)單體化的方法。針對(duì)傳統(tǒng)建筑點(diǎn)、線、面、體之間的關(guān)系，通過Cesium API 中Classification Primitive 的對(duì)象，創(chuàng)建Polygon Geometry 多邊形，自定義凸出面與橢球面之間的距離，設(shè)置Classification Type 屬性為3D Tiles，將原本高出建筑物的凸出面貼在建筑物上，完成單體化矢量面的創(chuàng)建，再定義鼠標(biāo)移動(dòng)事件，判斷鼠標(biāo)位置是否存在對(duì)應(yīng)建筑，并高亮顯示，從而實(shí)現(xiàn)場(chǎng)景中對(duì)象的快速動(dòng)態(tài)單體化，主要技術(shù)流程如圖4 所示。圖5 為基于Cesium 技術(shù)實(shí)現(xiàn)傳統(tǒng)建筑單體化的過程及關(guān)鍵步驟。關(guān)鍵代碼為：

圖5 基于Cesium 技術(shù)的虛擬交互場(chǎng)景單體化Fig.5 Virtual interaction scene monomer based on Cesium technology

var handler=new Cesium.ScreenSpaceEventHandler(scene.canvas)；

handler.setInputAction(function（movement){

var pickedObject = scene.pick(movement.endPosition)；

if(Cesium.defined(pickedObject)&& Cesium.defined(pickedObject.id))

{if(pickedObject.id === currentObjectId){return；}}}

該方法操作簡(jiǎn)便，自動(dòng)貼合三維模型的方式能夠應(yīng)對(duì)各種復(fù)雜的傳統(tǒng)建筑結(jié)構(gòu)，而且能夠在創(chuàng)建單體化建筑時(shí)錄入建筑信息，大大節(jié)省時(shí)間。

2.3 三維點(diǎn)云模型、影像及屬性信息展示與編輯

構(gòu)建傳統(tǒng)建筑虛擬交互場(chǎng)景，存儲(chǔ)、展示、編輯傳統(tǒng)建筑及周邊街區(qū)的信息必不可少。這些信息包括三維模型、點(diǎn)云模型、影像及各類屬性等。用戶通過客戶端編輯、查詢傳統(tǒng)建筑虛擬中傾斜三維實(shí)景模型信息時(shí)，需要選中相應(yīng)的三維模型或者根據(jù)屬性名稱搜索，最終通過這些功能實(shí)現(xiàn)傳統(tǒng)建筑信息的展示。可以在Cesium 技術(shù)環(huán)境中，通過Viewer 的entities 在線添加glTF 模型，利用Ajax技術(shù)調(diào)用后臺(tái)，將添加的各類模型及位置信息存至MySQL 數(shù)據(jù)庫(kù)中，允許用戶瀏覽傳統(tǒng)建筑虛擬交互場(chǎng)景的總體布局，并提供增刪查改的操作。

本文設(shè)計(jì)的MySQL 傳統(tǒng)建筑信息集合表，融合了三維點(diǎn)云模型、影像、圖片、文字等歷史文化街區(qū)的各類建筑信息。表1 為這種數(shù)據(jù)庫(kù)表的結(jié)構(gòu)形式，除了部分屬性信息外，設(shè)計(jì)建筑編號(hào)（tp_id）字段為該表的主鍵，代表每棟建筑的唯一標(biāo)識(shí)，并增設(shè)位置字段（point position），記錄每棟建筑物的位置信息，方便每棟建筑與街區(qū)信息交互。主要代碼為：

表1 基于MySQL 的傳統(tǒng)建筑數(shù)據(jù)庫(kù)表結(jié)構(gòu)Tab.1 Table structure of traditional building database based on MySQL

2.4 融合Web 技術(shù)傳統(tǒng)建筑場(chǎng)景三維可視化交互平臺(tái)構(gòu)建技術(shù)

本文利用Cesium 技術(shù)構(gòu)建的三維可視化交互平臺(tái)包含展示層、服務(wù)層、數(shù)據(jù)層三個(gè)模塊。

（1）展示層：在Web 前端渲染并可視化虛擬場(chǎng)景信息，并提供虛擬漫游、單體化演示等接口，方便用戶交互體驗(yàn)。信息主要包括高精度地形數(shù)據(jù)、正射影像數(shù)據(jù)、實(shí)景三維模型、高精細(xì)化Sketchup 古建筑模型、矢量化圖紙等。模型加載的關(guān)鍵代碼為：

（2）服務(wù)層：用以發(fā)布數(shù)據(jù)和提供Web 服務(wù)。瀏覽器利用Ajax 技術(shù)提交SQL 查詢語句，Web 服務(wù)器運(yùn)行JavaScript 代碼，通過JDBC 連接空間數(shù)據(jù)庫(kù)，完成查詢。Ajax 查詢的主要代碼為：

（3）數(shù)據(jù)層：主要用于存儲(chǔ)矢量數(shù)據(jù)、影像數(shù)據(jù)、CAD 圖紙以及文獻(xiàn)資料，通過管理不同建筑的信息數(shù)據(jù)，滿足不同場(chǎng)景的需求，如建筑的修繕、旅游宣傳等。本文使用輕量級(jí)引擎ThreeJs，利用其良好的交互性、兼容性、快速處理小型建筑模型的能力，將其應(yīng)用于建筑基本框架和LOD 三層級(jí)模型的可視化。圖6（a）～（c）分別是數(shù)據(jù)庫(kù)中的三維模型、CAD 圖紙和建筑影像圖片在前端顯示的界面。前端可視化滿足了數(shù)據(jù)交互和不同場(chǎng)景的可視需求。創(chuàng)建數(shù)據(jù)庫(kù)代碼如下：

圖6 基于ThreeJs 引擎的建筑模型可視化與信息化模式Fig.6 Building visualization and informatization mode based on ThreeJs engine

3 實(shí)例應(yīng)用

根據(jù)前文的關(guān)鍵技術(shù)路線，本文設(shè)計(jì)了傳統(tǒng)建筑三維可視化交互平臺(tái)構(gòu)建技術(shù)的框架（圖7），通過加載影像、地形、傾斜攝影模型數(shù)據(jù)，展示了街道及傳統(tǒng)建筑的總體景觀，形成了某傳統(tǒng)建筑街區(qū)的虛擬交互場(chǎng)景（圖8）。

圖7 傳統(tǒng)建筑三維可視化交互平臺(tái)構(gòu)建技術(shù)的框架示意圖Fig.7 Framework of traditional building 3D visualization interaction platform construction technology

圖8 某傳統(tǒng)建筑街區(qū)的虛擬交互場(chǎng)景一幀F(xiàn)ig.8 One frame of virtual interaction scene of a traditional block

利用Cesium 提供的地形數(shù)據(jù)接口和CTB 切片工具，通過TileMapServiceImageryProvider 函數(shù)切割DEM，得到離線的地形數(shù)據(jù)。將離線的地形數(shù)據(jù)作為底圖層，利用Cesium 中包圍盒疊加模型數(shù)據(jù)的方法，以及glTF 文件中的Heading、Pitch、Roll等函數(shù)調(diào)整模型最佳位置，并定義場(chǎng)景節(jié)點(diǎn)、材質(zhì)和動(dòng)畫的變換操作，從而實(shí)現(xiàn)動(dòng)態(tài)單體化的效果。

除了前文所述關(guān)鍵技術(shù)和功能之外，還添加了各種組件，從多個(gè)角度可視化多維數(shù)據(jù)。例如：允許用戶自由選擇角度、位置，探索歷史文化街區(qū)的信息；增設(shè)CAD 控件，允許用戶瀏覽CAD 圖紙，并且與單體化建筑交互；增設(shè)距離、面積等實(shí)用測(cè)量工具。

4 結(jié)論

本文基于Cesium 技術(shù)，以傳統(tǒng)建筑傾斜三維模型為基礎(chǔ)數(shù)據(jù)，以WebGL 為繪圖技術(shù)標(biāo)準(zhǔn)，探討并解決了OSGB、OBJ、3DS 等與3D Tiles 數(shù)據(jù)格式轉(zhuǎn)換問題，研究了三維模型、影像及屬性信息展示與編輯以及三維可視化交互平臺(tái)構(gòu)建等關(guān)鍵技術(shù)，為多源數(shù)據(jù)融合與轉(zhuǎn)換、多種格式三維模型編輯與屬性鏈接提供了思路，為展示、管理復(fù)雜的傳統(tǒng)建筑街區(qū)虛擬交互場(chǎng)景提供可行方案和實(shí)踐借鑒，并拓展了Cesium 技術(shù)在智慧城市、傳統(tǒng)建筑保護(hù)、工程建設(shè)中的應(yīng)用范圍和服務(wù)水平，促進(jìn)了Web GIS的發(fā)展。