建模技术(基于WebGL的桥梁三维快速建模及信息可视化技术方案)

Posted 2023-05-25

篇首语：知识就像内裤，看不见但很重要。本文由小常识网(cha138.com)小编为大家整理，主要介绍了建模技术(基于WebGL的桥梁三维快速建模及信息可视化技术方案)相关的知识，希望对你有一定的参考价值。

建模技术(基于WebGL的桥梁三维快速建模及信息可视化技术方案)

王玺翔车勇邬刚柔赵锋力黄亦雅张阳梁鹏

长安大学公路学院重庆铁发双合高速公路有限公司

摘要：针对中小跨径桥梁手动建模繁琐且难以将信息与模型关联的问题，提出了一套基于WebGL的桥梁三维快速建模和信息可视化解决方案。针对大量标准化的中小跨径桥梁，将桥梁构件参数化，基于《公路工程设计标准化—桥涵参考图》建立了中小跨径桥梁基本构件库，利用桥梁构件模型拼接算法生成桥梁三维模型，采用构件编码关联三维构件与桥梁信息，实现信息与模型的三维可视化。最后，经实例应用，验证了该技术方案的优越性。本研究为桥梁建模提供了新思路，提高了中小跨径桥梁建模自动化程度。

关键词：桥梁工程;WebGL;三维快速建模;构件编码;信息可视化;技术方案;

基金：国家重点研发计划重点专项项目,项目编号2019YFB1600700;中铁建重庆投资集团有限公司科研计划课题;

1 研究背景

截至2020年末，我国公路桥梁数量已达91.28万座，其中，中小桥梁近78.64万座[1],占桥梁总数的88.3%。如何管理好数量众多且在持续增加的公路桥梁，是公路管理部门面临的严峻问题。世界各国针对各自国情相继开发出了多种桥梁管理系统，例如美国的BrM(前身为Pointis)、中国的CBMS等。现有的桥梁管理系统具备基本信息管理、检测数据管理、技术状况评定、退化预测等功能，能够便捷地存储和共享信息，对桥梁的技术状况进行评定[3]。借助互联网技术，桥梁管理系统由C/S架构转向了B/S架构，管理人员可以通过浏览器方便快捷地登录桥梁管理系统。但是，现有的桥梁管理系统(CBMS)大都利用表格、图片和文字展示信息，信息的关联性和可视化程度较低，限制了管理人员对信息的高效获取和应用。

为提高桥梁管理系统的可视化程度，WebGL技术被应用到桥梁管理系统中。金栋等提出了基于Web的桥梁可视化管理系统，能够无需插件在浏览器中直接浏览桥梁结构的三维模型，实现了结构三维可视化[4];王珩玮等开发了基于Web的BIM三维模型浏览和信息管理系统，实现了BIM模型的展示和对BIM信息简单管理[5];Xuewen R等基于BIMFACE平台二次开发，实现了石川河大桥BIM模型轻量化展示与交互功能[6]。

综上所述，目前基于Web的桥梁结构三维展示技术已经基本成熟，能够实现简单的交互功能，但是仍有以下的局限性。

(1)三维模型必须从外部生成之后导入到管理系统中，这意味着为提高桥梁管理系统的可视化程度，必须先用建模软件建立桥梁三维模型。对于数量巨大的中小桥梁而言，建模工作量将是巨大的。

(2)三维模型拓展性较差，难以将桥梁信息(图片、文本等)与三维模型中的构件进行关联。

(3)桥梁信息可视化程度较低，仅能以文字、图表展示桥梁结构信息，没有完全发挥三维模型在信息可视化方面的作用。

本研究首先基于WebGL的桥梁参数化建模技术，建立公路中小跨径桥梁通用模型库，提出一种针对简单规则桥梁的快速建模方法；然后，根据《建筑信息模型分类和编码标准》(GB/T 51269—2017)[7]提出桥梁构件编码规则，利用构件编码实现三维构件与非结构化信息的关联；最后，利用三维模型作为载体，将桥梁评定结果以云图的方式进行展示。

