CN115906576A - 一种基于WebGL的有限元仿真结果在线显示的方法 - Google Patents

Abstract

本发明涉及基于网页端渲染模型的技术领域，具体涉及一种基于WebGL的有限元仿真结果在线显示的方法，本发明方法可以在任何可以打开网页的移动设备打开，不需要在依赖计算机，只需要可以打开网页即可，便可以完成有限元仿真结果的查看，十分轻便；且基于云端的显示，无需安装程序便可以异地同步获取数据，结果的传输和共享十分方便，在工矿复杂的车间可以发挥重要的作用，提高效率；且本发明基于网页显示，资源占用率较小，极大的减轻了计算机等设备的负担。

Description

一种基于WebGL的有限元仿真结果在线显示的方法

技术领域

本发明涉及基于网页端渲染模型的技术领域，具体涉及一种基于WebGL的有限元仿真结果在线显示的方法，可以实现多种有限元网格模型和仿真结果的web端显示。

背景技术

有限元仿真分析是航空、航天和航海领域高端装备设计分析最重要的技术和手段之一。目前主流的有限元软件，如ANSYS、Abaqus等，都是以桌面应用形式为主。桌面应用形式的有限元软件十分依赖电脑的运算能力，当处理复杂模型时，运算量会非常大，分析过程十分依赖用户主机的CPU和GPU性能。这些软件需要根据电脑的操作系统来下载相应的桌面客户端，在智能手机等移动设备端无法安装，并且其安装需要占用的存储容量通常很大。用户在桌面端所生成的项目和文件在本地进行保存，更换设备后便无法查看之前保存的项目。

随着工业化和信息化技术的快速发展，基于云计算的技术可以在云端完成本地用户的仿真计算。同时需要解决用户对于云端仿真计算结果在网页端显示的需求。基于网页的有限元在线显示，与传统的桌面端的显示相比，使用更加灵活和方便，并且可以在移动设备打开，有利于用户对仿真结果随时随地的查看、交流和协同分析。

现有的在线显示方法主要基于WebGL和HTML5技术，只能在线显示普通CAD模型等，无法实现各种有限元仿真结果的在线显示。本发明除在显示CAD模型的基础上，把显示有限元仿真结果所需要的数据添加到模型的网格中，通过有限元计算，实现有限元仿真结果的在线显示。

发明内容

本发明提出一种基于WebGL的有限元仿真结果在线显示的方法，可以显示一阶和二阶的三角形、四边形、四面体、六面体等网格单元及有限元仿真结果，以解决有限元仿真结果的显示对桌面端软件依赖性高、使用不方便的问题。

本发明的技术方案：

一种基于WebGL的有限元仿真结果在线显示的方法，步骤如下：

S1：有限元仿真分析。导入二维或三维模型，通过有限元仿真软件对该模型进行仿真分析，得到二维或三维网格构成的有限元仿真结果。

S2：有限元仿真数据解析与处理。从有限元仿真软件中直接导出的网页端在线显示所需要的有限元仿真结果数据，包括inp格式的网格数据文件和TXT文本格式的应力应变文件。然而有限元模型导出的数据并不能直接使用。有诸多原因，比如同一模型导出的网格数据中有多种网格的数据，需要编写数据解析端口对不同种类的网格进行分别提取和分类，并且有限元软件导出的数据中有很多数据是多余的，只需要提取关键信息即可。

因此需要编写数据解析端口对有限元软件生成的文件数据进行解析和转化，通过正则表达式提取数据文件中的关键数据，将不同类型的网格数据和有限元仿真所需数据分类，并把所提取的数据转化为程序渲染专用的格式，使得有限元数据文件在程序中易于解析，以便有限元数据在程序中的快速读取；

S3：设计网页端有限元仿真结果数据渲染的程序模块。通过步骤S2得到可以渲染专用格式的有限元数据文件之后，想要在网页上显示出有限元模型还需要经过一些有限元渲染和显示程序的支持，主要可分为四个模块，分别是相机模块、有限元模块、鼠标事件模块和网页模块；

相机模块：屏幕上看到的画面都是二维的，通过相机模块进行视图变换以及投影变换，使得二维的屏幕显示一个三维的模型。具体为：采用视图变换矩阵和投影变换矩阵，并在最后的有限元仿真模型显示到屏幕的过程中，将这两种矩阵与计算所得的有限元模型数据本身的位置相乘，得到最后在屏幕中显示的有限元仿真结构的模型。

鼠标事件模块：当有限元模型显示到网页上后，只是一个3D模型，不能在显示页面进行操作，而对canvas元素的加入事件监听函数addEventListener()后可以用来监听canvas上事件，canvas对象支持所有javascript的鼠标事件，包括了鼠标的点击(mouseclick),鼠标的按下(mouse down),鼠标的抬起(mouse up)，鼠标滚轮的滑动(wheel)等。通过添加这些鼠标事件，便可以在网页上实现交互操作，可以按照自己的需求放大、缩小、旋转模型，选择不同的模型等操作。

有限元模块：网页上可以显示各种复杂模型的方法研究有很多，如通过three.js便可以在网页上较为轻松的显示出许多模型。然而单单通过WebGL或three.js只能绘制出CAD模型，并不能显示出有限元仿真结果，如显示模型不同位置的不同颜色来表示应力、应变的大小等。这就需要用到通过WebGL并结合有限元模块来显示。

有限元模块的显示需要网格、应力、应变、颜色等数据。网格也有不同的类型，不同的网格类型数据的显示过程都有所不同，因此对应的处理方法也有所不同。本发明可显示的网格类型有一阶和二阶的三角形网格、四边形网格、四面体网格、六面体网格。不同类型的网格全都是基于基础的三角形网格来完成的，其中二阶单元就是在一阶单元基础上在网格线中点插入点。一个三角形网格绘制比较简单，而一个四边形网格又可以通过两个三角形网格共用一条边拼接而成，一个六面体网格的六个面可以通过六个四边形网格绘制成，同样一个四面体网格可以通过四个三角形网格形成。

绘制网格的方法如下：当输入一个数据文件之后，首先需要判断网格类型，用switch语句来完成，通过case'网格单元类型'判断导入的有限元数据网格类型，返回处理该网格单元类型所对应的方法函数。每次调用该函数将会绘制一次该类型的网格。其中网格单元的绘制过程包括网格单元线和网格单元面的绘制，网格单元线是单纯的绘制网格的轮廓线，默认为黑色，方便区分网格和网格的边界。网格单元面绘制过程需要导入应力应变数据，根据应力应变数据的大小显示对应的颜色。二维网格绘制网格线和面只需要根据给出的坐标数据绘制出二维网格的网格面和网格线。三维网格的绘制过程，实际上就是多个二维网格组合而成，绘制三维网格的每个面都可以看作是一次绘制二维网格的过程，通过for循环，s从第一个面到最后一个面来控制三维网格每个面的绘制，s等于不同的值时绘制不同的面，在每个面的绘制过程中，通过改变xyz坐标来控制每一个二维面所对应的位置，最终通过多个二维网格形成一个三维网格。

在绘制完网格后得到的只是简单的CAD模型，想要完成有限元仿真结果的渲染，需要把数据文件中的应力、应变的数据添加的网格中，此时网格所含的信息不只是坐标信息，还有应力、应变信息，即可以网格中显示颜色来表示应力应变大小。得到网格的所需的数据之后，需要在网页上显示出来。因此需要通过WebGL实现网页端显示，其中需要用的WebGL两个模块，一是顶点着色器模块，主要功能为执行顶点变换、光照和计算等与顶点相关的操作，即可以把模型的位置显示到网页端。二是片元着色器，是处理片元值及相关数据的可编程单元，包括模型的颜色、质地、光照效果和阴影，即可以在模型上显示颜色等表示应力应变大小，在此模块中需要进行有限元计算，根据应力应变的最大最小值，分配不同大小的应力应变所对应的具体颜色。通过WebGL的这两个模块最终实现网页端渲染有限元仿真结果。

提高网页显示效果：通过上述步骤已经基本实现了网页端的有限元仿真结果的在线显示。为了显示效果的进一步提高，在有限元模块的网格数据的计算过程中引入的形函数和标准型的计算。一个网格只有有限个网格节点，实际对象又是连续的，想要显示效果更加接近实际对象，需要在网格内部插入节点，使网格内部连续，以此获得连续的位移，必须赋予每个网格形函数。形函数是一种连续的函数，可以简单的把形函数理解成为网格单元节点在其单元内部某一点的所占权重，所贡献的值，形函数是根据网格单元的形状计算出的函数，对同一种类型的网格单元，具体形状是不同的，因此形函数也不一样。一个模型有成千上万个不同形状的网格单元，如果每一个单元都编写一个形函数会很麻烦，因此需要引入标准型，即每一个网格单元都有其具体的标准型，标准型的形状是确定的，因此其形函数也是确定的。通过标准型的形函数与实际网格单元的坐标进行运算，便可得到每一个实际网格的形函数。通过实际网格的形函数实现内部点插值的过程就是通过网格节点的形函数与网格节点的已知属性分别相乘并求和，得到具体某一内部点的属性，通过网格节点的属性求出内部点的属性，程序中根据网格节点的位置、应力、应变属性计算出内部点的位置、应力、应变属性，实现插入内部点值功能。因此通过形函数与标准型，便可自由插值，实现自动划分精度功能，提高显示效果。

网页模块：网页的主要功能都在这里设置。在此模块中添加滑块功能，滑动滑块实现精度和变形大小的调整；添加选择器模块，选择显示网格的应力还是应变；添加按钮功能实现网格线和面的隐藏和显示，以及实时的导入不同的有限元数据文件。还把其他模块如相机模块，有限元模块，鼠标事件模块等导入到这个模块里，最终通过此模块生成HTML网页文件。

S4：网页端有限元仿真结果的显示。通过步骤S3生成一个HTML文件，点击此文件便可以在网页端查看有限元仿真结果，并可以对模型进行交互，可以根据自己的需求实时调节精度，隐藏或显示网格的线和面，或者滑动位移滑块查看模型的变形过程，也可以在此页面打开已经生成的有需要渲染文件。

本发明的有益效果：

对比主流的有限元软件，需要根据电脑的操作系统来下载相应的桌面客户端，且都必须经常性的更新和维护，使用不便。而本发明不需要任何插件就可以在网页上显示有限元仿真结果，十分方便。

本发明可以在任何可以打开网页的移动设备打开，不需要在依赖计算机，只需要可以打开网页即可，便可以完成有限元仿真结果的查看，十分轻便。且基于云端的显示，无需安装程序便可以异地同步获取数据，结果的传输和共享十分方便，在工矿复杂的车间可以发挥重要的作用，提高效率。且本发明基于网页显示，资源占用率较小，极大的减轻了计算机等设备的负担。

附图说明

图1(a)～图1(h)为本发明方法可以显示的网格单元类型举例，其中，图1(a)表示三节点三角形网格，图1(b)表示四节点四边形网格，图1(c)表示四节点四面体网格，图1(d)表示八节点六面体网格，图1(e)表示六节点三角形网格，图1(f)表示八节点四边形网格，图1(g)表示十节点四面体网格，图1(h)表示二十节点六面体网格；

图2为三角形网格单元的型函数；

图3为标准型网格单元的映射；

图4为网页端显示界面；

图5(a)和图5(b)分别为ANSYS中结果一阶三角形网格单元的应力和应变图；

图6(a)和图6(b)分别为网页上一阶三角形网格单元的应力和应变图；

图7(a)和图7(b)分别为网页上一阶三角形与四边形网格混合单元的应力和应变图；

图8(a)和图8(b)分别为网页上二阶四面体网格单元的应力和应变图；

图9(a)和图9(b)分别为网页上二阶四面体和六面体网格单元的应力和应变图；

图10为网页上复杂模型的应变图。

具体实施方式

为使本发明的目的、内容和优点有更进一步的了解与认识，下面结合实施例与附图，对本发明的具体实施方式作进一步详细说明。

网页端的主要显示流程主要是把有限元仿真软件的仿真结果数据导出，转化为本发明程序中可以渲染的格式，在通过基于WebGL库的渲染显示在网页上。本实施在网页端显示不同的网格类型构成的不同的有限元模型，基于WebGL的有限元仿真结果在线显示的方法具体包括如下步骤；

S1：对不同网格单元的模型进行有限元仿真分析

本实施例显示的网格单元类型如图1(a)～图1(h)所示，主要为二维网格单元和三维网格单元，因此需要通过有限元仿真软件(如ANSYS)得到所需类型的网格单元数据，把平面或曲面模型划分为二维网格单元，如一阶或二阶的三角形单元和四边形单元，把实体模型划分为三维网格单元，如一阶或二阶的四面体单元和六面体单元，再对网格划分后的模型进行有限元分析计算，得到不同网格单元构成的不同的有限元模型的计算数据；

S2：有限元仿真数据解析与处理

以二阶六面体网格数据的提取过程为例，通过正则表达式提取六面体网格构成的有限元仿真数据文件中的关键数据，包括inp格式的网格数据文件和TXT文本格式的应力应变文件。把所提取的数据转化为json渲染格式，以便有限元数据的快速读取；本程序通过正则表达式每次提取21个数字数据，二阶六面体网格单元有20个节点，一个单元编号。因此第一个数字表示网格的编号，而后面是个表示网格的20个节点的坐标编号，应力应变等的数据也是通过该方法，最终将提取出的数据通过write，调用json库，写入一个json格式的文件中，便于后续的解析和读取操作；

