基于数字孪生技术的水声信息处理平台可视化

王 昊

（中国船舶集团第七一五研究所，浙江 杭州 310000）

关键字：数字孪生；Web3D；Threejs；力导向图

0 引言

水声应用是利用水下声波经信号处理对水下目标进行探测、定位及通信的算法应用。水声信息处理平台是水声应用运行的基础平台，主要为水声应用算法提供计算、存储、网络等资源，以保障其正常运行。因此，平台的健康状态尤为重要。目前，传统水声信息平台监测系统的监测对象多为硬件平台，当算法应用发生故障，往往难以查找故障位置。此外，硬件监测平台多以二维图片展示为主，监测数据不直观，且界面形式不友好。随着数字孪生技术的发展，可实现更直观的方式，对水声信息处理平台进行可视化监控。本文结合水声信息处理平台可视化需求，融合Web3D 及D3js 技术，实现平台的硬件及软件的孪生状态监控，为水声应用的监测、预警及故障排除等提供有力的支撑。

1 数字孪生及监测系统可视化

数字孪生（Digital twin）一词最早出现在美国空军实验室于2009 年提出的“机身数字孪生体”概念中[1]。数字孪生是以真实存在或即将设计实现的物理实体为原型，通过感知、仿真、数据驱动来构建一个虚拟的数字孪生体，来达到对物理实体的实时监测、动态控制乃至故障预测与健康管理的一种新兴技术[2]。

1.1 硬件孪生及Web3D 技术

Web3D 技术是硬件设备在Web 端进行孪生可视化的技术手段。OpenGL 是一个定义了跨编程语言、跨平台（Windows、Linux、Mac OS）计算机图形绘制的编程接口的标准，在实际中得到了广泛的应用[3]。

前端人员开发主要使用的是JavaScript 语言。WebGL 通过增加OpenGL ES 的JavaScript 绑定，通过JS 语句操作本地OpenGL 接口实现对页面图形的渲染。WebGL 原生API 是一种非常低级的接口，使用之前还需要掌握像坐标变换、图形学等相关技术，无疑增加了开发者的难度。Threejs 技术把常用的WebGL 方法封装起来，简化了开发者学习和使用的成本。本文选用Threejs 技术实现Web 端的3D 渲染。

1.2 应用孪生及D3js 技术

水声应用通常融合若干信息处理算法程序，综合完成对目标的识别。对算法程序在设计、实现、测试过程中可能出现的问题，开发者往往需要从程序起始位置，按流程单步调试查找问题。传统的开发方法面对不同水声场景任务需求时，往往需要重新设计程序，代码的复用率较低，同时也降低了开发效率。本文将常用的水声应用根据各自独立性进行组件化，结合D3js 技术中的力导向图技术，绘制不同水声应用组件化拓扑关系，实现应用层面的孪生监控。

水声应用在组件化的同时，使得组件间拓扑关系复杂度提升。D3js 中的力导向图技术模拟自然界中电子间相互作用原理，计算每个节点合力从而计算移动节点位置，使复杂拓扑关系的应用孪生成为可能[4]。

2 系统软件设计

水声信息处理平台的硬件和软件孪生软件均采用浏览器/服务器（Browser/Server，B/S）架构。前端编程语言采用JavaScript，框架主要采用Vue框架，结合ElementUI 插件完成前端布局，信息处理设备的3D 渲染通过Threejs 完成，应用组件化拓扑展示通过D3js 的力导向图完成。后端编程采用Java 语言完成，框架采用Spring 框架。

2.1 硬件孪生软件设计

信息处理设备3D 模型的可视化是硬件孪生软件设计的重要设计过程。其可视化主要分为以下4个步骤。

2.1.1 信息处理设备三维模型构建

三维模型的构建主要有人工建模和自动建模两种方式。本文采用的是人工建模方式。在设备设计前期，已通过Solidworks 软件完成基本尺寸、碰撞干涉及应力估计等设计，可生成stl 文件供后续Threejs 加载模型。

2.1.2 Threejs 加载三维模型

Threejs 提供了可以加载复杂三维模型的Loader 插件，支持常见的3D 建模工具生成文件的模型加载。对比Threejs 支持的3 种常见三维模型文件（stl、obj 及gltf），其中stl 和obj 的文件大小超过300 MB 时，Loader 加载器解析加载的时间会加长，而且每次模型渲染时会导致前端界面出现卡顿的情况。因此本文选用的文件格式是gltf。信息处理设备三维模型构建中建模得到的是stl 文件，需借助blander 软件转换成gltf 文件[5]。

2.1.3 三维场景渲染

