轨道交通综合安防系统应用探究

轨道交通综合安防系统应用探究

【摘要】随着GIS向Web化,二维向三维化发展,三维WebGL已经逐渐成为GIS学科和BIM学科发展的热点,涉及科技发展的多个领域,极具技术研究和应用价值。基于WebGL技术的轨道交通综合安防系统三维可视化应用研究涉及WebGL技术、Three.js技术、CSS+HTML+JS技术、Jquery技术、JSON技术等。论文基于WebGL的三维场景可视化关键技术,主要是通过3DMax软件将模型转换成obj格式,再通过Three.js框架的OBJLoader加载器加载obj模型,最后在Web端进行三维可视化渲染。

【关键词】WebGL;BIM模型;三维可视化;Three.js

1引言

随着互联网的发展,计算机性能的进步,工业智能化水平的提升,以及现代浏览器对WebGL技术应用的支持,实现的功能越来越复杂化,智能设备在生产中的大量应用,管理起来越来越复杂。这些高新技术提高了企业的智能化水平和生产效率,同时也带来了相应的管理难度。WebGL技术的发展,为解决这些问题提供了良好的解决方案,实现了系统管理的更加高效智能。本文主要通过Three.js技术实现BIM模型的三维可视化渲染,实现安防系统的高效智能管理。

2核心技术简介

2.1WebGL技术简介。WebGL(全写WebGraphicsLibrary)基于OpenGLES,是一种在Web浏览器中渲染3D图形的JavaScriptAPI,无需任何插件,通过WebGL技术,Web开发人员就可以借助系统显卡来实现在浏览器里更流畅地展示3D场景和模型,还能创建复杂的导航和直观的数据视觉化。相较于传统的Web交互式技术,WebGL技术有两大优势:①它通过JavaScript实现Web交互式三维动画的制作,无需任何浏览器插件支持;②它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口来实现。

2.2Three.js技术简介。如果直接使用WebGL进行开发三维模型系统,开发效率相对较低,技术门槛较高,需要开发者对计算机三维图形图像学、线性代数、矩阵运算等知识有深入的掌握,开发成本较大。为了解决上述问题,出现了基于JavaScript语言的第三方库Three.js。Three.js是WebGL的一个开源框架,是一款运行在浏览器中的3D引擎,它底层封装了相应的图形处理接口、矩阵运算接口等,可以通过JavaScript语言直接调用,可以大大减少开发者的工作量,具有代码体积小、加载速度快、方便使用的特点。本文研究的Three.js技术主要包含在Web端进行3D场景渲染和对3D模型的一些动作行为操作(如漫游、定位、闪烁、高亮等动作行为)。Three.js框架主要由渲染3D的场景(Scene)、摄像机(Camera)、光源(Light)、渲染器(WebGLRenderer)、控制器(Control)等基本组件组成。场景是一个对应的空间,所有物体的容器,所需要的模型、光源和图文标注等都必须通过Add方法添加到场景。摄像机是三维世界中的观察者,分为透视投影摄像机和正交投影摄像机,主要起到模拟人员观察浏览作用。光源对应的是现实环境中的各种光,如环境光、平行光、点光、聚光等,如果没有光源,就不可能看到任何渲染结果。渲染器是将导入的三维模型、设置好的光源等在相机设定好的角度、远近可视范围内,通过渲染函数渲染成真实物体并以平面形式显现出来。控制器可通过键盘、鼠标控制相机的移动。

3WebGL技术实现

在进行Three.js开发前,需要通过3DMax导出obj格式模型和mtl材质文件,注意mtl文件中的乱码和贴图路径,通过Three.js技术进行开发时,需要按以下流程进行开发实现:步骤1:下载Three.js文件库并引入Three.js库及相关js库。步骤2:在对应的HTML页面上添加canvas标签。步骤3:创建场景并在场景中初始化和加载相应的关联因素。关联因素包含:设置相机的远近可视范围及相机在整个3D环境中的位置和焦点位置;设置光源的类型,光源颜色和强度;创建模型加载器加载模型并设置模型的大小、位置和材质;加载标注,通过创建精灵创建标注模型,设置标注的材质纹理贴图、模型大小和位置;创建渲染器对象设置渲染方式、渲染区域尺寸及背景颜色等;设置控制器,使模型可以放大缩小移动。步骤4:将场景和相机加载到渲染器执行渲染操作。步骤5:对模型中各种设备对象的动作行为和交互功能的操作,如实时报警、定点定位和三维漫游等功能。

4安防BIM模型在Web端的可视化应用

在轨道交通综合安防系统中,通过BIM模型在客户端Web浏览器的可视化展示、信息查询,能够更加直观地了解模型信息和各个设备模型安装的具体位置,方便监控人员对各个设置的实时监控,通过触发系统的实时报警、精准定位等技术实现系统的精确化、智能化,实现了系统管理的更加高效管理,大大提高了模型远程可视化管理。系统模型采用3DMax建模,导出obj格式文件,通过Three.js技术初始化场景,obj加载器加载模型,设置相机、光源及渲染器等,最终通过Web浏览器进行可视化渲染,模型在Web端渲染结果如图1所示。模型操作:用户可以通过鼠标左右键及滚轮实现模型的旋转、平移及缩放,如图2所示。点击模型中的设备,设备高亮显示并弹出设备详情信息,如图3所示。模型设备定位,通过调用定位接口,模型相机直接定位到指定的设备位置,查看了解设备的详情信息,如图4所示。模型漫游飞行,相机会按第一人称视角根据指定的路线进行漫游飞行,对整个模型路线进行巡查,可以查看模型中的各个设备位置设计是否合理等。模型报警,如在现场有人非法闯入触发红外报警等,系统通过调用报警接口直接定位到触发点的位置,并对报警设备进行高亮闪烁,如图5所示。

5结论

随着技术的不断发展,对WebGL技术的要求会越来越高,技术研究将引发更多人的参与,对BIM模型可视化的技术的研究方法也会越来越多,通过对BIM模型的可视化呈现,工作人员可以在Web端直观了解模型信息,各个设备的安装布置信息,对设备进行可视化实时监控,实现高效智能管理。

【参考文献】

【1】晁阳,牛志伟,齐慧君.基于WebGL的BIM模型可视化研究[J].水电能源科学,2020,38(09):79-82.

【2】朱海林,陈登峰,王帅举.基于WebGL的BIM模型三维可视化技术研究[J].科技风,2019(31):123.

【3】李倩.基于WebGL的3D技术在网页中的运用[J].电子测试,2020(12):125-126.

【4】聂帅,秦爽,麦文.通过Three.js引擎加载OBJ模型[J].科学技术创新,2019(14):80-82.

作者:谢燕刚 张毅 刘正寅 单位:四川旷谷信息工程有限公司