2 基于WebGL的桥梁建模关键技术

WebGL是一个JavaScript API,主流的浏览器和绝大部分的手机浏览器都支持WebGL。借助WebGL使得运行在浏览器中的JavaScript程序可以利用GPU加速图形处理和计算；同时，它无需借助任何插件就能够在浏览器中渲染交互式的2D或3D图形[8]。但是，WebGL作为底层的API,直接利用它进行3D开发将需要付出极大的努力。因此，利用封装了WebGL绘图命令的JavaScript库进行开发是更快、更好的选择。Three.js是优秀的JavaScript 3D库之一，它封装了许多不同类型的对象和一些使用方便的工具，具有强大的建模和交互能力[9]。本节介绍利用three.js进行桥梁建模和交互的关键技术。

2.1桥梁建模关键技术

Three.js采用面向对象的方式建立三维程序，场景(scene)、相机(camera)和渲染器(renderer)是3个基本对象，如图1所示。首先，场景提供一个三维空间，结合几何和材质能够形成模型网格，将模型网格添加入场景就形成了模型空间。然后，利用相机观察模型空间，在观察范围内的物体能够被渲染，而范围之外的物体则不会被渲染。最后，利用渲染器在Web浏览器中将相机观察范围的物体渲染出来。

在桥梁建模方面，three.js内置了创建二维几何体、三维几何体以及高级几何体的方法，可以通过参数便捷地建立桥梁构件。一些桥梁建模中常用的方法见表1。

图1 Three.js基本对象下载原图

表1 Three.js几何体方法导出到EXCEL

方法	类别	桥梁建模用途
ShapeGeometry	二维几何体	建立自定义二维图形，如空心板梁截面等
CubeGeometry	三维几何体	建立长方体，如垫石等
CylinderGeometry	三维几何体	建立圆柱体，如墩柱、桩基等
LatheGeometry	高级几何体	对曲线进行旋转放样，如锥坡等
ExtrudeGeometry	高级几何体	将二维图形拉伸，如主梁等

以桥梁构件中的桥墩为例来介绍three.js的创建桥梁构件模型的方法。《广东省高速公路工程设计标准化桥涵通用图》[10]中，装配式预应力混凝土简支T梁下部结构中桩柱式桥墩的图纸如图2所示。

图2 桥墩示意下载原图

其三维模型建模过程如下。

(1)将桩柱式划分为桩基、系梁、墩身、盖梁、防震挡块和支座垫石等部分。

(2)以盖梁顶面中心位置为坐标原点，利用ShapeGeometry绘制盖梁截面，然后利用ExtrudeGeometry生成盖梁几何体，赋予其材质生成网格并移动至相应位置。

(3)利用CylinderGeometry分别建立桩基和墩身模型，赋予其材质生成网格并移动至相应位置。

(4)利用CubeGeometry分别建立系梁、防震挡块和支座垫石，赋予其材质生成网格并移动至相应位置。

2.2三维交互关键技术

桥梁三维模型能够使用户直观地看到桥梁的外观，但是要将三维模型用于实际的桥梁管理中，还需要使其具备完善的交互功能，包括移动、缩放、旋转和选择等功能。通过改变相机的位置和方向可以实现移动、缩放和旋转，利用Three.Raycaster(射线)类可以实现选择构件的功能。

模型的三维交互是由鼠标事件和动画循环实现的。JavaScript的鼠标事件可以监听用户对鼠标的操作以获得鼠标焦点的位移和滚轮的滑动幅度，通过转换得到移动的距离、选择的角度和缩放的尺寸。动画循环可以利用requestAnimationFrame实现，它能够持续地对模型场景进行渲染，将交互过程平滑地展现出来。为了简化开发流程，three.js 提供了一些相机控件，用于控制场景中的相机，见表2。本文采用trackballcontrols控件，操作方法为：(1)按住鼠标左键，然后拖动进行旋转；(2)转动滚轮进行缩放；(3)按住鼠标右键，然后拖动进行移动。

