基于Cesium 的传统建筑虚拟交互场景构建关键技术研究

谢益炳，彭卫荣，吴早生，刘叶伟，裴媛媛

（1.华汇工程设计集团股份有限公司，浙江 绍兴 312000；2.浙江华汇岩土勘测有限公司，浙江 绍兴 312000；3.绍兴市建筑市场管理中心，浙江 绍兴 312000；4.江西理工大学 土木与测绘工程学院，江西 赣州 341000；5.安徽建筑大学 土木工程学院，安徽 合肥 230601）

我国传统建筑数量多、分布广，复原、修缮、保护和利用好传统建筑，对延续城市历史文脉和传统风貌、提升城市品质具有十分重要的意义。传统建筑数字化一直是传承和保护古建的有效途径。住房和城乡建设部2019 年公布《历史建筑数字化技术标准》，要求传统建筑数字化保护不仅需要进行平面、立面、剖面等图纸、文字的记载与存档，还需要形成可视化的虚拟场景，通过网络、电子化的终端桌面展示，导览传统建筑的三维模型或实体，才能有效传播传统建筑蕴含的文脉和彰显的社会与经济价值。

时下兴起的三维实景技术，完全切合传统建筑数字化保护和虚拟场景对基础数据的需求。通过倾斜摄影测量技术获取倾斜三维模型等实景数据，更加简单快捷，纹理更加逼真，更能反映对象的真实情况，为传统建筑虚拟场景单体化、各类地理场景数据或信息的深加工提供支撑。然而，要实现传统建筑单体化、各类属性和图片等信息的链接、查询、分析，必须以可视化的、可交互的虚拟场景为平台。

虚拟场景构建的技术很多，其中，基于Cesium技术，尤其以倾斜摄影三维模型为数据源，实现传统建筑数字化，获得了国内外专家学者的广泛关注与研究。2015 年，开放地理空间联盟（OGC）推出开源标准3D Tiles，为许多异质的三维地理目标提供流式处理过程。在此基础上，很多学者研究了空间坐标变换和空间位置变换、模型构建和可视化等，实现所有地理数据类型的可视化。但针对较复杂的模型数据，处理过程较复杂，能转化的地理模型格式有限［1-3］。针对不同格式数据与3D Tiles格式之间的模型关系和转换方法、多层次模型构建等，以窦世卿等［4-5］为代表的学者实现了Web 环境下3D Tiles 格式的可视化，但倾斜三维模型的融入还有所欠缺。对于倾斜三维实景模型与3D Tiles融合和可视化的问题，徐照等［6-7］提出了在三维Web GIS 框架下，基于Web GIS 应用程序，实现倾斜三维模型和地理要素数据的可视化，侧重数据或模型的管理，在古建筑、特色小镇等开展试点，但受到虚拟场景的面积和数据量的限制。关于大场景和海量三维空间地理数据的研究，魏世轩等［8-10］从基础底图设计、空间数据存储、空间数据展示、空间数据查询等方面展开研究，较完整地实现了基于Cesium 的空间数据展示与查询系统，但对可视化虚拟场景交互和单体化涉及较少。孟天杭等［11-14］提出了基于Cesium 技术数据驱动的大规模三维场景瓦片构建的解决方案、倾斜摄影三维模型单体化的方法，构建了响应式页面布局的Web 端系统等，也对海量三维空间数据的可视化进行了相关研究，但在场景响应、属性管理、动态单体化矢量面提取等方面存在不足。

综上所述，基于Cesium 引擎与3D Tiles 标准的研究已应用于多个行业，然而在传统建筑虚拟场景构建和数字化方面，应用和研究成果较少，原因主要是现存的传统建筑多成片存在，或者已发展为旅游景点、街区，大范围的古建筑群落不仅需要充足、流畅的场景空间，而且需要精细的纹理，对可视化交互的要求较高。因此，本文在已有文献研究的基础上，以传统建筑倾斜三维模型为基础数据，遵循WebGL 技术标准，利用Cesium 技术，研究三维瓦片数据（3D Tiles）的组织原理，实现传统建筑倾斜影像数据转化，构建传统建筑虚拟场景，解决场景中各种对象的单体化及若干信息的链接与分析等问题。

1 传统建筑倾斜三维模型构建

倾斜摄影测量是一项高新技术，已经逐步取代了正射影像在测绘领域应用的地位，广泛应用于数字城市、智慧城市、文化遗产保护等领域。

1.1 倾斜三维模型构建原理

使用无人机倾斜摄影测量平台，平台集成定位导航传感器，架设五镜头倾斜相机，开展航线规划，从前、后、左、右及垂直方向拍摄，获取不同角度的实景影像和定位导航的POS 数据。二次检查外业航摄成果，确保元数据、POS 信息与影像成果等信息完备、对应，且影像质量可靠、无漏缺、文件格式正确、相机参数信息齐全。然后运用特定的软件，对影像进行匀光处理，并与POS 数据进行平差、快速匹配、空三加密，从而获得被测对象的数字表面模型、正射影像及侧面影像，再通过解算获得倾斜三维实景模型（见图1）。

