A method for online display of finite element simulation results based on WebGL

Abstract

The present invention relates to the technical field of web page rendering models, and in particular to a method for online display of finite element simulation results based on WebGL. The method of the present invention can be opened on any mobile device that can open a web page, does not need to rely on a computer, and only needs to open the web page to complete the viewing of the finite element simulation results, which is very light; and based on cloud-based display, data can be synchronously acquired remotely without installing a program, and the transmission and sharing of results are very convenient, which can play an important role in complex workshops in industries and mines and improve efficiency; and the present invention is based on web page display, and the resource occupancy rate is small, which greatly reduces the burden on computers and other equipment.

Description

Technical Field

[0001] The present invention relates to the technical field of web page-based rendering models, and in particular to a method for online display of finite element simulation results based on WebGL, which can realize web-side display of multiple finite element mesh models and simulation results. Background Art

[0002] Finite element simulation analysis is one of the most important technologies and means for the design and analysis of high-end equipment in the fields of aviation, aerospace and navigation. The current mainstream finite element software, such as ANSYS, Abaqus, etc., are mainly desktop applications. Desktop application finite element software is highly dependent on the computing power of the computer. When dealing with complex models, the amount of calculation will be very large, and the analysis process is highly dependent on the CPU and GPU performance of the user's host. These software need to download the corresponding desktop client according to the computer's operating system. They cannot be installed on mobile devices such as smartphones, and their installation usually requires a large amount of storage capacity. The projects and files generated by the user on the desktop are saved locally, and the previously saved projects cannot be viewed after changing the device.

[0003] With the rapid development of industrialization and information technology, cloud computing-based technology can complete simulation calculations for local users in the cloud. At the same time, it is necessary to solve the user's demand for displaying cloud simulation calculation results on the web page. Compared with the traditional desktop display, the web-based finite element online display is more flexible and convenient to use, and can be opened on mobile devices, which is conducive to users to view, communicate and collaboratively analyze simulation results anytime and anywhere.

[0004] Existing online display methods are mainly based on WebGL and HTML5 technologies, which can only display ordinary CAD models online, but cannot realize the online display of various finite element simulation results. In addition to displaying the CAD model, the present invention adds the data required for displaying the finite element simulation results to the grid of the model, and realizes the online display of the finite element simulation results through finite element calculation. Summary of the invention

[0005] The present invention proposes a method for online display of finite element simulation results based on WebGL, which can display first-order and second-order triangles, quadrilaterals, tetrahedrons, hexahedrons and other mesh units and finite element simulation results, so as to solve the problem that the display of finite element simulation results is highly dependent on desktop software and inconvenient to use.

[0006] The technical solution of the present invention:

[0007] A method for online display of finite element simulation results based on WebGL, the steps are as follows:

[0008] S1: Finite element simulation analysis. Import a two-dimensional or three-dimensional model, perform simulation analysis on the model through finite element simulation software, and obtain finite element simulation results consisting of two-dimensional or three-dimensional grids.

[0009] S2: Finite element simulation data analysis and processing. The web page directly exported from the finite element simulation software displays the required finite element simulation result data online, including mesh data files in inp format and stress-strain files in TXT text format. However, the data exported by the finite element model cannot be used directly. There are many reasons, such as the mesh data exported from the same model contains data of multiple meshes, and it is necessary to write a data analysis port to extract and classify different types of meshes separately. In addition, a lot of data exported by the finite element software is redundant, and only key information needs to be extracted.

[0010] Therefore, it is necessary to write a data parsing port to parse and convert the file data generated by the finite element software, extract the key data in the data file through regular expressions, classify different types of mesh data and data required for finite element simulation, and convert the extracted data into a format dedicated to program rendering, so that the finite element data file is easy to parse in the program, so that the finite element data can be quickly read in the program;

[0011] S3: Design a program module for rendering finite element simulation result data on the web page. After obtaining the finite element data file that can be rendered in a special format through step S2, if you want to display the finite element model on the web page, you still need the support of some finite element rendering and display programs, which can be mainly divided into four modules, namely camera module, finite element module, mouse event module and web page module;

[0012] Camera module: The images seen on the screen are all two-dimensional. The camera module performs view transformation and projection transformation to make the two-dimensional screen display a three-dimensional model. Specifically, the view transformation matrix and projection transformation matrix are used, and when the final finite element simulation model is displayed on the screen, these two matrices are multiplied with the position of the calculated finite element model data itself to obtain the final finite element simulation structure model displayed on the screen.