表2 Three.js 部分相机控件导出到EXCEL

控件名称	介绍
Trackball Controls	轨迹球控件，用户可以利用鼠标进行缩放、平移和旋转
FirstPerson Controls	第一人称控件，以第一人称用键盘移动，用鼠标转动
FlyControls	飞行控件，模拟飞行器的视角，用鼠标和键盘控制
OrbitControls	轨道控件，模拟轨道中的卫星，用鼠标和键盘控制

选择也是非常重要的交互操作。通过选择操作，管理人员可以获取桥梁模型中的构件对象，结合数据查询方法，可以快速了解构件的信息。Three.js提供了Three.Raycaster(射线)方法，它将生成一条从显示的起点到终点的射线，能够获取与射线相交物体的距离、相交点和相交对象等参数。然后，通过改变相交对象的材质颜色，可以在场景中突出选择的对象。

3 基于WebGL的桥梁参数化快速建模

在数量众多的公路桥梁中，中小跨径桥梁占据了绝大部分，上部结构形式以空心板梁、T梁和箱梁为主。为了提高中小跨径桥梁的设计和施工质量，交通运输部专家委员会组织编制了《公路桥梁结构上部构造系列通用设计图》[11]。同时，随着设计院设计水平的提高，甚至出现了“一院一路一通用图”的情况[12]。因此，本文主要针对空心板梁、T梁、小箱梁、现浇箱梁以及柱式墩、桥台等主要桥梁部件进行结构参数化。然后，依据现行公路桥梁设计规范及公路桥梁通用设计图，提取多种构件的基本尺寸参数形成组件式桥梁构件库。最后，基于WebGL技术实现仅需输入少量参数就能在浏览器中建立中小跨径桥梁的三维模型。

3.1桥梁构件参数化与构件库

桥梁整体由多个不同构件按照空间位置拓扑关系拼装而成。首先，根据几何形状将各个构件划分成基本形状，按照空间位置和拓扑关系将基本形状拉伸拼接成组件。然后，在利用各组件之间的空间位置和拓扑关系拼装成全桥。

尽管上部结构的截面形式不同，但是其参数化过程是相似的。下面以小箱梁为例来介绍主梁的参数化过程。

(1)小箱梁结构参数可以分为截面参数和拉伸参数，如图3所示。截面参数有：翼缘高度HO1、外梗腋高度HO2、顶板高度HI1、内梗腋高度H2、腹板和底板高度HI5、翼缘宽度BO1、翼缘水平悬臂宽度BO1-1、腹板水平宽度BO2、底板宽度BO3。拉伸参数有：梁长L。

(2)以O点作为小箱梁的坐标中心，利用截面参数形成小箱梁的截面。

(3)根据梁长L将小箱梁的截面进行拉伸，形成小箱梁三维模型。

本文对“桥涵通用图”[10]中的桥梁参数化，形成桥梁构件库，以构件类型、路基宽度、桥梁跨径和是否连续4个条件作为查询条件。桥梁构件库的数据字典见表3。

图3 小箱梁截面参数下载原图

表3 桥梁构件库数据字典(部分) 导出到EXCEL

构件类型	路基宽度/m	跨径/m	斜度/(°)
T梁	24.5	20	0
空心板梁	26	25	15
小箱梁	28	30	30
现浇箱梁	32	35
桩柱式桥墩	33.5	40
桩柱式桥台	34.5

小箱梁数据库表结构和示例数据见表4。管理单位可根据实际管辖桥梁的情况自行新增桥梁构件数据，完善自己单位的桥梁构件库，如图4所示。

表4 小箱梁数据表结构和示例数据导出到EXCEL

字段名	SectionID	Load	BridgeSpan	StructureType	SubgradeType	SubgradeWidth
字段说明	截面编号	荷载等级	桥梁跨径	结构类型	路基类型	路基宽度
数据示例	A01	—	20 m	—	—	24.5 m
字段名	DeckWidth	Position	Skewness	GirderWidth	GirderNumber
字段说明	桥面宽度	位置	斜度	单梁宽度	主梁片数
数据示例	11.75 m	—	0	2 400 mm	4

