基于BIM+Cesium三维可视化校园系统的设计与实现
2021-02-22严昱欣董丽丽
叶 娜,严昱欣,张 翔,董丽丽
(西安建筑科技大学 信息与控制工程学院,西安 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 几何表属性类型
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
以学校图书馆为例，通过上述四步将模型的几何、材质、属性解耦，其数据提取结果如图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格式的转换方法，保证其几何与属性数据的正确保留；最后结合三维可视化、空间分析、信息查询三个方面设计并实现浏览器端三维校园可视化系统，为校内外师生的生活学习提供帮助。
