请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 364|回复: 0

[分享] 基于WebGL的三维交通监控可视化技术利用 ThingJS

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-12-14 21:03:45 | 显示全部楼层 |阅读模式

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

  1. 1. WebGL, SVG,BIM技术对照
  2. 2. ThingJS整合Echarts数据分析
  3. 3. 地道监控三维可视化5大场景

基于WebGL的三维交通监控可视化技术利用  ThingJS

互联网技术为交通行业的可视化带来了多样性的成长。从传统的二维平面变形图、二维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技术是与智能交通范畴成长相婚配的可视化展现方式,下面从软件利用架构、模子数据量级、模子展现颗粒度、适用处景、对于数据分析的支持、模子场景静态阅读等六个方面临三种可视化技术停止对照。

基于WebGL的三维交通监控可视化技术利用  ThingJS

ThingJS整合Echarts数据分析

WebGL实现了轻量化三维可视化技术,但没法支持对于数据分析与挖掘的展现。为了填补这一缺点,ThingJS平台支持整合Echarts数据类库, 连系Ajax技术来停止异步监控并显现实时数据分析的2D界面,成为二维平面系统和三维可视化技术相融合的绝佳利用处景。

基于WebGL的三维交通监控可视化技术利用  ThingJS
基于WebGL的三维交通监控可视化技术利用  ThingJS

地道监控三维可视化利用处景

复杂场景的轻量化展现是一个首要趋向,B/S架构会成为大面积利用的平台。ThingJS是基于WebGL的三维可视化技术引擎,操纵ThingJS可视化组件来下降物联网3D可视化开辟的本钱,传统的地道监控治理系统也感遭到了新技术的洗礼。

1. 地道内三维场景阅读

传统
传统的交通监控治理系统经常采用二维平面技术手段,以变形图的形式展现地道的车型通道图。经过二维图形像素定位,在二维变形图上以图标的形式铺满一切机电监控类装备,没法给人以立体地道及装备展现的实在客观感受。
新兴
基于 WebGL的三维地道全景可视化技术是矢量图形展现技术,经过基于CAD图元的二维平面地道结构连系3D建模工具停止地道二维平面结构拔高处置,可以完全再现三维地道的客观究竟及内部空间结构。
模子部分
地道三维模子场景需要一个建模进程,操纵3DSMAX停止邃密建模,并在CampusBuilder内搭建3D场景,ThingJS平台可操纵前端剧本开辟3D结果,轻松实现场景纹理映照、模子光源结果和反射范例、界说可透视投影的可视空间等3D场景衬着,客观再现地道内及地道内部实在的客观天下,可以全景阅读感受地道的曲折度、间隔水平面的高度、地道的走向、地道内车型通道、匝道穿插走向。
交互部分
三维模子的360度全景预览需要配合响应的交互式操纵。经过对地道三维模子场景的放大、缩小操纵,可以实现对地道整体场景的阅读及部分场景的放大展现;经过对地道三维场景的平移、扭转等操纵,以分歧的视角阅读三维场景;经过3D场景周游及相机飞翔形式等功用,实现对三维地道内客观的内部机关及装备安装位置、运转状态的监控。凡是,ThingJS开辟的3D场景会设定界面初始视角,如在地道内部停止缓慢视角移动,阅读展现地道内细节。

基于WebGL的三维交通监控可视化技术利用  ThingJS

2. 三维装备模子可视化与数据交互

地道内三维装备模子可视化供给数据交互,以二维平面做数据展现的表示形式实现三维人机界面的交互,实在反应三维可视化场景中对机电装备的控制以及实现外场地道机电装备状态。
在三维模子场景中,经过挪用传统监控治理系统的数据接口,实时展现单装备的根本信息和状态数据,有地道场景视角拉近、三维装备模子放大、高亮显现实现装备运转状态拟物化显现、模子360度展现结果。
ThingJS平台基于BS架构,操纵WebSocket技术对接通讯接口。经过二维信息控制面板展现装备的控制接口参数,同时经过号令公布按钮对装备实现单控、组控、自界说装备群控等操纵实现号令一键公布;在接收装备控制号令反应时,经过 WebSocket获得通讯数据,剖析装备运转状态与状态信息。操纵ThingJS平台写WebSocket.js代码,不到100行即可实现。

基于WebGL的三维交通监控可视化技术利用  ThingJS

3. 地道帮助设备、装备健康治理

传统
为了保证地道的一般通行状态,地道内会建造一些帮助运转的设备及装备,如工作井、水泵房、治理中心、线缆管道等。在传统的监控平台中,立体的帮助设备经过度层,在二维平面中别离显现分歧层级的平面图,晦气于对峙体层级的了解。
新兴
在三维地道监控中,将工作井、水泵房、治理中心线缆管道等由平面展现方式转换建立体三维模子,此显现模子层级之间、与门路之间、与帮助装备之间的位置关系,再经过线缆管道的线缆联通,连系数据收集技术,实现帮助设备的全生命周期的情况治理,以及地道内收集拓扑、电力拓扑状态全方位监控。

基于WebGL的三维交通监控可视化技术利用  ThingJS

4. 内场机房设备装备保护

传统
地道临控中的内场监控,特别是内场机房的监控承当着部分运维系统的职责面临机房内纷纷复杂的交换机、收集、存储、办事器等装备,传统的二维平面没法形象地表达机柜中各装备所处的位置和机柜的利用情况。
新兴
基于三维可视化的内场机房场景的绘制,将全部机房的立体空间结构表示出来,并可做到对机房内全景视角的阅读,直观显现机房中响应机柜地点的位置、机柜中内场机电装备所处在的位置,经过装备通讯信息收集数据,实现内场机电装备实时监控状态。经过与收集及电力系统的毗连,直观显现机房整体收集架构及电力架构所处的题目点,提升保护处置才能。

基于WebGL的三维交通监控可视化技术利用  ThingJS

5. 地道突发应急事务演练

在传统二维平面监控治理系统中,对于地道应急事务的处置历来是一个痛点。针对唯一应急处置笔墨的章程,以及各类复杂的处置方式和没法关联的实时图像,让监控处置的效力一向难以提升。
若何进步应急处置现场的可见性?三维可视化技术帮助高清视频实时图像,可以很好地处理这一题目。
三维可视化技术部分包括建立人物模子、车辆模子、突发应急事务模子、应急救济模子、消防系统模子、逃生线路计划模子,联动预设的机电监控调和解置模子等在时候轴的感化下按处置流程步调停止慢慢演示,构成流利的应急事务可视化演练结果。

基于WebGL的三维交通监控可视化技术利用  ThingJS


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则