基于WebGL的路面施工三维动态展示技术研究

2023-07-29唐建亚

北方交通 2023年7期

唐建亚

(江苏中路信息科技有限公司南京市 211106)

随着物联网技术的发展,在公路路面工程建设过程中运用北斗高精定位、无线射频RFID等技术开展远程质量管控的案例日益增多[1],但当前主要通过数据列表、图表的方式查看路面施工现场状态,仍然是不够直观。近年来,数字孪生技术迅速发展,将物理空间的实体、虚拟空间的物理模型,通过数据和信息交互在虚拟空间完成映射,让用户可以通过互联网身临其境地感受实体装备的运行状态。研究基于WebGL(Web Graphics Library)的路面施工三维动态展示平台开发技术,包括数据源采集、数据交互设计等问题,设计了三维一体呈现的系统架构,实现了常规浏览器直接与路面施工模型进行交互。

1 WebGL技术

WebGL是一种支持开发人员在浏览器中进行三维绘图的开放协议,用以在浏览器中绘制、显示三维计算机图形,可以在多种平台上运行,并与之交互的技术[2]。该技术在Web交互式三维动画有两个突出优点:(1)通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;(2)利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。

目前WebGL技术框架典型有BabylonJS、ThreeJS、LayaboxJS、SceneJS,其中ThreeJS技术支持JSON(JavaScript Object Notation)、OBJ、Collada、STL等三维格式,并对原生WebGL的API进行了封装,将复杂的接口简单化。基于面向对象思维,将数据结构对象化,定义了几种基本对象,如场景、渲染器、相机、物体、光源等,开发人员可方便地组织三维场景设计。

2 平台系统架构设计

根据调研,工程管理人员关于路面施工三维动态展示需求点主要包括:(1)立体展示路面施工技术场景,包括施工桩号位置、工程机械投入数量、路面碾压组合工艺等;(2)查看施工过程工艺数据,如路面材料拌和产量、摊铺碾压温度、碾压遍数等;(3)支持用户通过网页浏览器或手机端查看路面施工三维数字模型,提高真实感的体验度;(4)可以实时或是回放施工过程,基于三维数字环境实现施工质量溯源。

根据工程管理人员的实际需求及对于WebGL技术的调研结果,研究设计了路面施工三维动态展示平台的系统架构,包括数据层、服务层、框架层和应用层[3],见图1。

图1 路面施工质量三维数字监控平台系统架构

(1)数据层主要包括路面施工设备的三维模型、道路施工场景、物联采集数据及模型中不同状态不同颜色对应的施工工艺,其中物联采集数据主要是路面施工现场采集的工艺数据,采集设备需要综合应用到高精度定位RTK-GNSS、无线射频RFID、红外温度传感及4G网络传输模块等。

(2)服务层、框架层、应用层主要是软件系统平台中承担着数据分发、解算、渲染不同作用,要实现现场采集数据与机械BIM模型的集成,动态分析与模拟、施工工艺数据的呈现,包括模型知识库、物联数据库、WebGL服务器、应用服务器以及电脑浏览器端等模块。

3 关键技术研究

平台在开发过程中主要是解决基于物联网的路面实时采集技术、基于WebGL的模型渲染技术、物联数据驱动的路面施工模拟等难点。

3.1 基于物联网的路面施工数据采集技术

为掌握沥青路面的施工中的工艺数据,主要结合典型的物联网采集技术,建立对应工艺的采集方法、数据采集范围及频率[1]。

(1)在沥青混合料拌合站的控制电脑安装数据采集程序及4G网络传输DTU模块,实现沥青混合料生产中每盘沥青混合料的拌和温度、不同规格集料的称量、沥青材料的称量及生产数据的采集。

(2)在沥青混合料运输车辆上安装定位测量、温度测量及网络传输模块,实现沥青混合料的出厂温度、出厂时间、运输轨迹、到场时间、到场温度的数据采集。并通过前期测量设备ID与运输车牌号的绑定,建立混合料运输车牌号与材料的映射关系。

(3)在沥青混合料摊铺设备上安装RTK-GNSS定位、红外温度传感及网络传输模块,实现沥青混合料的摊铺位置、温度、时间的数据采集,并通过前期道路测量数据,实现位置与道路左右幅、工程桩号的映射。

(4)在沥青路面压实设备上安装RTK-GNSS定位、红外温度传感及网络传输模块,实现沥青混合料的压实位置、温度、时间的数据采集,并通过前期道路测量建模,获取压实遍数信息。

(5)在沥青混合料拌合站、摊铺施工现场安装视频采集设备,获取实时作业视频。

3.2 基于WebGL的模型渲染技术