[0013] Mouse event module: When the finite element model is displayed on the web page, it is just a 3D model and cannot be operated on the display page. However, by adding the event listening function addEventListener() to the canvas element, it can be used to listen to events on the canvas. The canvas object supports all javascript mouse events, including mouse click (mouseclick), mouse press (mousedown), mouse lift (mouseup), mouse wheel sliding (wheel), etc. By adding these mouse events, interactive operations can be realized on the web page. You can zoom in, zoom out, rotate the model, select different models, and other operations according to your needs.

[0014] Finite element module: There are many methods for displaying various complex models on web pages. For example, many models can be displayed on web pages relatively easily through three.js. However, WebGL or three.js can only draw CAD models, and cannot display finite element simulation results, such as displaying different colors at different positions of the model to indicate the magnitude of stress and strain. This requires the use of WebGL combined with the finite element module for display.

[0015] The display of the finite element module requires data such as mesh, stress, strain, and color. There are also different types of meshes, and the display process of different mesh type data is different, so the corresponding processing methods are also different. The mesh types that can be displayed by the present invention include first-order and second-order triangular meshes, quadrilateral meshes, tetrahedral meshes, and hexahedral meshes. Different types of meshes are all completed based on the basic triangular mesh, in which the second-order unit is to insert a point at the midpoint of the grid line on the basis of the first-order unit. A triangular mesh is relatively simple to draw, and a quadrilateral mesh can be spliced ​​by two triangular meshes sharing a common edge. The six faces of a hexahedral mesh can be drawn by six quadrilateral meshes, and similarly a tetrahedral mesh can be formed by four triangular meshes.

[0016] The method of drawing a grid is as follows: after inputting a data file, the grid type needs to be determined first, which is done with a switch statement. The imported finite element grid type is determined by case'grid unit type', and the method function corresponding to the grid unit type is returned. Each call to this function will draw a grid of this type. The grid unit drawing process includes the drawing of grid unit lines and grid unit faces. The grid unit line is simply the outline of the grid, which is black by default, which is convenient for distinguishing the grid and the grid boundary. The grid unit face drawing process needs to import stress and strain data, and the corresponding color is displayed according to the size of the stress and strain data. Drawing grid lines and faces of a two-dimensional grid only requires drawing the grid faces and grid lines of the two-dimensional grid according to the given coordinate data. The drawing process of a three-dimensional grid is actually a combination of multiple two-dimensional grids. Drawing each face of a three-dimensional grid can be regarded as a process of drawing a two-dimensional grid. Through a for loop, s controls the drawing of each face of the three-dimensional grid from the first face to the last face. Different faces are drawn when s is equal to different values. In the drawing process of each face, the position corresponding to each two-dimensional face is controlled by changing the xyz coordinates, and finally a three-dimensional grid is formed through multiple two-dimensional grids.

[0017] After drawing the mesh, you only get a simple CAD model. To complete the rendering of the finite element simulation results, you need to add the stress and strain data in the data file to the mesh. At this time, the information contained in the mesh is not only coordinate information, but also stress and strain information, that is, the color can be displayed in the mesh to indicate the size of stress and strain. After obtaining the required data of the mesh, it needs to be displayed on the web page. Therefore, it is necessary to use WebGL to realize web page display. Among them, two WebGL modules are needed. One is the vertex shader module, whose main function is to perform vertex transformation, lighting and calculation and other vertex-related operations, that is, the position of the model can be displayed on the web page. The second is the fragment shader, which is a programmable unit that processes fragment values ​​and related data, including the color, texture, lighting effects and shadows of the model, that is, the color can be displayed on the model to indicate the size of stress and strain. Finite element calculations need to be performed in this module, and specific colors corresponding to stress and strain of different sizes are assigned according to the maximum and minimum values ​​of stress and strain. Through these two modules of WebGL, the web page rendering of finite element simulation results is finally realized.

[0018] Improve the display effect of web pages: Through the above steps, the online display of finite element simulation results on the web page has been basically realized. In order to further improve the display effect, the calculation of shape functions and standard forms is introduced in the calculation process of the mesh data of the finite element module. A mesh has only a finite number of mesh nodes, and the actual object is continuous. If you want the display effect to be closer to the actual object, you need to insert nodes inside the mesh to make the mesh continuous. In order to obtain continuous displacement, each mesh shape function must be assigned. The shape function is a continuous function. The shape function can be simply understood as the weight and contribution of a mesh unit node at a certain point inside the unit. The shape function is a function calculated based on the shape of the mesh unit. For the same type of mesh unit, the specific shape is different, so the shape function is also different. A model has thousands of mesh units of different shapes. It would be troublesome to write a shape function for each unit. Therefore, it is necessary to introduce a standard form, that is, each mesh unit has its specific standard form. The shape of the standard form is determined, so its shape function is also determined. By calculating the shape function of the standard form with the coordinates of the actual mesh unit, the shape function of each actual mesh can be obtained. The process of realizing internal point interpolation through the shape function of the actual grid is to obtain the attributes of a specific internal point by multiplying and summing the shape function of the grid node with the known attributes of the grid node, and then find the attributes of the internal point through the attributes of the grid node. The program calculates the position, stress, and strain attributes of the internal point according to the position, stress, and strain attributes of the grid node to realize the function of inserting the internal point value. Therefore, through the shape function and the standard type, free interpolation can be achieved to realize the automatic division accuracy function and improve the display effect.