三维场景渲染主要模拟真实环境，将前两步中创建的设备3D 模型在屏幕渲染绘制。流程如图1所示。

图1 三维场景渲染流程

构建三维场景，场景决定了观察者可以看到哪些实体。设定渲染器类型，本文采用的是WebGLRenderer 渲染器。创建渲染器后，还需要设置渲染器的像素比、阴影模式以及渲染器的大小等相关因素。设置相机，相机决定了观察者的观察角度及可看到的物体范围。Threejs 技术提供了正交相机和透视相机两类相机。正交相机视角下，设备模型不会因为观察者远近距离不同发生大小变化。为了更接近实际情况，本文选用透视相机设定观察者角度，并添加到场景中。对于光照设定，为模拟真实环境，本文设置了环境光AmbientLight，并在设备上下左右前后6 个方位各设置了1 个点光源PointLight。创建GLTFLoader 加载器，加载创建好的设备3D 模型文件，获取模型后，遍历模型的各个零件，通过MeshLambertMaterial设置模型材质信息，设置模型初始位置wrapper.position.set（0，0，0）；程序执行renderer.render（scene，camera）完成一次场景渲染。

2.1.4 人机交互

完成以上3 步，可以看作是一帧数据渲染，此时渲染出来的场景就等同于二维静态图形，不具备动画功能，无法改变观察者角度实现对设备的360°观察。Threejs 封装了轨道控制器对象OrbitControls，将相机对象Camera 作为参数，可以监听鼠标的变化，改变相机对象的属性，达到改变观察角度的目的。

2.2 应用孪生软件设计

应用组件化后的组件拓扑关系尤为重要。本文采用D3js 中的力导向图技术。应用孪生可视化的开发过程大致可以分为以下4 个步骤，如图2所示。

图2 应用孪生可视化开发流程

首先是网状数据结构定义，力导向图中最重要的元素就是节点和节点之间的关系。定义对象dataset={nodes：[]，edges：[]}，其中有两个数组元素，nodes 代表应用组件化后所有组件信息，edges 代表组件间的连接关系。两个数组元素的内容都可以额外的对象用来描述组件或关系的详细信息。定义力的模拟环节需要设定多体力d3.forceManyBody、连接力d3.forceLjink 以及中心力d3.forceCenter，算法程序会根据合力，推挤比自己弱的节点和连线，最终达到平衡状态。定义可见元素，包含节点、节点说明及节点间的有向线段。力模拟会随时间变化需要设计时间步tick，力的模拟会随时间变化，D3js 根据力的变化随时调整节点和连线位置。时间步tick 的设定，要保证节点和连线尽可能均匀地分布在屏幕中，节点最终的位置不一定是观察者想要的拓扑结构，本文自定义拖拽函数dragStarted、dragging 及dragEnded 用来监听节点位置变化，最终实现用户自定义位置的应用组件化拓扑结构状态监控。

3 监测效果展示

3.1 硬件孪生状态监控效果展示

信息处理装备3D 模型建立完成后，加载到Threejs 场景中，即可显示信息处理装备孪生状态。如图3 所示，图片中部展示的是水声信息处理设备。鼠标左键可控制模型旋转，右键可控制模型拖曳，滚轮可进行缩放；左上角区域展示的是硬件孪生状态监控的设备列表，点击对应的设备可查看选中设备的运行状况；左侧中部展示的是硬件的真实图片和尺寸等基本信息，左侧下部展示的是当前设备的系统故障日志，右侧展示的是当前设备关键参数的运行状态。

图3 硬件孪生可视化界面

3.2 应用孪生状态监控效果展示

在硬件孪生状态监控软件中，设备列表可选择运行在物理机上的应用，点击要查看的应用状态。如图4 所示。

图4 中部展示的是当前应用的拓扑关系，连线动画代表组件信息传递方向。点击拓扑关系单个组件，可以查看当前组件关键参数运行状态；图片左侧代表的是单个组件的线程运行列表，主要包含线程运行时间和运行次数；图片右侧展示的是当前组件发送、接收信息状态监控。

图4 应用孪生可视化界面

4 结语

本文分析了当前信息处理装备可视化发展现状，结合项目需求，实现了水声信息处理平台可视化研究与应用。通过分析当前Web3D 技术发展趋势及当前主流技术优劣，选择Threejs 技术实现设备的硬件孪生可视化，通过D3js 技术的力导向图实现了应用孪生状态监控，综合完成了水声信息处理平台监测系统从硬件层到应用层数字孪生状态监控。此外，该系统还实现了对水声应用故障的监测功能，对今后水声设备领域的数字孪生有一定借鉴意义。