S3：基于WebGL的有限元结果渲染过程

得到可以渲染json格式的有限元数据文件之后，想要在网页上显示出有限元模型还需要经过一些程序的支持。有限元显示需要网格，应力，应变，颜色等数据。当导入了二阶六面体的有限元数据文件之后，需要判断网格类型，在通过switch语句中的case'网格单元类型'判断导入的是二阶六面体网格类型，返回二阶六面体网格类型对应的二阶六面体函数方法。

每次调用该函数将会绘制每一个六面体网格，通过for循环多次调用直至绘制出完整的有限元模型。每次调用该函数会进行一次六面体网格单元线和网格单元面的绘制。其中网格线设置为黑色，便于区分两个六面体网格的边界。六网格单元面绘制过程需要根据应力应变数据的大小显示对应的颜色。六面体网格的绘制过程，实际上就是六个四边形面和线所组成的，绘制每个面都可以看着是一次绘制四边形单元的过程，通过for循环s从0到5来控制每一个面，s等于不同的值时绘制不同的面，通过xyz三个方向中的两个方向绘制标准型四边形网格，另一个方向的坐标为1或者-1，控制四边形网格平面的位置，通过控制位置和形状便能在距离坐标原点1个单位距离处绘制六个面，即一个六面体网格单元。

为实现自动划分精度功能，需要在六面体网格内部插入节点，即需要形函数。形函数原理如图2所示，其中就是网格顶点在内部所占的权重。通过已知的标准型六面体网格的形函数与实际六面体网格单元的坐标进行运算，得到每一个实际六面体网格的形函数，其中标准型的映射原理如图3所示。经此得知六面体网格单元形函数和网格节点的应力应变信息，便可得到六面体网格单元内部任何一点的应力应变数据，便实现了自动划分精度功能。

接着把六面体网格的数据文件中的应力，应变的数据添加的六面体网格中，把数据传递到WEBGL中，通过WebGL的顶点着色器和片元着色器模块分别完成位置和颜色的计算。得到可以在网页端显示的有限元仿真结果数据。运行该程序便可把六面体网格构成的有限元仿真结果的所有的数据写入到一个HTML文件。

S4：在网页端渲染有限元仿真结果

运行HTML文件便可在网页端渲染有限元仿真结果。六面体网格构成的有限元仿真结果的网页显示的界面如图4所示。该网页端提供了多种功能供用户使用，可以实时条件网格划分精度，应变的大小，隐藏或显示网格的面和线的功能，同时也可以直接读取已经处理过的有限元数据文件，完成实时的有限元仿真结果渲染。为了看出显示的效果，本发明中对同一种有限元模型的仿真结果在ANSYS软件和网页中做了对照，其中ANSYS中显示效果图5(a)～图5(b)，不同网格单元类型有限元仿真结果的在线显示成果分别如图6(a)～图6(b)、7(a)～图7(b)、图8(a)～图8(b)、图9(a)～图9(b)和图10所示；可以看出网页中渲染有限元仿真结果的效果与在有限元仿真软件ANSYS中的效果接近，且已经可以渲染几十万网格数量的复杂模型。

Claims (1)

1.一种基于WebGL的有限元仿真结果在线显示的方法，其特征在于，步骤如下：

S1：有限元仿真分析：导入二维或三维模型，通过有限元仿真软件对该模型进行仿真分析，得到二维或三维网格构成的有限元仿真结果；

S2：有限元仿真数据解析与处理：从有限元仿真软件中直接导出的网页端在线显示所需要的有限元仿真结果数据，包括inp格式的网格数据文件和TXT文本格式的应力应变文件；需要编写数据解析端口对有限元软件生成的文件数据进行解析和转化，通过正则表达式提取数据文件中的关键数据，将不同类型的网格数据和有限元仿真所需数据分类，并把所提取的数据转化为程序渲染专用的格式，使得有限元数据文件在程序中易于解析，以便有限元数据在程序中的快速读取；

S3：设计网页端有限元仿真结果数据渲染的程序模块：

相机模块：屏幕上看到的画面都是二维的，通过相机模块进行视图变换以及投影变换，使得二维的屏幕显示一个三维的模型，具体为：采用视图变换矩阵和投影变换矩阵，并在最后的有限元仿真模型显示到屏幕的过程中，将这两种矩阵与计算所得的有限元模型数据本身的位置相乘，得到最后在屏幕中显示的有限元仿真结构的模型；

鼠标事件模块：当有限元模型显示到网页上后，只是一个3D模型，不能在显示页面进行操作，对canvas元素的加入事件监听函数addEventListener()后用来监听canvas上事件，canvas对象支持所有javascript的鼠标事件；

有限元模块：有限元模块的显示需要网格、应力、应变和颜色数据；

有限元仿真结果显示的是一阶和二阶的三角形单元、四边形单元、四面体单元、六面体单元，其中二阶单元是在一阶单元基础上在网格线中点插入点；不同类型的网格全基于基础的三角形网格来完成的；一个四边形网格通过两个三角形网格共用一条边拼接而成，一个六面体网格的六个面通过六个四边形网格绘制成，同样一个四面体网格通过四个三角形网格形成；

绘制网格的方法如下：当输入一个数据文件之后，首先需要判断网格类型，用switch语句来完成，通过case'网格单元类型'判断导入的有限元数据网格类型，返回处理该网格单元类型所对应的方法函数；每次调用该函数将会绘制一次该类型的网格；其中网格单元的绘制过程包括网格单元线和网格单元面的绘制，网格单元线是单纯的绘制网格的轮廓线，默认为黑色，方便区分网格和网格的边界；网格单元面绘制过程需要导入应力应变数据，根据应力应变数据的大小显示对应的颜色；二维网格绘制网格线和面只需要根据给出的坐标数据绘制出二维网格的网格面和网格线；三维网格的绘制过程，是多个二维网格组合而成，绘制三维网格的每个面都看作是一次绘制二维网格的过程，通过for循环，s从第一个面到最后一个面来控制三维网格每个面的绘制，s等于不同的值时绘制不同的面，在每个面的绘制过程中，通过改变xyz坐标来控制每一个二维面所对应的位置，最终通过多个二维网格形成一个三维网格；

在绘制完网格后得到的只是简单的CAD模型，想要完成有限元仿真结果的渲染，需要把数据文件中的应力、应变的数据添加的网格中，此时网格所含的信息不只是坐标信息，还有应力、应变信息，即可以网格中显示颜色来表示应力应变大小；得到网格的所需的数据之后，需要在网页上显示出来；因此需要通过WebGL实现网页端显示，其中需要用的WebGL两个模块，一是顶点着色器模块，主要功能为执行顶点变换、光照和计算等与顶点相关的操作，即可以把模型的位置显示到网页端；二是片元着色器，是处理片元值及相关数据的可编程单元，包括模型的颜色、质地、光照效果和阴影，即可以在模型上显示颜色表示应力应变大小，在此模块中需要进行有限元计算，根据应力应变的最大最小值，分配不同大小的应力应变所对应的具体颜色；通过WebGL的这两个模块最终实现网页端渲染有限元仿真结果；

提高网页显示效果：通过上述步骤已经基本实现了网页端的有限元仿真结果的在线显示；为了显示效果的进一步提高，在有限元模块的网格数据的计算过程中引入的形函数和标准型的计算；一个网格只有有限个网格节点，实际对象又是连续的，想要显示效果更加接近实际对象，需要在网格内部插入节点，使网格内部连续，以此获得连续的位移，必须赋予每个网格形函数；对同一种类型的网格单元，具体形状是不同的，因此形函数也不一样，因此需要引入标准型，即每一个网格单元都有其具体的标准型，标准型的形状是确定的，因此其形函数也是确定的；通过标准型的形函数与实际网格单元的坐标进行运算，得到每一个实际网格的形函数；通过实际网格的形函数实现内部点插值的过程就是通过网格节点的形函数与网格节点的已知属性分别相乘并求和，得到具体某一内部点的属性，通过网格节点的属性求出内部点的属性，程序中根据网格节点的位置、应力、应变属性计算出内部点的位置、应力、应变属性，实现插入内部点值功能；

网页模块：添加滑块功能，实现精度和变形大小的调整；添加选择器模块，选择显示网格的应力还是应变；添加按钮功能实现网格线和面的隐藏和显示，以及实时的导入不同的有限元数据文件；将相机模块、有限元模块和鼠标事件模块导入到网页模块里，最终通过网页模块生成HTML网页文件；

S4：网页端有限元仿真结果的显示：通过步骤S3生成一个HTML文件，点击此文件在网页端查看有限元仿真结果，并对模型进行交互，根据需求实时调节精度，隐藏或显示网格的线和面，或者滑动位移滑块查看模型的变形过程，或在此页面打开已经生成的有需要渲染文件。

Images