[0019] Web page module: The main functions of the web page are set here. In this module, add a slider function to adjust the accuracy and deformation size by sliding the slider; add a selector module to choose whether to display the stress or strain of the grid; add a button function to hide and display the grid lines and surfaces, and import different finite element data files in real time. Other modules such as camera module, finite element module, mouse event module, etc. are also imported into this module, and finally an HTML web page file is generated through this module.

[0020] S4: Display of finite element simulation results on the web page. An HTML file is generated through step S3. Clicking this file allows you to view the finite element simulation results on the web page and interact with the model. You can adjust the accuracy in real time according to your needs, hide or display the lines and surfaces of the grid, or slide the displacement slider to view the deformation process of the model. You can also open the generated rendering files on this page.

[0021] Beneficial effects of the present invention:

[0022] Compared with mainstream finite element software, which needs to download the corresponding desktop client according to the computer's operating system and must be regularly updated and maintained, it is inconvenient to use. However, the present invention can display the finite element simulation results on the web page without any plug-in, which is very convenient.

[0023] The present invention can be opened on any mobile device that can open a web page, without relying on a computer. It only needs to open a web page to complete the viewing of finite element simulation results, which is very convenient. And based on cloud display, data can be obtained synchronously in different places without installing a program, and the transmission and sharing of results are very convenient, which can play an important role in complex workshops in factories and mines and improve efficiency. And the present invention is based on web page display, and the resource occupancy rate is small, which greatly reduces the burden on computers and other equipment. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1(a) to Figure 1(h) 1(a) represents a three-node triangular mesh, FIG1(b) represents a four-node quadrilateral mesh, FIG1(c) represents a four-node tetrahedral mesh, FIG1(d) represents an eight-node hexahedral mesh, FIG1(e) represents a six-node triangular mesh, FIG1(f) represents an eight-node quadrilateral mesh, FIG1(g) represents a ten-node tetrahedral mesh, and FIG1(h) represents a twenty-node hexahedral mesh;

[0025] Figure 2 is the shape function of the triangular mesh unit;

[0026] Figure 3 is the mapping of standard grid cells;

[0027] Figure 4 Display interface for web page;

[0028] Figure 5(a) and Figure 5(b) are the stress and strain diagrams of the first-order triangular mesh elements in ANSYS;

[0029] Figure 6(a) and Figure 6(b) are stress and strain diagrams of the first-order triangular mesh element on the web page, respectively;

[0030] Figure 7(a) and Figure 7(b) are stress and strain diagrams of the first-order triangular and quadrilateral mesh hybrid elements on the web page, respectively;

[0031] Figure 8(a) and Figure 8(b) are stress and strain diagrams of the second-order tetrahedral mesh element on the web page;

[0032] Figure 9(a) and Figure 9(b) are stress and strain diagrams of the second-order tetrahedral and hexahedral mesh elements on the web page, respectively;

[0033] Fig.10 Strain diagram for complex models on the web. DETAILED DESCRIPTION

[0034] In order to further understand and appreciate the purpose, content and advantages of the present invention, the specific implementation methods of the present invention are further described in detail below in conjunction with embodiments and drawings.

[0035] The main display process of the web page is to export the simulation result data of the finite element simulation software, convert it into a format that can be rendered in the program of the present invention, and then display it on the web page through rendering based on the WebGL library. This implementation displays different finite element models composed of different mesh types on the web page. The method for online display of finite element simulation results based on WebGL specifically includes the following steps:

[0036] S1: Finite element simulation analysis of models with different mesh units

[0037] The grid unit types shown in this embodiment are as follows Figure 1(a) to Figure 1(h) As shown in the figure, there are mainly two-dimensional grid units and three-dimensional grid units, so it is necessary to obtain the required type of grid unit data through finite element simulation software (such as ANSYS), divide the plane or curved surface model into two-dimensional grid units, such as first-order or second-order triangle units and quadrilateral units, and divide the solid model into three-dimensional grid units, such as first-order or second-order tetrahedron units and hexahedron units, and then perform finite element analysis and calculation on the meshed model to obtain calculation data of different finite element models composed of different grid units;

