基于WebGL的三维交通监控可视化技术应用（实践版） ThingJS

#三维可视化##3D开发#

1. WebGL， SVG，BIM技术对比

2. ThingJS整合Echarts数据分析

3. 隧道监控三维可视化5大场景

互联网技术为交通行业的可视化带来了多样性的发展。从传统的二维平面变形图、二维SVG矢量图到如今的SVG三维矢量技术、BIM技术、GIS+BIM技术、 WebGL技术，甚至连AR、VR、MR等虚拟现实技术，也开始应用于交通领域的可视化发展方面。

WebGL，SVG, BIM 技术对比

SVG 以二维平面的矢量图形为主，也支持三维可视化展示，通常应用在地铁线路、高速公路线路展示方面。以SVG制作的三维模型在三维场景里的使用个数有限，否则会引起整体卡顿，此外，SVG三维模型对于模型渲染的程度不高，会影响三维模型展示的实时性。

BIM(Building Information Modeling) 技术是一种应用于工程设计、建造、管理的数据化工具，常应用于城市楼宇、水库、工厂等以工程建筑为主体的全生命周期的健康监测方面，需要大量的三维数据模型来支撑。近年来，基于GS+BIM结合的三维可视化技术已经开始涉足交通行业，能够对空间数据分析及挖掘展示提供很好的技术支持，但对于路段级别的地道监控管理系统来说，成本过高。

WebGLOpenGL 是基于(开放图形库)协议在Web浏览器中进行3D渲染的API，是一个基于纯BS架构开发的技术。对于路段级别的隧道监控管理系统来说，可视化的重点在于隧道内部，所以不需要大量的地理数据和建设数据作为支撑。

SVG三维矢量技术、BIM技术、WebGL技术是与智能交通领域发展相匹配的可视化展示方式，下面从软件应用架构、模型数据量级、模型展示颗粒度、适用场景、对于数据分析的支持、模型场景动态浏览等六个方面对三种可视化技术进行对比。

ThingJS整合Echarts数据分析

WebGL实现了轻量化三维可视化技术，但无法支撑对于数据分析与挖掘的展示。为了弥补这一缺陷，ThingJS平台支持整合Echarts数据类库， 结合Ajax技术来进行异步监控并显示实时数据分析的2D界面，成为二维平面系统和三维可视化技术相融合的绝佳应用场景。

【查看3D源码】

隧道监控三维可视化应用场景

复杂场景的轻量化展示是一个主要趋势，B/S架构会成为大面积使用的平台。ThingJS是基于WebGL的三维可视化技术引擎，利用ThingJS可视化组件来降低物联网3D可视化开发的成本，传统的隧道监控管理系统也感受到了新技术的洗礼。

1. 隧道内三维场景浏览

传统

传统的交通监控管理系统常常采用二维平面技术手段，以变形图的形式展示隧道的车型通道图。通过二维图形像素定位，在二维变形图上以图标的形式铺满所有机电监控类设备，无法给人以立体隧道及设备展示的真实客观感受。

新兴

基于 WebGL的三维隧道全景可视化技术是矢量图形展示技术，通过基于CAD图元的二维平面隧道结构结合3D建模工具进行隧道二维平面结构拔高处理，可以完全再现三维隧道的客观事实及内部空间结构。

模型部分

隧道三维模型场景需要一个建模过程，利用3DSMAX进行精细建模，并在CampusBuilder内搭建3D场景，ThingJS平台可利用前端脚本开发3D效果，轻松实现场景纹理映射、模型光源效果和反射类型、定义可透视投影的可视空间等3D场景渲染，客观再现隧道内及隧道外部真实的客观世界，可以全景浏览感受隧道的弯曲度、距离水平面的高度、隧道的走向、隧道内车型通道、匝道交叉走向。

交互部分

三维模型的360度全景预览需要配合相应的交互式操作。通过对隧道三维模型场景的放大、缩小操作，可以实现对隧道整体场景的浏览及局部场景的放大展示；通过对隧道三维场景的平移、旋转等操作，以不同的视角浏览三维场景；通过3D场景漫游及相机飞行模式等功能，实现对三维隧道内客观的内部构造及设备安装位置、运行状态的监控。通常，ThingJS开发的3D场景会设定界面初始视角，如在隧道内部进行缓慢视角移动，浏览展示隧道内细节。

2. 三维设备模型可视化与数据交互

隧道内三维设备模型可视化提供数据交互，以二维平面做数据展示的表现形式实现三维人机界面的交互，真实反映三维可视化场景中对机电设备的控制以及实现外场隧道机电设备状态。

在三维模型场景中，通过调用传统监控管理系统的数据接口，实时展示单设备的基础信息和状态数据，有隧道场景视角拉近、三维设备模型放大、高亮显示实现设备运行状态拟物化显示、模型360度展示效果。

ThingJS平台基于BS架构，利用WebSocket技术对接通信接口。通过二维信息控制面板展示设备的控制接口参数，同时通过命令发布按钮对设备实现单控、组控、自定义设备群控等操作实现命令一键发布；在接收设备控制命令反馈时，通过 WebSocket获取通信数据，解析设备运行状态与状态信息。利用ThingJS平台写WebSocket.js代码，不到100行即可实现。

3. 隧道辅助设施、设备健康管理

传统

为了保证隧道的正常通行状态，隧道内会建造一些辅助运行的设施及设备，如工作井、水泵房、管理中心、线缆管道等。在传统的监控平台中，立体的辅助设施通过分层，在二维平面中分别显示不同层级的平面图，不利于对立体层级的理解。

新兴

在三维隧道监控中，将工作井、水泵房、管理中心线缆管道等由平面展示方式转换成立体三维模型，此显示模型层级之间、与道路之间、与辅助设备之间的位置关系，再通过线缆管道的线缆联通，结合数据采集技术，实现辅助设施的全生命周期的情况管理，以及隧道内网络拓扑、电力拓扑状态全方位监控。

4. 内场机房设施设备维护

传统

隧道临控中的内场监控，尤其是内场机房的监控承担着部分运维系统的职责面对机房内纷繁复杂的交换机、网络、存储、服务器等设备，传统的二维平面无法形象地表达机柜中各设备所处的位置和机柜的使用情况。

新兴

基于三维可视化的内场机房场景的绘制，将整个机房的立体空间结构表现出来，并可做到对机房内全景视角的浏览，直观显示机房中相应机柜所在的位置、机柜中内场机电设备所处在的位置，通过设备通信信息采集数据，实现内场机电设备实时监控状态。通过与网络及电力系统的连接，直观显示机房整体网络架构及电力架构所处的问题点，提升维护处理能力。

5. 隧道突发应急事件演练

在传统二维平面监控管理系统中，对于隧道应急事件的处置历来是一个痛点。针对仅有应急处置文字的章程，以及各种复杂的处置方式和无法关联的实时图像，让监控处置的效率一直难以提升。

如何提高应急处置现场的可见性？三维可视化技术辅助高清视频实时图像，能够很好地解决这一问题。

三维可视化技术部分包括创建人物模型、车辆模型、突发应急事件模型、应急救援模型、消防系统模型、逃生路线规划模型，联动预设的机电监控协调处置模型等在时间轴的作用下按处置流程步骤进行逐步演示，形成流畅的应急事件可视化演练效果。