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

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

三维可视化##3D开发

  1. WebGL, SVG,BIM技术对比
  2. ThingJS整合Echarts数据分析
  3. 隧道监控三维可视化5大场景
    ricardo-gomez-angel-oKrMEczSpis-unsplash.jpg

互联网技术为交通行业的可视化带来了多样性的发展。从传统的二维平面变形图、二维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源码】
1.GIF

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

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

1. 隧道内三维场景浏览

传统的交通监控管理系统常常采用二维平面技术手段,以变形图的形式展示隧道的车型通道图。通过二维图形像素定位,在二维变形图上以图标的形式铺满所有机电监控类设备,无法给人以立体隧道及设备展示的真实客观感受。
基于 WebGL的三维隧道全景可视化技术是矢量图形展示技术,通过基于CAD图元的二维平面隧道结构结合3D建模工具进行隧道二维平面结构拔高处理,可以完全再现三维隧道的客观事实及内部空间结构。
模型部分
隧道三维模型场景需要一个建模过程,利用3DSMAX进行精细建模,并在CampusBuilder内搭建3D场景,ThingJS平台可利用前端脚本开发3D效果,轻松实现场景纹理映射、模型光源效果和反射类型、定义可透视投影的可视空间等3D场景渲染,客观再现隧道内及隧道外部真实的客观世界,可以全景浏览感受隧道的弯曲度、距离水平面的高度、隧道的走向、隧道内车型通道、匝道交叉走向。
交互部分
三维模型的360度全景预览需要配合相应的交互式操作。通过对隧道三维模型场景的放大、缩小操作,可以实现对隧道整体场景的浏览及局部场景的放大展示;通过对隧道三维场景的平移、旋转等操作,以不同的视角浏览三维场景;通过3D场景漫游及相机飞行模式等功能,实现对三维隧道内客观的内部构造及设备安装位置、运行状态的监控。通常,ThingJS开发的3D场景会设定界面初始视角,如在隧道内部进行缓慢视角移动,浏览展示隧道内细节。
【3D演示地址】
2.GIF

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

隧道内三维设备模型可视化提供数据交互,以二维平面做数据展示的表现形式实现三维人机界面的交互,真实反映三维可视化场景中对机电设备的控制以及实现外场隧道机电设备状态。
在三维模型场景中,通过调用传统监控管理系统的数据接口,实时展示单设备的基础信息和状态数据,有隧道场景视角拉近、三维设备模型放大、高亮显示实现设备运行状态拟物化显示、模型360度展示效果。
ThingJS平台基于BS架构,利用WebSocket技术对接通信接口。通过二维信息控制面板展示设备的控制接口参数,同时通过命令发布按钮对设备实现单控、组控、自定义设备群控等操作实现命令一键发布;在接收设备控制命令反馈时,通过 WebSocket获取通信数据,解析设备运行状态与状态信息。利用ThingJS平台写WebSocket.js代码,不到100行即可实现。
【3D演示地址】
3.GIF

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

为了保证隧道的正常通行状态,隧道内会建造一些辅助运行的设施及设备,如工作井、水泵房、管理中心、线缆管道等。在传统的监控平台中,立体的辅助设施通过分层,在二维平面中分别显示不同层级的平面图,不利于对立体层级的理解。
在三维隧道监控中,将工作井、水泵房、管理中心线缆管道等由平面展示方式转换成立体三维模型,此显示模型层级之间、与道路之间、与辅助设备之间的位置关系,再通过线缆管道的线缆联通,结合数据采集技术,实现辅助设施的全生命周期的情况管理,以及隧道内网络拓扑、电力拓扑状态全方位监控。
【3D演示地址】
4.GIF

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

隧道临控中的内场监控,尤其是内场机房的监控承担着部分运维系统的职责面对机房内纷繁复杂的交换机、网络、存储、服务器等设备,传统的二维平面无法形象地表达机柜中各设备所处的位置和机柜的使用情况。
基于三维可视化的内场机房场景的绘制,将整个机房的立体空间结构表现出来,并可做到对机房内全景视角的浏览,直观显示机房中相应机柜所在的位置、机柜中内场机电设备所处在的位置,通过设备通信信息采集数据,实现内场机电设备实时监控状态。通过与网络及电力系统的连接,直观显示机房整体网络架构及电力架构所处的问题点,提升维护处理能力。
【3D演示地址】
5.GIF

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