图4 桥梁构件库示意下载原图

3.2基于WebGL的桥梁快速建模

在桥梁构件库的基础上，本研究开发了基于WebGL的桥梁快速建模模块。首先，用户根据现场数据选择桥梁快速建模的参数。快速建模参数选择界面如图5所示。参数类型分为3类：选择型参数、输入型参数和自动获取型参数。选择型参数是在桥梁构件库数据字典中定义的参数，通过下拉菜单选择定义好的选项，例如构件类型、斜度、路基宽度等；输入型参数是需要管理人员根据图纸录入的参数，例如模型名称、桥墩高度等；自动获取型参数无需用户录入和选择，是系统根据其他参数从数据库读取或通过公式计算得到，例如主梁片数等。然后，快速建模模块根据所选参数从数据库查询相应的构件几何参数。桥梁三维快速建模利用2.1节中桥梁建模的关键技术，将构件几何参数转换为构件三维模型。最后，将桥梁构件三维模型根据组装算法拼接成全桥模型。

图5 快速建模参数选择界面示例下载原图

桥梁中心线以主梁顶面端点O点为世界坐标系原点，以主梁顶面两端点连线为世界坐标系的X轴，桥梁各构件的拼接过程描述如下：主梁由桥面右端向左端生成、由小桩号到大桩号拼接；主梁拼接完成后，桥台、桥墩与支座同时拼接，沿小桩号到大桩号生成；全桥两侧为桥台和桥台基础，此处支座为单排；全桥中间部分为桥墩和桥墩基础，此处支座为双排。

桥梁的主梁是由若干片单梁拼接而成的。单梁的顶面的纵向中心线为局部坐标系的X轴，其左侧端点为坐标原点。同时，主梁片数为奇数或者偶数时，其位置关系是有所差异的。本文采用如下算法对小箱梁进行拼接，如图6所示，奇数片主梁和偶数片主梁使用统一的算法，空心板梁和T梁拼接方法与此相同。

图6 主梁快速建模算法下载原图

(1)输入主梁片数M和主梁跨数N,将主梁片数变量m和主梁跨数变量n初始化为1。

(2)判断主梁片数变量m的值，若为m=1,则生成右边梁，变量m自加1;若1<m<M,则生成中间梁，变量m自加1;如此循环，直到m=M,则生成左边梁，完成一跨的主梁建立，进入步骤(3)。

(3)判断主梁跨数变量n的值，若n≤N,则将主梁片数变量重置为1,变量n自加1,循环步骤(2);若n>N,则完成全桥的主梁建模，结束算法。

桥梁的墩台、基础和支座同时建模，沿着布孔线逐一布置。拼接完成后，全桥模型如图7所示。

图7 全桥模型下载原图

4 基于三维模型的桥梁可视化评定

三维模型不仅能够直观地展示桥梁的结构信息，还能采用颜色贴图来直观地展示各构件的技术状况得分。以某单跨小桥为例，该桥共有6片空心板，采用分层综合评定与5类桥梁单项控制指标相结合[13]的方法进行构件评定。主梁病害与技术状况得分见表5。

表5 主梁及技术状况评分导出到EXCEL

构件名称	构件得分	技术状况等级
1-1号主梁	100	1
1-2号主梁	100	1
1-3号主梁	100	1
1-4号主梁	65	3
1-5号主梁	100	1
1-6号主梁	100	1

将构件得分在桥梁三维模型上进行可视化，如图8所示。

图8 技术状况评定结果可视化下载原图

实现桥梁三维模型的Web端可视化之后，可以此三维模型为载体实现病害的三维可视化。病害的展示共有两种方式，运用WebGL的纹理映射技术，对指定构件进行纹理贴图，或采用在构件上直接绘制病害，如图9所示。

图9 在模型上绘制病害示意下载原图