图1 倾斜三维模型构建的技术流程Fig.1 Technical Process for Building an Inclined 3D Model

1.2 传统建筑倾斜三维模型构建

传统建筑所处环境一般较为复杂，但模型要求的精细度较高。因此，需要进行详细的倾斜摄影测量设计，才能获得可靠的航摄数据。本文使用大疆无人机M300 搭载五镜头相机，获取某传统建筑街区的倾斜实景影像数据，方案如下：

（1）数据资料整理与分析：空域申请、测绘控制数据收集、区域KML 形成和像控规划。

（2）航线设计：设计航摄分区、比例尺、重叠度、航高、航飞时间等。本例采用南北向飞行，共6 条航线，每条航线长度1 131 m，地面分辨率2.5 cm，绝对航高94 m，航向重叠度和旁向重叠度均为85%。

（3）倾斜航空摄影：除了正射获取影像外，其他四个倾斜方向的倾角为45°。

（4）航空摄影数据质量检查：总照片数为2 325，各类信息和参数齐全。

基于外业获取航摄数据成果，采用Bentley 公司的Context Capture 软件处理影像数据，最后生成传统建筑街区的实景三维模型。图2 为某传统建筑街区基于倾斜实景影像构建的TIN 三角网，图3为基于倾斜影像构建的某传统建筑街区的倾斜三维模型一帧。

图2 某传统建筑街区的TIN 三角网Fig.2 TIN of a traditional block

图3 某传统建筑街区的倾斜实景三维模型Fig.3 Inclined Realistic 3D Model of a traditional block

2 基于Cesium 传统建筑虚拟交互场景构建的关键技术

2.1 传统建筑场景数据处理技术

利用Context Capture 解算生成的倾斜实景三维模型，可输出不同坐标系统、不同格式的三维实景模型和二维矢量数据，如OBJ、OSGB、STL 等。Cesium 可以加载glTF 和3D Tiles 格式模型数据，但加载glTF 格式的数据模型（＞1 G 数据量）容易导致浏览器崩溃，而加载多层级的3D Tiles 格式的数据模型时，具有显示效果好、还原性高等优势，因此，构建大规模虚拟交互场景时，通常采用3D Tiles格式的数据模型。

倾斜摄影测量技术生成的传统建筑场景三维模型数据可以保存为多种数据格式，但不能直接导出3D Tiles 格式的数据模型，需要进行数据格式的转换，以便形成传统建筑虚拟交互场景的框架基础。

（1）OSGB 与3D Tiles 数据格式转化

OSGB 格式是最常用的数据格式，通过Page LOD 的形式组织命名，并保存倾斜摄影获取的影像场景数据，将影像数据划分为无数个瓦片，每个瓦片分别存储于一个文件夹中，是一种二进制格式的数据文件。3D Tiles 数据由瓦片集配置索引文件和瓦片数据组成，瓦片集配置索引文件用以记录所有的瓦片节点信息，为树状结构；瓦片数据的主要作用为存储所有的地理信息数据。

经研究，OSGB 与3D Tiles 数据格式转换的重点在于解析OSGB 数据中的XML 数据，并将解析数据重新整合为叠加LOD 数据的glTF 格式数据，最终生成3D Tiles 格式数据。反之，可以采用基于Earth SDK 开源框架构建的Cesium Lab 数据处理系统，或者根据3D Tiles 数据标准自行开发的数据转换工具，完成3D Tiles 向OSGB 的转换。

（2）OBJ、3DS 与3D Tiles 数据格式转化

采用Cesium 技术构建虚拟交互环境的过程中，经常需要导入事先处理好的OBJ、3DS 等格式的模型。目前高版本的Context Capture 或转换器都能将其他格式模型转化成glTF 格式数据。本文采用如下方法，可将OBJ 直接转换为3D Tiles 数据格：

1）采用网格划分，将OBJ、3DS 模型细分为多个子模型，采用二叉树遍历合理进行空间拆分或重组模型表面纹理，根据原模型的UV 坐标，重新计算新模型的UV 坐标值，保存为新的网格模型；

2）根据四叉树原理，对网格模型进行LOD 多层级数据处理，拆分模型，减少模型面数；

3）为每一级得出的数据生成b3dm 格式的模型数据，并遍历生成tileset.json 文件。

2.2 场景对象改进的动态单体化

倾斜三维模型的单体化方法，主要分为切割单体化、ID 单体化、动态单体化［10］。传统建筑比较密集，结构复杂，建筑相交处多，因此，本文研究了一种基于Cesium 技术改进的快速动态单体化的方法。针对传统建筑点、线、面、体之间的关系，通过Cesium API 中Classification Primitive 的对象，创建Polygon Geometry 多边形，自定义凸出面与椭球面之间的距离，设置Classification Type 属性为3D Tiles，将原本高出建筑物的凸出面贴在建筑物上，完成单体化矢量面的创建，再定义鼠标移动事件，判断鼠标位置是否存在对应建筑，并高亮显示，从而实现场景中对象的快速动态单体化，主要技术流程如图4 所示。图5 为基于Cesium 技术实现传统建筑单体化的过程及关键步骤。关键代码为：

