融合虚拟现实技术的桥梁监测系统设计与实现

董忠波 李富年 杜荣武

摘  要： 针对桥梁健康监测系统直观、高效的业务需求，研究当前的工业监测系统模式，提出了融合虚拟现实技术的桥梁监测系统的设计方案。该系统能够应用开源框架Three.js对桥梁信息进行三维可视化监测显示，全方位展现桥梁内外部结构，并结合传感器的实时数据实时反映其当前健康状态;为优化Web系统实时访问监测数据的速度，提出实时和历史数据分离的二层数据存储结构。实践应用结果表明，以Web3D模型为主，多层数据分离存储为辅的监测系统，可以对桥梁监测数据高效地、直观地呈现以及预警，对桥梁管养单位分析、维护桥梁健康情况具有重要意义。

关键词： 桥梁健康监测; 虚拟现实技术; 预警; 数据显示; 数据存储; 数据分离

中图分类号： TN911?34; TP311.1                     文献标识码： A                  文章编号： 1004?373X（2019）16?0044?05

0  引  言

隨着我国经济的快速发展，交通基础设施也随之迅猛增加，桥梁在交通运行中起到了不可替代的作用，其健康状态不容忽视[1?2]。目前，桥梁管理单位多采用人工巡检的方式来对桥梁出现的不利情况依据定期数据采集进行描述，但是对桥梁健康的病变规律和其根本原因不能做确切的分析，这直接影响到桥梁的日常安全运营。随着物联网技术迅速发展，使得桥梁的监测技术也日新月异。通过在桥梁上布置不同种类的传感器，实时采集数据并进行统计分析，能给出及时预警以及防护措施。为了精确反应桥梁的结构动力特性，监测系统需要直观反映桥梁结构特点以及安装的各种传感器的位置特性。传统的监控系统大多以二维平面为主，常用二维图纸或者绘制相关的SVG（Scalable Vector Graphics）可缩放矢量图形来展示桥梁的结构。这种方式需要大量全方位的平面图来展示整个桥梁的结构，但是在监测的过程中难以在平面上直观地定位监测点。目前，虚拟现实、三维立体模型技术的迅速发展，使得应用三维技术对桥梁信息的可视化监测成为更直观、更科学的管理方式[3]。本文结合桥梁监测和维护的实际需求，将虚拟现实技术融合到桥梁结构监测系统，采用主流的Web3D图形化技术全方位地展现桥梁内外部结构，结合各监测点的数据实时反映桥梁各构件的当前健康状态，为桥梁监测、预警以及维护提供依据。

1  虚拟现实和Web3D技术

1.1 虚拟现实技术

虚拟现实技术是将数字图像处理、计算机图形学、多媒体技术、传感器技术等多个信息技术融合为一体的一门崭新的综合性信息技术[4]。这项技术最早是由美国VPL公司的Jaron Lanier 提出，已广泛运用于军事、工业、 医疗、教育、农业等各个领域[5]。基于Internet的三维虚拟现实技术由于不受地域和时间的限制，其应用也越来越普及。网络三维虚拟现实技术主要是通过Web3D 技术实现的，Web3D技术主要是指在互联网络的基础上，开发出来的能够实现三维虚拟现实效果的一种技术，其核心在于其模型的设计和功能的交互。

1.2  Web3D技术的现状

当前Web3D技术的研究和应用较为主流的解决方案有Java3D，Flash3D，VRML和Cult3D等， 但这些方案普遍存在开发效率低、兼容性差、不直接支持硬件加速、需要插件安装等问题[6]。为了解决这些问题，一种基于HTML5和WebGL的设计方案逐渐受到关注。WebGL则是一种3D绘图标准，这种绘图技术通过增加OpenGL ES 2.0的一个JavaScript绑定，可以为HTML5 Canvas提供硬件3D加速渲染，这样开发者就可以借助系统显卡在浏览器里更流畅地展示3D场景和模型。WebGL的特点主要包括：通过JavaScript脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;利用底层的图形硬件加速功能进行图形渲染，实现了统一的、标准的、跨平台的OpenGL接口[7?8]。