在传统二维平面监控管理系统中,对于隧道应急事件的处置历来是一个痛点。针对仅有应急处置文字的章程,以及各种复杂的处置方式和无法关联的实时图像,让监控处置的效率一直难以提升。
如何提高应急处置现场的可见性?三维可视化技术辅助高清视频实时图像,能够很好地解决这一问题。
三维可视化技术部分包括创建人物模型、车辆模型、突发应急事件模型、应急救援模型、消防系统模型、逃生路线规划模型,联动预设的机电监控协调处置模型等在时间轴的作用下按处置流程步骤进行逐步演示,形成流畅的应急事件可视化演练效果。
【3D演示地址】

6.GIF

相关文章
|
12月前
|
监控 数据可视化 算法
三维可视化神器带来无限可能,原来三维场景也可以如此轻松实现
三维可视化神器带来无限可能,原来三维场景也可以如此轻松实现
126 1
三维可视化神器带来无限可能,原来三维场景也可以如此轻松实现
|
监控
构建三维一体立体化监控,看这一篇就够了!
如果你需要搭建一套能够立体化监控你的应用及业务,出现问题及时告警的监控体系,这篇文章应该是你所需要的!
537 0
构建三维一体立体化监控,看这一篇就够了!
|
数据可视化 安全 图形学
实时云渲染技术应用之三维可视化部署
实时云渲染技术是以上两个方案的升级方案,该方案是纯B/S架构,将三维可视化、UE\Unity模型放置在服务器上,通过云渲染软件系统流化出可以在手机、电脑、平板、智慧屏等设备上可以直接访问的URL地址。程序运行是在云端服务器上,本地设备无需提供任何算力,用户也不需安装任何插件,而且在网络OK的情况下在任何设备任何地点(办公室、家里等)都可随时打开。在模型建设的阶段也可以选择多种引擎,无论是精美度更高的UE5还是unity、3dmax 或者其他设计软件都是OK的。因为云流化的原理其实不改变程序的指令执行过程,而是把整个执行过程画面以视频流的方式传回给用户终端设备。
436 0
实时云渲染技术应用之三维可视化部署
|
传感器 存储 JSON
智慧养殖,三维可视化解决方案
智慧养殖,三维可视化解决方案
572 0
智慧养殖,三维可视化解决方案
|
数据可视化 物联网
Threejs物联网,养殖场3D可视化(二)
Threejs物联网,养殖场3D可视化(二)
381 0
Threejs物联网,养殖场3D可视化(二)
|
数据可视化 物联网
Threejs物联网,养殖场3D可视化(一)
Threejs物联网,养殖场3D可视化(一)
448 0
Threejs物联网,养殖场3D可视化(一)
|
数据可视化 数据格式
水厂流程三维场景可视化解决方案
水厂流程三维场景可视化解决方案
水厂流程三维场景可视化解决方案
|
监控 数据可视化 物联网
三维可视化应用领域有哪些?
三维可视化应用领域有哪些?基于Web端运行的三维可视化解决方案都有哪些?
456 0
三维可视化应用领域有哪些?
|
传感器 监控 数据可视化
基于WebGL的仓储粮食温度可视化 ThingJS
为了控制谷物储藏温度,需要创造一个不利于虫霉生长低温环境的储粮技术环境,然而出于成本考虑以及进出粮的需要,粮堆内的温度传感器设置数量有限,因此在储粮当中测得的温度值只是传感器附近的温度,其他部分则需要利用相应的方法进行数值模拟。
基于WebGL的仓储粮食温度可视化 ThingJS
|
编解码 监控 数据可视化
地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS
基于ThingJS的通用架构设计随着社会经济的不断发展,城市中的各类地下管线数量不断增加,逐渐构成了结构复杂的地下管网。
地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS