图扑 Web 可视化引擎在仿真分析领域的应用

前言

在数字孪生和仿真研究过程中，会产生大量和三维空间相关的数值信息，比如设备外观的扫描数据、地形扫描数据、生产设备温度场/压力场、流体的速度场、流体扩散，以及各种仿真数据：速度，压力，应力，温度等。

这些数据的特点是数量大，使用二维图表呈现不直观，无法直观呈现数据的三维分布和数据随时间的变化。

图扑软件是基于 WebGL 的三维可视化引擎，在 WebGL 基础上封装了基本的三维模型创建、呈现的 API。同时还封装了丰富的数学运算库，涵盖多维变换，几何计算等。

图扑 SDK 开放灵活的架构也使得用户开发扩展功能非常方便，比如热力图（体）插件，流场粒子展示插件，体绘制插件等。强大灵活的 3D 引擎可以让用户轻松实现三维模型的呈现编辑功能。用户无需关心繁琐复杂的 WebGL 操作，可以将精力放到应用的业务层，节省开发费用，加快开发进程，通过三维动态直观展示方式，挖掘隐藏的信息内容，提升应用价值。

本文针对以下 6 种呈现方式讨论使用图扑 SDK 实现的方法：

模型表面贴图
模型三维网格
粒子流贴图
粒子流体
体绘制
点云

以下介绍的方法中，为了提高前端的性能和用户体验，涉及到大量数据处理的操作都可以放到服务器上实现。前端只负责少量运算和效果展示。

下图是实现整个系统的架构：

模型表面贴图

对于需要展示表面数据的应用，比如设备表面的温度，压力等，输入数据是模型表面的点坐标和数据值的集合，比如 x, y, z, value。实现的方法：根据模型上每一个点 value 值计算出此点贴图的 UV 值。

实现原理图如下：

有以下两种情况需要用插值算法重新生成数据：

模型表面贴图
模型三维网格

下图是实现的原理。主要增加了使用反距离加权法重新生成数据。由于这一步计算量大，需要放到服务器上，作为数据预处理功能实现。

模型三维网格

三维网格展示在一个二维面上的属性在上一节 “模型表面贴图” 已介绍过。这里主要介绍三维网格展示三维信息，比如三维速度场，三维温度场等。

由于是一个三维的体，无法用贴图的方式给出网格的颜色信息。此时需要用插值算法计算出规则空间网格的场信息。比如在 x，y， z 整数值的点插值采样。将采样获得的空间场信息以材质的方式传给图扑 SDK。SDK 在渲染每一个点的时候，根据点周围的空间 4 个点做插值拟合获得属性值，并根据属性值范围计算出渲染的颜色。具体流程参照下图：

上方为基于钻孔数据的三维地质模型可视化（点击文字跳转查看智慧煤矿往期回顾），智慧矿山是一个汇聚了多学科、多主题、多维空间信息的复杂系统，是在矿山地表和地下开采矿产资源的工程活动中所涉及的各种静、动态信息的全部数字化管理，智能分析，可视化展示，从而达到降本增效，实现企业利益的最大化。

粒子流贴图

对于需要在一个面上展示的流体场，比如风场，水流场，压力场等，需要以动态的方式呈现，可以使用图扑粒子插件实现。

系统基本原理如下图：二维流体场信息作为贴图资源传给图扑 SDK。SDK 里使用贴图保存粒子的位置信息，利用流体场和粒子位置，计算出下一帧的粒子位置。然后融合上一帧的输出和当前输出，实现粒子的移动尾迹效果。

图扑粒子插件可以实现以下参数可调节：

粒子的大小
粒子的形状
粒子的流速
粒子数量
显示的阈值
仿真精度等

粒子流体

对于需要展示三维空间的矢量场，比如风场，速度场等，需要以动态的方式呈现。可以使用图扑粒子插件实现。插件的主要输入数据是三维矢量场。它是在服务器端通过对矢量场按照固定间隔采样拟合获得。

图扑三维粒子插件可以实现和二维粒子流相似的参数调节：

粒子的大小
粒子的形状
粒子的流速
粒子数量
显示的阈值等

体绘制

体绘制是一种将三维空间中的体数据，渲染到二维图形上的技术。体绘制可以在二维平面上展示出三维空间中的数据，可直观窥探物体内部细节，因此可应用于各种电、热、磁场的仿真，水污染扩散仿真、海洋遥感三维可视化、医学影像（CT）展示等。

电力行业中，变压器是一种重要的设备，变压器绕组的温度分布，特别是热点温度，是制约变压器运行安全和使用寿命的重要因素。本案例中通过体绘制的方式展示变压器绕组温度场。首先通过有限元仿真，对变压器内部的热传导过程模拟，最终得到变压器内部的温度分布规律。将有限元仿真出的温度数据，通过插值的方法获得整个绕组的温度切片。这里有多种插值算法，如反距离加权法、克里金法、自然邻域法、样条函数法等。这里采用反距离加权算法。

种体绘制的算法有多种：光线投射算法、抛雪球算法、错切变形算法。三种算法相比较，光线投射算法计算量相对较大，但是绘制的图像质量较高，有利于保留图像细节，这里我们选用光线投射算法。为了保证渲染速度，我们要对光线投射算法进行了优化，减少不必要计算量。通过优化，可以做到在有非集成显卡的普通 PC 机上，轻松实时渲染数百万以上点的有限元分析结果。

此外，可以对渲染结果进行裁切，展示绕组任何切面的温度分布情况。

以下案例是体绘制在 CT 可视化领域的应用：

点云

图扑引擎内置对点云的支持。支持的点数量可达千万。点云里每个点的贴图/形状可配置。

点云可以用于展示模型本身或者模型表面的属性信息，比如压力和温度等。

对于激光点云数据，通常一个点的信息包含三维坐标和颜色值，比如 x,y,z,r,g,b 六个字段。将三维坐标和颜色信息传给图扑点云可以直接展示模型。对于大场景或高精度的点云模型，由于点数据量巨大，无法全部显示。可以采用空间划分和 LOD 技术，生成不同分辨率的点云模型，按需加载。需要展示局部高精度模型时，只加载局部高精度模型信息。

对于需要展示变化过程需求，图扑引擎支持定制插件（shader），通过将多个时间点的颜色信息传给 shader，shader 根据时间进度信息插值计算出某一时间t的颜色，进行渲染。JavaScript 主程序循环更新运行时间t。这样的优点是主要的计算量放到显卡，仿真进度（时间）可以灵活调节，整个展示过程流畅不卡顿。流程参照下图：