尽管WebGL所提供的各种接口非常丰富且强大，但其在创建三维图形和动画时非常繁琐，且对于用户使用过于复杂。为了减小开发难度，同时构建高等级、用户界面友好的WebGL开发环境，许多基于WebGL的框架，如SceneJS，PhiloGL，Three.js[9?10]等应运而生。其中，SceneJS的API数据类型和JSON相似，开发难度小;PhiloGL对于WebGL接口的封装不完全，导致使用PhiloGL开发时，开发者需要熟悉底层WebGL技术，增加了开发困难;Three.js比SceneJS量级更轻，支持多种数据类型（JSON，3DS，VTK，OBJ等），同时以简单直观的方式封装了3D图形编程中常用的对象，增加了很多图形引擎的高级技巧，极大地提高了显示性能，从而减轻了开发者的开发难度并提高了开发速率。因此，本文选择Three.js框架来实现三维桥梁模型的开发。

2  监测系统总体架构

桥梁监测系统的逻辑层主要包括数据采集端和数据发布端，如图1所示。在数据采集端，采集程序将原始传感器数据存储到原始实时数据表中。为了方便历史数据的查询和分析，利用数据处理转储接口，定时将原始数据和预处理后的数据备份存储到中心数据库。数据发布端则主要负责数据的备份和数据发布，并与Web服务器进行交互。Web服务器作为中间桥梁，将用户和中心数据库连接起来。Web数据管理系统接收到终端用户的HTTP请求后与后端的中心数据库进行交互，并把数据通过HTTP回应给终端用户。

桥梁监测系统功能如图2所示，主要包含：

1） 用户权限和日志，按照运营管理原则，给每个用户授予不同的操作权限，保证数据的安全;

2） 数据子采集系统，对接收到的原始数据进行初步处理，得到监测数据;

3） 虚拟现实监测子系统，采用3D模型展示桥梁结构，提供全方位的视角进行监测;

4） 数据分析子系统，分析采集的数据，将结果反馈到3D模块;

5） 扩展模块，由于手持终端软件客户端同样采用B/S模式，其数据的访问和控制与本系统框架完全一样，因此这种扩展功能模块可以平滑过渡，做到无缝连接。

在桥梁的健康监测中，需要各种类型的大量传感器通过高频（如50 Hz）数据采集来综合测评桥梁的安全指数，如加速度、应力、倾角变化量等。面对这些海量数据，为保证系统的健壮性，在设计该监测系统时需从以下两方面考虑：

1） 数据的存储问题，以单个传感器为例，利用50 Hz的高频采集，每天的数据量可达432万条，传统的方式大多将数据分类和分区来存储，但随着时间的推移，数据库中单表数据量的增大必然导致其实时监控性能有所下降。

2） 传感器在监测系统中的直观显示，在实际的监测中，相同类型的传感器数量多，且分布在桥梁的不同位置上，传统的方式是给传感器命名和文字描述来确定其监测位置，在监测系统中同样通过其描述来确定该传感器在桥上的具体位置。这种方式在传感器量少的情况下可以达到监测的目的，并且要求监测人员对桥梁的结构有清晰的认知。

为解决桥梁监测汇总的这两个重要因素，本文将从数据库和各监测点的直观呈现来优化监测系统，使得系统能更稳定、直观。

3  系统软件设计

3.1  数据库的设计