该案例展示了桥梁三维模型在桥梁数据可视化中的应用。利用三维模型，用户可直观地了解自己所管辖桥梁的结构外观。同时，利用可视化手段，将构件技术状况得分、构件病害等以贴图或绘制的方式在三维模型中展示，用户可以快速了解各个构件的技术状况信息。

5 结语

本研究利用WebGL技术对简单桥梁进行快速建模。首先，根据现有桥梁管理系统的需求，研究了桥梁建模和三维交互的关键技术，建立桥梁三维可视化的通用框架。然后，根据简单桥梁的结构形式，将桥梁结构和构件参数化，并基于“桥梁通用图”建立了桥梁构件基本参数库。在此基础上，研究简单桥梁的拼接算法，并以某三跨空心板桥梁为例验证了算法。最后，利用三维模型的颜色贴图来对桥梁的技术状况得分进行可视化，展示了三维模型在桥梁管理系统中的应用。

本文介绍的相关技术和算法具有建模快速便捷、可跨平台浏览等优点，易与现有的桥梁管理系统对接。

参考文献

[1] 交通运输部.2020年交通运输行业发展统计公报[N].中国交通报，2021.

[2] 交通运输部.2019年交通运输行业发展统计公报[N].中国交通报，2020.

[3] 李远军，陈杰.路桥管理系统综述[J].公路，2016,61(10):182-186.

[4] 金栋，李兴田，张丽萍.基于Web的桥梁可视化管理研究[J].兰州交通大学学报，2012,31(4):45-48.

[5] 王珩玮，胡振中，林佳瑞，等.面向Web的BIM三维浏览与信息管理[J].土木建筑工程信息技术，2013,5(3):1-7.

[6] Xuewen R,Zhiju Z,Xiaoming F,et al.Lightweight display of bridge model based on WebGL Technology[J].IOP Conference Series:Earth and Environmental Science,2021,634:12145-12148.

[7] GB/T 51269-2017 建筑信息模型分类和编码标准[S].

[8] Saska A,Tichy D,Moore R,et al.ccNetViz:a WebGL-based JavaScript library for visualization of large networks[J].BIOINFORMATICS,2020,36(16):4527-4529.

[9] Almansoury F,Kpodjedo S,El Boussaidi G.Investigating Web3D topics on StackOverflow:a preliminary study of WebGL and Three.js[M].Soonhung H,2020.

[10] 中交第一公路勘察设计研究院有限公司.广东省高速公路工程设计标准化桥涵通用图[R].2014.

[11] 交通部专家委员会.公路桥梁结构上部构造系列通用设计图[M].北京：人民交通出版社，2005.

[12] 王玉，凤懋润，鲍卫刚.公路桥梁结构标准化技术的发展与应用[J].公路，2009,(11):1-5.

[13] JTG/T H21-2011 公路桥梁技术状况评定标准[S].

声明：我们尊重原创，也注重分享。有部分内容来自互联网，版权归原作者所有，仅供学习参考之用，禁止用于商业用途，如无意中侵犯了哪个媒体、公司、企业或个人等的知识产权，请联系删除，另本头条号推送内容仅代表作者观点，与头条号运营方无关，内容真伪请读者自行鉴别，本头条号不承担任何责任。

建模技术(基于WebGL的桥梁三维快速建模及信息可视化技术方案)

建模技术(基于WebGL的桥梁三维快速建模及信息可视化技术方案)

王玺翔 车勇 邬刚柔 赵锋力 黄亦雅 张阳 梁鹏

长安大学公路学院 重庆铁发双合高速公路有限公司

1 研究背景

2 基于WebGL的桥梁建模关键技术

2.1桥梁建模关键技术

2.2三维交互关键技术

3 基于WebGL的桥梁参数化快速建模

3.1桥梁构件参数化与构件库

3.2基于WebGL的桥梁快速建模

4 基于三维模型的桥梁可视化评定

5 结语

参考文献

王玺翔车勇邬刚柔赵锋力黄亦雅张阳梁鹏

长安大学公路学院重庆铁发双合高速公路有限公司