基于Three.js引擎模块的隧道三维可视化系统设计与实现

林 杰,祝江林,肖 强,黄思璐,谢 俊,朱 轶,邓仪莉

(1.湖北交投智能检测股份有限公司,湖北 武汉 430220;2.武汉精视遥测科技有限公司,湖北 武汉 430070)

21世纪以来,我国公路隧道工程建设迅猛发展。截至2022年底,共建成公路隧道24 850座、26 784.3 km,与2021年相比,新增1 582座,里程年增速达2 085.4 km[1]。隧道工程的庞大体量给运管工作带来巨大挑战[2]。

目前,大多运营高速公路隧道依旧采用纸质记录、摄像记录等传统人工检测方法,检测效率低、检测结果不直观,大量定性描述的检测报告远不如一张标记了病害特征参数的照片直接[3]。SONG等[4]将在隧道工程的规划与设计阶段引进BIM技术开发了工程协同管理平台,成功实现了工程的整体优化。LEE等[5]提出集成了BIM与GIS技术的系统框架,结合应用案例为业内提供了一种隧道设施全面监测与管理的新思路。李健等[6]指出为获取全面的信息以进行运营隧道良好管理,可通过建立与实体隧道对应的三维模型来展示实际情况,结合适当的图文说明来提高隧道的管理效率。GE等[7]提出可实现多专业设备管控的公路隧道养护管理系统框架及关键模块,为广大研究人员提供了相关思路。王阳[8]结合传统隧道控制与管理技术的,提出根据洞外光环境实时调控隧道内灯具性能的智慧隧道管理平台。梁彤[9]针对现有隧道管养工程中存在的大量养护数据失真度高、养护标准化与信息化程度低等问题,引入BIM和WebGL技术,建立病害三维可视的公路隧道养护管理平台。陈光景[10]建立集交通诱导、通风与照明以及火灾报警等功能的隧道监控系统。孙培培[11]基于BIM技术对地铁隧道参数化建模,结合隧道测量机器人实现了结构变形的自动化监测。张倩茜等[12]分析通过网络实现信息以及可视化服务的优势,提出基于Web的产品数据交换与共享结构。沈柯[13]基于WebGL与HTML5技术,实现3D网页游戏的响应式布局,实现网页游戏与用户的良好互动,为智慧隧道管理平台的用户交互提供参考。

综上,现有的隧道管理系统研究不成体系,未见对隧道管养数据进行直观化展示调整,现有隧道管理系统无法有效提高隧道运维管理效率。因此,笔者基于Three.js引擎模块,设计并实现隧道三维可视化系统。系统允许用户在三维场景中进行视角漫游,实现不同部位表观病害及其详情的动态展示。

1 技术简介

Three.js是建立在WebGL技术之上的高级3D图形库,其提供更简单、更易用的API,使开发者能更专注于网页端三维模型的建模与展示。与WebGL相比,Three.js在多方面更具优势。在此对Three.js相对于原生WebGL的一些优势进行简要介绍。

1.1 简化的API

使用WebGL进行场景创建并渲染一个立方体时,通常包含 “顶点着色器定义、片元着色器定义、创建着色器、创建看色器程序、获取uniform和attribute位置、创建缓冲区并绑定数据、设置视口并清除画布、启用着色器程序和属性、创建投影矩阵和模型视图矩阵、更新uniform变量、绘制” 这一系列步骤,且代码繁琐;而Three.js仅需“创建场景、相机和渲染器、创建立方体、渲染场景”4个步骤,且代码较为简洁。因此,Three.js提供更高级、更简化的API,使得网页三维模型展示的开发过程更加便捷和高效。

1.2 更高级的抽象级别

在WebGL中,着色器、缓冲区、顶点和片元数据等需要手动处理,而Three.js将这些细节封装在类和方法中,无需编写或操作底层细节。此外,Three.js还封装了光源、相机、投影矩阵、模型视图矩阵等功能和工具,无需进行手动添加。因此,Three.js提供更高级的抽象级别,使得开发者更专注于设计与交互,充分提高开发效率。

1.3 增强的功能和效果

与WebGL相比,Three.js提供如粒子系统、后期处理效果、阴影效果、纹理映射、动画等功能强大且易于使用的库,允许开发者轻松创建如雨、雪、光晕、平行光阴影等复杂效果。因此,Three.js提供的增强的功能和效果,使得开发者更轻松的创造出夺人眼球的三维场景,让网页三维模型更具有视觉冲击力以及更好的交互性。

综上,Three.js在网页三维建模中具有强大的功能与便捷的操作,与WebGL相比,优势显著。因此,Three.js是在网页三维模型展示中更常用和受欢迎的选择。

2 隧道三维可视化系统设计与实现

2.1 隧道智能数据采集系统

笔者研究的隧道智能数据采集系统为自主研发的成套技术,包含高速高精度图像数据采集系统、隧道图像拼接及识别系统、隧道数据可视化系统。