针对数据采集过程中速率快以及数量大等问题，本文采用Oracle 11g R2作为系统的存储数据库。为保证Web服务器总是快速地读取到最新的监测数据，通过在数据库中创建两个表：一个称为实时表;一个称为历史表。两个表的结构一致，数据采集程序将数据通过串口直接存储到实时表中，采用Oracle的定时任务机制和其存储过程，每间隔10 min，将实时表中的数据复制到历史表中，并将已复制的数据在实时表中删除，这样实时表中的数据最多只存储10 min的数据。以50 Hz为例，实时表最多存储3万条数据，该数量级对于Web服务器的读取非常迅速。这样设计降低了因查询数据的时间而使得实时监测的延迟，其原理如图3所示。对于历史数据的查询，Oracle还提供了分区设计和建立索引的方式来提高查询速率，针对历史表，采用每天一个分区，根据数据的采集时间建立索引，以保证历史数据查询的效率。

3.2  Web3D桥梁的设计

在桥梁监测系统的服务中，3D桥梁模块是本系统的重要设计流程，本文将3D桥梁模型作为其所有监测功能的入口，以直观地呈现传感器在桥梁上的分布情况以及各监测点的实时监测数据。通过Three.js创建一个有效的场景包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及场景中创建的物体（Object）等，渲染结构如图4所示。

Web场景中桥梁的3D模型设计主要分为两步：首先，使用3D模型制作软件3ds MAX制作桥梁的基础3D模型，生成模型数据文件;然后，通过Three.js向Web系统导入模型文件，调整模型的位置以及在桥梁上对应监测点嵌入传感器等，并链接实时数据查询、断面结构图等功能模块。设计的详细流程如图5所示。

3.2.1  创建渲染器、场景和相机

渲染是图形在屏幕上的绘制过程，主要用来渲染3D模型。Three.js提供了丰富的渲染器选择，不同渲染器渲染的效果有所不同，本文采用Three.js提供的WebGL类型渲染器，创建渲染器后，还需要设置渲染器的像素比、阴影模式以及渲染器的大小等相关因素。

场景即3D模型所需要放置的位置，任何的3D对象需要在添加场景中经过渲染才能显示，相机决定哪些对象将要渲染。在Three.js中，相机的类型主要有正交相机（Orthographic Camera）、透视相机（Perspective Camera）、全景相机（Cube Camera）和3D相机（StereoCamera）。其中，正交相机的效果类似设计图，重在表现物体的实际尺寸，没有近小远大的效果;透视相机拍摄的效果类似人眼所见，有近小远大的效果;全景相机就是360°拍摄的相机;3D相机是用两个不同位置的透视相机同时拍摄，将拍摄的结果合成为一个画面。在3D的开发中，透视相机最符合人们的观察习惯，因此本文设计时选择透视相机。透视相机的原理如图6所示。

3.2.2  导入3D模型，添加传感器示意模型

在3ds MAX绘制好模型后，将模型导出为OBJ和MTL格式的文件。OBJ是一种开放的几何定义文件格式，它仅表现3D几何体，即各顶点的位置;MTL文件则是OBJ附属文件，用以描述几何体的表面属性，其主要作用是给模型添加材质，即模型上的贴图、纹理等。Three.js中提供了OBJ Loader和MTL Loader的接口，分別可以加载对应的文件，在加载的过程中，由于模型的材质属性等较多，可先预加载MTL文件来提高加载的效率。

4  应用效果

在桥梁3D模型结构设计步骤完成后，通过渲染场景，即可显示所设计的桥梁模型，如图7所示。通过Three.js加载后的桥梁模型，可通过旋转、拖拽、放大或缩小来查看桥梁的全方位信息，如桥梁的正视图、背面图、俯视图以及桥面的平视图等。

查看桥梁上某具体传感器信息如图8所示。通过鼠标滑过桥梁上嵌入的传感器，可在左上区域显示该传感器的基本信息和实时数据，当实时数据达到预警值时，该处的传感器会闪烁预警。右侧的控制面板可提示操作信息，包括模型的旋转、缩放、拖拽等，还可选取传感器类型，使其在桥梁上显示或者隐藏。