[0038] S2: Finite element simulation data analysis and processing

[0039] Taking the extraction process of second-order hexahedral mesh data as an example, regular expressions are used to extract key data from the finite element simulation data file composed of hexahedral meshes, including mesh data files in inp format and stress-strain files in TXT text format. The extracted data is converted into json rendering format for fast reading of finite element data; this program uses regular expressions to extract 21 digital data each time. The second-order hexahedral mesh unit has 20 nodes and a unit number. Therefore, the first number represents the mesh number, and the following is a coordinate number representing the 20 nodes of the mesh. Stress, strain and other data are also obtained through this method. Finally, the extracted data is written into a json format file by writing and calling the json library to facilitate subsequent parsing and reading operations;

[0040] S3: Finite element result rendering process based on WebGL

[0041] After getting the finite element data file that can be rendered in json format, some programs are needed to display the finite element model on the web page. Finite element display requires mesh, stress, strain, color and other data. After importing the finite element data file of the second-order hexahedron, it is necessary to determine the mesh type. The case 'mesh unit type' in the switch statement determines that the imported second-order hexahedron mesh type is returned. The second-order hexahedron function method corresponding to the second-order hexahedron mesh type is returned.

[0042] Each time this function is called, each hexahedral mesh will be drawn. The for loop is called multiple times until the complete finite element model is drawn. Each time this function is called, the hexahedral mesh unit line and mesh unit face will be drawn. The mesh lines are set to black to distinguish the boundaries of the two hexahedral meshes. The six mesh unit face drawing process needs to display the corresponding color according to the size of the stress-strain data. The hexahedral mesh drawing process is actually composed of six quadrilateral faces and lines. Drawing each face can be regarded as a process of drawing a quadrilateral unit. Each face is controlled by the for loop s from 0 to 5. Different faces are drawn when s is equal to different values. Standard quadrilateral meshes are drawn in two directions of the three directions of xyz. The coordinates of the other direction are 1 or -1 to control the position of the quadrilateral mesh plane. By controlling the position and shape, six faces can be drawn at a unit distance from the coordinate origin, that is, a hexahedral mesh unit.

[0043] In order to realize the automatic division accuracy function, it is necessary to insert nodes inside the hexahedral mesh, that is, shape function is needed. The principle of shape function is as follows Figure 2 As shown, where is the weight of the mesh vertex inside. By calculating the known shape function of the standard hexahedral mesh and the coordinates of the actual hexahedral mesh unit, the shape function of each actual hexahedral mesh is obtained. The mapping principle of the standard type is as follows Figure 3 As shown. By knowing the shape function of the hexahedral mesh unit and the stress and strain information of the mesh nodes, the stress and strain data of any point inside the hexahedral mesh unit can be obtained, thus realizing the automatic division accuracy function.

[0044] Then add the stress and strain data in the hexahedral mesh data file to the hexahedral mesh, pass the data to WEBGL, and complete the position and color calculations through the WebGL vertex shader and fragment shader modules. Get the finite element simulation result data that can be displayed on the web page. Run the program to write all the data of the finite element simulation results composed of the hexahedral mesh into an HTML file.

[0045] S4: Rendering finite element simulation results on the web

[0046] Running the HTML file will render the finite element simulation results on the web page. The web page display interface of the finite element simulation results composed of hexahedral meshes is as follows: Figure 4 The web page provides a variety of functions for users to use, including real-time conditional meshing accuracy, strain size, hiding or displaying mesh surfaces and lines, and can also directly read processed finite element data files to complete real-time finite element simulation result rendering. In order to see the display effect, the simulation results of the same finite element model in the present invention are compared in ANSYS software and web pages, where the display effect in ANSYS is Figure 5(a) to Figure 5(b) The online display results of finite element simulation results of different mesh unit types are as follows: Figure 6(a) to Figure 6(b) 7(a) to 7(b), Figure 8(a) to Figure 8(b) , Figure 9(a) to Figure 9(b) and Fig.10 As shown; it can be seen that the effect of rendering the finite element simulation results in the web page is close to that in the finite element simulation software ANSYS, and it can already render complex models with hundreds of thousands of grids.

Claims