路面施工的三维模型在Web浏览器上的渲染分为图2所示的几个步骤:

图2 模型渲染流程图

(1)路面施工所需的拌和机、摊铺机、压实机等设备模型应用BIM建模软件进行建立,本项目应用Autodesk Revit软件进行建模,并对模型的RVT文件进行格式转换,转换为占用空间小的JSON格式,后期使用JavaScript进行解析,保证较快的响应速度。

(2)路面施工场景是所有物体的容器,将需要显示的物体加入场景中,项目应用WebGL Renderer渲染器开启地图阴影;设置三维空间中物体投影到二维屏幕空间的相机,不同相机参数呈现出多个角度的效果,项目系统的投影方式应用透视相机(Three Perspective Camera);设置光照效果,在场景内添加直射光形成立体阴影效果。

(3)三维模型在Web浏览器上渲染,是通过向服务器请示模型对应JSON文件,利用ThreeJS提供的Three.JSON Loader类和load函数来加载JSON文件,以获得模型的位置和材质信息,利用ThreeJS提供的Three.Mesh Face Material类将单风格多材质合成一个材质,并读取模型的材质和贴图[2-4]。

3.3 物联数据驱动的路面施工模拟技术

三维动态技术平台要模拟出路面施工实际场景,保证数据驱动模型变化的功能实现,在建模阶段赋予每个机械模型独立的识别编码(设备SN号),施工现场安装的物联采集装置设置独立的识别编码(终端SN号),终端SN号需要与设备SN号、工程项目建立对应关系表,见图3,支撑物联数据与模型的交互。

图3 物联设备与机械模型对应表

在路面施工现场的摊铺、压实机械上安装RTK-GNSS物联采集装置获取到坐标点数据,计算在栅格图形化的道路模型内绘制出压路机的轨迹点阵,并驱动机械设备的三维模型在路面施工场景中变换[5]。在实时施工显示模式下,网页向服务器请求路面施工场景内所有机械设备的位置信息,在施工场景内模拟于路面施工现场状态[6]。由于沥青路面摊铺压实施工中,设备均处于作业状态,项目在页面刷新率设置为1Hz,当同一场景中作业机械设备达到10台时,仍然能保持着较为流畅的速度,没有加载迟滞现象。

4 平台功能

在完成上述关键技术研究的基础之上,采用Java语言开发后台服务端,采用JavaScript编写前端网页,采用分布式数据库进行数据存储,完成基于WebGL技术的路面施工三维动态展示平台的开发,主要实现以下功能。

4.1 路面施工BIM模型查看

用户无需安装任何插件,可在常规的浏览器上不同角度查看带纹理贴图和光照效果的三维模型,包括路面施工的沥青加工厂、拌和后场、施工前场等,体验实际施工场景。平台支持漫游、视角切换、缩放等浏览方式,更直观了解路面施工现场情况,见图4。

图4 不同视角查看路面施工模型

4.2 实时采集数据查看

在路面施工三维动态展示平台上,通过点击选择机械模型可以查看该机械设备对应的当前生产数据,从而实现数据的可视化,方便综合分析当前的路面施工质量。如果施工场景内布置视频监控设备,可在页面查看实时画面,虚实结合了解路面施工现场状态,见图5、图6。

图6 场景视频监控画面交互

4.3 路面施工工艺模拟

在路面施工三维动态展示平台上,根据机械设备的物联采集设备实时反馈的数据及位置信息,在平台上渲染出路面施工现场的机械数量,如摊铺单机施工,或双机联铺的不同作业状态。同时还可以根据机械设备的位置信息,真实模拟于路面碾压组合工艺,如初压用钢轮压路机还是胶轮压路机、复压投入几台设备、不同阶段的碾压段落长度控制,以及压实桩号左右幅信息,甚至是现场等候卸料的运输车数量。基于物联采集数据驱动施工场景内的机械模型,可以达到身临其境的真实效果,见图7。

图7 路面施工桩号位置、机械数量等工艺信息

4.4 路面施工工艺数据分析

路面施工的均匀性是工程质量管理的重要环节,三维动态展示平台根据栅格图形化的道路模型内绘制出压路机的轨迹点阵,通过两边对称的原则,计算绘制出压路机的压实遍数、碾压轨迹、碾压工作范围与面积,并在栅格图形化的道路模型中绘制出带有颜色属性与面积属性的新碾压轨迹。用户可以对不同碾压遍数自定义颜色,如2遍以内为绿色、3～4遍为黄色、5～6遍为红色,等等。在三维施工场景中即可快速查阅出路面压实施工质量的均匀性,见图8,以及不同桩号位置的碾压遍数数值,从而可以对路面施工工艺数据进行分析。