(1)隧道智能检测系统(SmartTMS-mini)隧道智能检测系统是公司研发出的新一代隧道快速检测系统,如图1所示。该系统使用多个线阵相机和自主研发的LED线阵光源,以获取隧道表面的高分辨率纹理信息。同时,为自适应不同车道数的隧道,系统还配置了一台激光扫描仪,用于获取各相机到隧道断面的距离信息,继而通过反演,准确获得断面影像上的单位像素对应的实际尺寸。

图1 隧道智能检测系统

该系统在进行测试前需进行标定。设计一个标定架模拟隧道面,调整车辆位置,保证线阵相机和激光扫描仪同时可以采集到标定架的数据,如图2所示。基于线阵相机的成像特点,同时获取像点及其对应的物方点坐标,拟合出扫描面的方程,进而更新像点对应的物方点坐标。利用线阵相机的成像模型,物方点与像点共线,求得相机的焦距和像主点等内参。

图2 标定架

该系统可在高速行驶中对隧道表观病害进行无损检测(0～80 km/h)。覆盖单洞2～3车道隧道洞口、洞门、衬砌表观病害、检修道病害、标志标线等检测。

(2)数据采集与处理。采用隧道智能检测系统(SmartTMS-mini)对隧道衬砌图像进行采集。检测车行驶在准备采集过程中,在离需要检测隧道200 m时,车辆变更到预设需要采集车道,同时车速应保持在60～70 km/h均速行驶,在离需采集数据隧道50～100 m前,打开采集软件,开启采集(提前对采集软件进行必要参数设置,包括不限于隧道名称、隧道道路名称、隧道检测反向等),采集完后出隧道30m左右停止采集。

由于不同镜头的相机和不同物距的存在,使得线阵相机一次采集的隧道衬砌图像分辨率差异较大,同时相机之间采集的数据存在一定重叠区域,严重影响后续的图像拼接。直接拼接分辨率差异较大的图像导致结果产生变形。为此,笔者提出一种在预处理过程中拼接图像采取分辨率归一化,得到近似相同分辨率。具体流程如下:①通过标定的相机和激光外参,以及激光的测距值获得每个相机的分辨率;②对6个相机图像分辨率进行统计分析,选择某幅图像作为基准,一般将分辨率最小的或者分辨率最低的那幅图为基准,计算其他图像分辨率与该参考图像分辨率的比值;③根据步骤②计算得到的其他图像与参考图像的比值,对其他图像做分辨率的调整,让所有图像的分辨率能达到一致。完成图像分辨率的调整后,使用相机的焦距作为投影半径进行柱面投影,以保证图像因投影产生的变形是最小的,投影结果高度接近原始图像。综合摄影测量几何拼接、辅以图像特征分析技术,对投影后图像进行半幅以及全幅拼接。该方法有效避免了传统图像拼接技术中普遍存在的计算量大、耗时长、并且容易发生误匹配等缺点,适合于隧道图像的拼接。图像拼接效果如图3所示。

图3 两车道拼接完成全幅局部段示例

(3)隧道病害识别及处理。为实现隧道病害的精确识别,笔者提出结合人工智能与深度学习技术的方法。首先,利用自主研发的数据标注软件为Yolo V5深度学习模型提供相当体量的训练数据,如图4所示。完成数据的标注后,通过行业专家进行结构化的整理及汇总,确保样本数据是真实有效。

图4 数据标注软件

在掌握大量真实有效的样本数据后,针对不同的采集环境建立隧道图像特征数据库,分析总结隧道图像及裂缝类病害的特征。在对特征充分认识的基础上,基于粒度计算理论快速定位裂缝候选区域,保证裂缝定位的准确性;基于裂缝发展趋势的估算实现裂缝生长,保证裂缝检测的完整性;建立隧道裂缝自动检测试验系统验证算法的可靠性及适用性,隧道裂缝类病害识别总流程如图5所示。

图5 隧道裂缝类病害识别总流程

2.2 可视化渲染

为更好地在网页上展示、处理并呈现三维隧道可视化模型及其病害表观病害分布情况,根据以下4个步骤实现该项技术:模型构建、隧道曲面柱状展开、病害图片坐标分区、病害纹理配置。

(1)模型构建。Three.js渲染流程需要先定义场景。在成功导入Three.js的库后,在HTML文件中创建用于显示三维场景的画布元素,之后创建包括模型、灯光、相机等所有三维元素的场景。设置好基本参数后,创建Three.js相机对象以定义观察者的视角,并添加好光源以照亮场景中的模型;之后为模型添加材质以决定其外观和纹理,再将模型与材质结合,创建最终在场景中显示的Three.js网格对象。完成以上准备工作后,添加动画效果或者交互功能以完成模型的基本构建。模型渲染流程如图6所示。

图6 模型渲染流程

(2)隧道曲面柱状展开。因为相机拍摄的隧道衬砌为二维,为实现隧道三维可视化,需利用纹理映射技术。通过曲面柱状展开方式,对隧道照片进行处理,如图7所示。

图7 柱状展开图