图5 基于Cesium 技术的虚拟交互场景单体化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；}}}

该方法操作简便，自动贴合三维模型的方式能够应对各种复杂的传统建筑结构，而且能够在创建单体化建筑时录入建筑信息，大大节省时间。

2.3 三维点云模型、影像及属性信息展示与编辑

构建传统建筑虚拟交互场景，存储、展示、编辑传统建筑及周边街区的信息必不可少。这些信息包括三维模型、点云模型、影像及各类属性等。用户通过客户端编辑、查询传统建筑虚拟中倾斜三维实景模型信息时，需要选中相应的三维模型或者根据属性名称搜索，最终通过这些功能实现传统建筑信息的展示。可以在Cesium 技术环境中，通过Viewer 的entities 在线添加glTF 模型，利用Ajax技术调用后台，将添加的各类模型及位置信息存至MySQL 数据库中，允许用户浏览传统建筑虚拟交互场景的总体布局，并提供增删查改的操作。

本文设计的MySQL 传统建筑信息集合表，融合了三维点云模型、影像、图片、文字等历史文化街区的各类建筑信息。表1 为这种数据库表的结构形式，除了部分属性信息外，设计建筑编号（tp_id）字段为该表的主键，代表每栋建筑的唯一标识，并增设位置字段（point position），记录每栋建筑物的位置信息，方便每栋建筑与街区信息交互。主要代码为：

表1 基于MySQL 的传统建筑数据库表结构Tab.1 Table structure of traditional building database based on MySQL

2.4 融合Web 技术传统建筑场景三维可视化交互平台构建技术

本文利用Cesium 技术构建的三维可视化交互平台包含展示层、服务层、数据层三个模块。

（1）展示层：在Web 前端渲染并可视化虚拟场景信息，并提供虚拟漫游、单体化演示等接口，方便用户交互体验。信息主要包括高精度地形数据、正射影像数据、实景三维模型、高精细化Sketchup 古建筑模型、矢量化图纸等。模型加载的关键代码为：

（2）服务层：用以发布数据和提供Web 服务。浏览器利用Ajax 技术提交SQL 查询语句，Web 服务器运行JavaScript 代码，通过JDBC 连接空间数据库，完成查询。Ajax 查询的主要代码为：

（3）数据层：主要用于存储矢量数据、影像数据、CAD 图纸以及文献资料，通过管理不同建筑的信息数据，满足不同场景的需求，如建筑的修缮、旅游宣传等。本文使用轻量级引擎ThreeJs，利用其良好的交互性、兼容性、快速处理小型建筑模型的能力，将其应用于建筑基本框架和LOD 三层级模型的可视化。图6（a）～（c）分别是数据库中的三维模型、CAD 图纸和建筑影像图片在前端显示的界面。前端可视化满足了数据交互和不同场景的可视需求。创建数据库代码如下：

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

3 实例应用

根据前文的关键技术路线，本文设计了传统建筑三维可视化交互平台构建技术的框架（图7），通过加载影像、地形、倾斜摄影模型数据，展示了街道及传统建筑的总体景观，形成了某传统建筑街区的虚拟交互场景（图8）。

图7 传统建筑三维可视化交互平台构建技术的框架示意图Fig.7 Framework of traditional building 3D visualization interaction platform construction technology

图8 某传统建筑街区的虚拟交互场景一帧Fig.8 One frame of virtual interaction scene of a traditional block

利用Cesium 提供的地形数据接口和CTB 切片工具，通过TileMapServiceImageryProvider 函数切割DEM，得到离线的地形数据。将离线的地形数据作为底图层，利用Cesium 中包围盒叠加模型数据的方法，以及glTF 文件中的Heading、Pitch、Roll等函数调整模型最佳位置，并定义场景节点、材质和动画的变换操作，从而实现动态单体化的效果。

除了前文所述关键技术和功能之外，还添加了各种组件，从多个角度可视化多维数据。例如：允许用户自由选择角度、位置，探索历史文化街区的信息；增设CAD 控件，允许用户浏览CAD 图纸，并且与单体化建筑交互；增设距离、面积等实用测量工具。

4 结论

本文基于Cesium 技术，以传统建筑倾斜三维模型为基础数据，以WebGL 为绘图技术标准，探讨并解决了OSGB、OBJ、3DS 等与3D Tiles 数据格式转换问题，研究了三维模型、影像及属性信息展示与编辑以及三维可视化交互平台构建等关键技术，为多源数据融合与转换、多种格式三维模型编辑与属性链接提供了思路，为展示、管理复杂的传统建筑街区虚拟交互场景提供可行方案和实践借鉴，并拓展了Cesium 技术在智慧城市、传统建筑保护、工程建设中的应用范围和服务水平，促进了Web GIS的发展。