1. A method for online display of finite element simulation results based on WebGL, characterized in that: Here are the steps: S1: Finite element simulation analysis: import a two-dimensional or three-dimensional model, perform simulation analysis on the model through finite element simulation software, and obtain finite element simulation results consisting of two-dimensional or three-dimensional grids; S2: Finite element simulation data analysis and processing: The web page directly exported from the finite element simulation software displays the required finite element simulation result data online, extracts key data from the data file through regular expressions, classifies different types of mesh data and data required for finite element simulation, and converts the extracted data into a format dedicated to program rendering; S3: Design a program module for rendering finite element simulation result data on the web page: Camera module: The camera module is used to perform view transformation and projection transformation, so that a two-dimensional screen can display a three-dimensional model; Mouse event module: addEventListener() is used to listen to events on canvas after adding event listening function to canvas element. Canvas object supports all javascript mouse events. Finite Element Module: The display of the Finite Element Module requires mesh, stress, strain and color data; The finite element simulation results show first-order and second-order triangular elements, quadrilateral elements, tetrahedral elements, and hexahedral elements; After drawing the mesh, the stress and strain data in the data file need to be added to the mesh, and WebGL needs to be used to display it on the web page. Two WebGL modules are needed: one is the vertex shader module, which performs vertex transformation, lighting, and vertex-related operations, that is, displays the position of the model on the web page; the other is the fragment shader, which is a programmable unit that processes fragment values ​​and related data. Web page module: add slider function, selector module, button function, and import different finite element data files in real time; import camera module, finite element module and mouse event module into the web page module, and finally generate HTML web page file through the web page module; S4: Display of finite element simulation results on the web page: Generate an HTML file through step S3. Click this file to view the finite element simulation results on the web page and interact with the model. Adjust the accuracy in real time according to needs, hide or display the lines and surfaces of the grid, or slide the displacement slider to view the deformation process of the model, or open the generated rendering file on this page.

2. The method for online display of finite element simulation results based on WebGL according to claim 1, characterized in that: The camera module in S3 is specifically: using the view transformation matrix and the projection transformation matrix, and in the process of displaying the final finite element simulation model on the screen, multiplying these two matrices with the position of the calculated finite element model data itself to obtain the model of the finite element simulation structure finally displayed on the screen.

3. The method for online display of finite element simulation results based on WebGL according to claim 1, characterized in that: The method of drawing a grid in S3 is as follows: after inputting a data file, the grid type needs to be determined first, which is done with a switch statement. The imported finite element grid type is determined by case 'grid cell type', and the method function corresponding to the grid cell type is returned; each time the function is called, a grid of this type will be drawn once; the grid cell drawing process includes the drawing of grid cell lines and grid cell faces. The grid cell line is simply the outline of the grid, which is black by default, which is convenient for distinguishing the grid from the grid boundary; the grid cell face drawing process requires the import of stress strain data, and the corresponding color is displayed according to the size of the stress strain data; the drawing of grid lines and faces of a two-dimensional grid only requires drawing the grid faces and grid lines of the two-dimensional grid according to the given coordinate data; the drawing process of a three-dimensional grid is composed of multiple two-dimensional grids, and drawing each face of a three-dimensional grid is regarded as a process of drawing a two-dimensional grid. Through a for loop, s controls the drawing of each face of the three-dimensional grid from the first face to the last face, and different faces are drawn when s is equal to different values. In the drawing process of each face, the position corresponding to each two-dimensional face is controlled by changing the xyz coordinates, and finally a three-dimensional grid is formed through multiple two-dimensional grids.

4. The method for online display of finite element simulation results based on WebGL according to claim 1, characterized in that: Improve the web page display effect after drawing the grid: In order to further improve the display effect, the shape function and standard type calculation are introduced in the calculation process of the grid data of the finite element module; a grid has only a finite number of grid nodes, and the actual object is continuous. If you want the display effect to be closer to the actual object, you need to insert nodes inside the grid to make the grid continuous. In order to obtain continuous displacement, each grid shape function must be assigned; for the same type of grid units, the specific shapes are different, so the shape functions are also different, so it is necessary to introduce standard types, that is, each grid unit has its specific standard type, the shape of the standard type is certain, so its shape function is also certain; the shape function of each actual grid is obtained by calculating the shape function of the standard type with the coordinates of the actual grid unit; the process of realizing internal point interpolation through the shape function of the actual grid is to multiply and sum the shape function of the grid node with the known attributes of the grid node respectively, to obtain the attributes of a specific internal point, and to obtain the attributes of the internal point through the attributes of the grid node. The program calculates the position, stress, and strain attributes of the internal point according to the position, stress, and strain attributes of the grid node to realize the function of inserting the internal point value.

Images