计算前,将隧道曲面中心设为原点,指定X轴与Y轴后可以得到隧道曲面柱状展开的半径;通过坐标转换公式将直角坐标系转化为极坐标系,得到各点方位角。最后根据映射公式,如式(1)所示,将通过隧道智能检测系统(SmartTMS-mini)获取的二维衬砌图像像素坐标转化为全景柱状展开图的像素坐标:

(1)

式中:x*、y*表示柱状展开图的横、纵坐标;x、y表示全景图像的横、纵坐标;r1、r2表示隧道曲面展开区域的内、外径;θ表示隧道曲面柱状展开后曲面像素坐标的方位角。

(3)病害图片坐标分区。通过自动或人工识别完成后,将包含病害坐标位置、里程等详细数据完成输出,并输出工程病害信息展布图,如图8所示。在CAD中提取出的病害坐标并非病害的实际位置信息,需通过计算来实现平面坐标的转化以反映病害在实际隧道断面的具体位置。

图8 工程病害信息展布图

受衬砌表面污损等影响,柱面展开后的隧道曲面难以直接观察,且不易标注病害信息,如果将病害区域使用含有详细信息的纹理来替代,那么可在实现病害可视化的同时,将模型轻量化。在使用纹理映射技术将隧道二维图像进行柱状展开后,对衬砌病害图进行分区,如图9所示。结合已识别的隧道病害的顶点坐标,根据病害分区的顶点坐标进行对应,确定病害贴图的坐标及纹理单元坐标。通过工程病害信息展布图中,病害分区图片的绝对坐标,通过公式转化,得到病害在隧道柱面展开后的极坐标后,将纹理坐标与顶点坐标写在同一缓冲区,将两者配对并记录,用于后续开展病害纹理配置。

图9 图片分区示意图

(4) 病害纹理配置。在完成模型构建、隧道二维图像柱状展开,且将病害纹理坐标与分区顶点坐标配对后,需进行病害纹理配置。借助纹理映射技术,将病害纹理进行分割,最后如粘贴“瓷砖”一样,将隧道病害元素如实在隧道模型上体现。在Three.js中,通过Texture命令来加载和存储应用于三维模型表面的已分割的病害图像。病害纹理的具体配置流程如下:①使用TexturelLoader函数来加载已分割的病害纹理图片,并在加载完成后创建纹理对象;②加载完纹理对象后创建一个合适的材质对象,并将加载的纹理应用到这个材质上;③根据病害纹理尺寸需求,在建立的模型上创建网格;④根据配对并记录下的纹理坐标与顶点坐标,将应用纹理对象的材质应用到几何体上;⑤核查模型,调整纹理的重复和包裹方式等细节参数。纹理单元操作流程如图10所示。以一张隧道病害展布图为例,将其病害纹理坐标与顶点坐标匹配并将病害图片分配到制定单元后,可实现隧道及其病害数据的三维可视化,如图11所示。

图10 纹理单元操作

图11 隧道三维可视化效果图

2.3 用户交互设计

为与日常巡检使用场景相对应,设计了能满足用户进行漫游巡查的用户交互功能,将视角固定不变的二维场景变为三维场景,充分提高了用户的操作体验。

系统设计的三维场景漫游包含了平移变换与缩放变换两种功能。平移变换值通过算法实现三维场景的前进、后退和左右移动。对于整个三维场景的移动,我们通过计算确定好三个坐标轴的平移分量,使用Object3D.setPosition函数实现整个场景中所有店的移动,以完成一次平移变换。平移前的原始场景如图12所示,平移变换后的场景如图13所示。

图12 原始场景

图13 平移后场景

为满足用户在三维场景上查看局部细节的需求,需要将模型放大一倍观察,这时候就需要用到缩放变换。在明确需要缩放的倍数后,通过设置物体的Scale属性,将其以三维场景的中心点进行场景坐标的缩放以实现一次缩放变换。缩放后的场景如图14所示。

图14 缩放后的场景

3 结论

(1)为提高隧道管养效率,充分利用大量病害数据,笔者引入Three.js引擎模块的可视化技术,开发了隧道三维可视化系统。基于自主研发的隧道智能数据采集系统,实现了隧道数据采集与处理、衬砌病害高效、准确识别,有效解决了传统人工检测的效率低、准确率低的问题。

(2)基于空间坐标转换原理,将二维隧道病害展示图转换为三维空间纹理附着在隧道模型表面,实现了对隧道模型进一步的轻量化处理,有效解决了传统定检报告检测数据体量大、结果不直观的问题。

(3)实现了模块全部基于云计算,所有软硬件都基于云平台,公路隧道养护管理平台中建立的三维元宇宙隧道与病害展示模块。

(4)基于实际观测需求开发了各视角切换与放缩等功能,形成了方便用户查看的用户交互功能模块。

(5)目前,研究成果已成功应用于湖北交投高速公路智慧养护管理平台,并成功对接“国家公路网技术状况监测评价”“公路养护年报系统”“湖北桥隧数字化管养平台”“湖北省交通运输厅高速公路管理局综合办公平台”等相关信息平台。下一步将努力融入基于衬砌病害特征的结构安全性评估,以达到智慧运维的更高水平。