为方便用户进行数据分析，本系统还设计了二维的平面信息展示页面，通过在3D模型点击相應的截面快捷通道，可跳转到相应的截面信息页面，如图9所示。在该页面可选择选中截面中包含的传感器，提供查看实时数据、历史数据、数据的幅频特性分析以及该传感器的现场布置图等，经测试，在查看其实时数据曲线时，数据的延迟在5～10 s内。

5  结  语

本文设计了基于Web3D虚拟现实技术的桥梁监测系统。针对监测数据的特点，设计实时数据和历史数据分离的存储方式，优化了系统对海量数据的访问速度，从而提高了系统的监测实时性。在桥梁的3D可视化设计方面，采用功能强、开发效率高的Three.js框架来实现，系统不依赖于运行环境，无需任何插件或第三方工具软件的支持，降低了部署和维护成本。在功能方面，包含3D模型的基本操作、监测点的直观显示、数据的基础分析以及预警等，并能根据实际情况将系统进行拓展。该系统已成功地部署在了某高校人行天桥上，对于桥梁管养人员实时监测、评估大桥的结构状态和维护桥梁的安全等具有很大的帮助。

参考文献

[1] 李志鹏.桥梁健康监测数据可视化系统设计与实现[D]. 重庆：重庆大学，2016.

LI Zhipeng. Design and implementation of bridge health monitoring data visualization systems [D]. Chongqing：Chongqing University，2016.

[2] 李志红.交通道路桥梁的病害与维护分析[J].工程技术，2016（29）：145.

LI Zhihong. Analysis of diseases and maintenance of traffic roads and bridges [J]. Engineering technology， 2016（29）： 145.

[3] 吴桐桐，周国辉.基于虚拟现实的三维建模技术的研究[J].智能计算机与应用，2016，6（2）：113?115.

WU Tongtong， ZHOU Guohui. Research of visual reality 3D modeling technology [J]. Intelligent computer & applications， 2016， 6（2）： 113?115.

[4] 胡伟，李兵.基于Web3D的虚拟现实技术的对比研究与分析[J].湖南第一师范学院学报，2012，12（4）：121?124.

HU Wei， LI Bing. A comparative study of virtual reality technology based on Web3D [J]. Journal of Huan First Normal University， 2012， 12（4）： 121?124.

[5] 罗演，黄红星，李静红.基于Web3D虚拟现实技术在农业技术推广中的前景分析[J].农业网络信息，2014（5）：25?29.

LUO Yan， HUANG Hongxing， LI Jinghong. The application prospect of Web3D virtual reality technology in agricultural technology extension [J]. Agriculture network information， 2014（5）： 25?29.

[6] 卞敏捷，高珏，高洪皓，等.Web3D可视化技术的研究与应用[J].计算机技术与发展，2015（6）：141?144.

BIAN M J， GAO J， GAO H H， et al. Research and application of Web3D visualization technology [J]. Computer technology & development， 2015（6）： 141?144.

[7] 李连民，翟阳阳.基于WebGL的汽车3D展示系统的创建[J].电子技术与软件工程，2017（11）：72.

LI Lianmin， ZHAI Yangyang. Creation of auto 3D display system based on WebGL [J]. Electronic technology & software engineering， 2017（11）： 72.

[8] KIM K S， LEE K W. Visualization of 3D terrain information on smartphone using HTML5 WebGL [J]. Korean journal of remote sensing， 2012， 28（2）： 245?253.

[9] 王腾飞，刘俊男，周更新.基于Three.js 3D引擎的三维网页实现与加密[J].企业技术开发，2014，33（1）：79?80.

WANG Tengfei， LIU Junnan， ZHOU Gengxin. 3D web page implementation and encryption based on Three.js 3D engine [J]. Technological development of enterprise， 2014， 33（1）： 79?80.

[10] DIRKSEN Jos. Learning Three.js开发指南：WebGL的JavaScript 3D库[M].北京：机械工业出版社，2015.

DIRKSEN J. Learning Three.js： The JavaScript 3D library for WebGL [M]. Beijing： Mechanical Industry Press， 2015.