CN117173369B - WebGL-based three-dimensional flood evolution simulation method and system - Google Patents
WebGL-based three-dimensional flood evolution simulation method and system Download PDFInfo
- Publication number
- CN117173369B CN117173369B CN202311445204.1A CN202311445204A CN117173369B CN 117173369 B CN117173369 B CN 117173369B CN 202311445204 A CN202311445204 A CN 202311445204A CN 117173369 B CN117173369 B CN 117173369B
- Authority
- CN
- China
- Prior art keywords
- grid
- water
- primitive
- frame
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 81
- 238000004088 simulation Methods 0.000 title claims abstract description 54
- XLYOFNOQVPJJNP-UHFFFAOYSA-N water Substances O XLYOFNOQVPJJNP-UHFFFAOYSA-N 0.000 claims abstract description 221
- 238000012545 processing Methods 0.000 claims abstract description 27
- 239000000463 material Substances 0.000 claims abstract description 14
- 239000011159 matrix material Substances 0.000 claims abstract description 13
- 238000004040 coloring Methods 0.000 claims abstract description 8
- 238000009432 framing Methods 0.000 claims abstract description 3
- 238000009877 rendering Methods 0.000 claims description 50
- 230000006870 function Effects 0.000 claims description 40
- 230000008569 process Effects 0.000 claims description 23
- 238000004364 calculation method Methods 0.000 claims description 19
- 229910052792 caesium Inorganic materials 0.000 claims description 18
- TVFDJXOCXUVLDH-UHFFFAOYSA-N caesium atom Chemical compound [Cs] TVFDJXOCXUVLDH-UHFFFAOYSA-N 0.000 claims description 18
- 238000005516 engineering process Methods 0.000 claims description 18
- 238000004458 analytical method Methods 0.000 claims description 14
- 238000011144 upstream manufacturing Methods 0.000 claims description 14
- 230000007246 mechanism Effects 0.000 claims description 7
- 238000004590 computer program Methods 0.000 claims description 6
- 238000006243 chemical reaction Methods 0.000 claims description 4
- 238000012937 correction Methods 0.000 claims description 4
- 238000012821 model calculation Methods 0.000 claims description 4
- 238000012544 monitoring process Methods 0.000 claims description 4
- 230000036961 partial effect Effects 0.000 claims description 4
- 238000012805 post-processing Methods 0.000 claims description 3
- 238000003491 array Methods 0.000 abstract description 4
- 239000010410 layer Substances 0.000 description 24
- 230000000007 visual effect Effects 0.000 description 14
- 238000013507 mapping Methods 0.000 description 12
- 238000012876 topography Methods 0.000 description 12
- 230000005540 biological transmission Effects 0.000 description 11
- 230000000694 effects Effects 0.000 description 9
- 238000005457 optimization Methods 0.000 description 9
- 238000012800 visualization Methods 0.000 description 9
- 230000009466 transformation Effects 0.000 description 8
- 238000011160 research Methods 0.000 description 7
- 239000013598 vector Substances 0.000 description 7
- 230000000903 blocking effect Effects 0.000 description 6
- 238000010276 construction Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 6
- 238000011068 loading method Methods 0.000 description 6
- 239000012634 fragment Substances 0.000 description 5
- 238000013519 translation Methods 0.000 description 5
- 230000008859 change Effects 0.000 description 4
- 238000013461 design Methods 0.000 description 4
- 238000009826 distribution Methods 0.000 description 4
- 238000013515 script Methods 0.000 description 4
- 238000003860 storage Methods 0.000 description 4
- 239000003086 colorant Substances 0.000 description 3
- 238000007906 compression Methods 0.000 description 3
- 230000006835 compression Effects 0.000 description 3
- 230000033001 locomotion Effects 0.000 description 3
- 238000005259 measurement Methods 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000000630 rising effect Effects 0.000 description 3
- 238000012546 transfer Methods 0.000 description 3
- 230000001133 acceleration Effects 0.000 description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 239000012792 core layer Substances 0.000 description 2
- 238000013144 data compression Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 239000012530 fluid Substances 0.000 description 2
- 238000005286 illumination Methods 0.000 description 2
- 238000011835 investigation Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000002829 reductive effect Effects 0.000 description 2
- 230000002441 reversible effect Effects 0.000 description 2
- 238000012216 screening Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 239000002352 surface water Substances 0.000 description 2
- 238000006424 Flood reaction Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 230000015556 catabolic process Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013075 data extraction Methods 0.000 description 1
- 230000006837 decompression Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 239000003344 environmental pollutant Substances 0.000 description 1
- 238000002474 experimental method Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 230000005484 gravity Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 239000002245 particle Substances 0.000 description 1
- 230000000704 physical effect Effects 0.000 description 1
- 238000013439 planning Methods 0.000 description 1
- 231100000719 pollutant Toxicity 0.000 description 1
- 230000002265 prevention Effects 0.000 description 1
- 238000012552 review Methods 0.000 description 1
- 238000012502 risk assessment Methods 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
- 238000013179 statistical model Methods 0.000 description 1
- 239000002344 surface layer Substances 0.000 description 1
- 230000003746 surface roughness Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 238000010257 thawing Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
- 239000003643 water by type Substances 0.000 description 1
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02A—TECHNOLOGIES FOR ADAPTATION TO CLIMATE CHANGE
- Y02A10/00—TECHNOLOGIES FOR ADAPTATION TO CLIMATE CHANGE at coastal zones; at river basins
- Y02A10/40—Controlling or monitoring, e.g. of flood or hurricane; Forecasting, e.g. risk assessment or mapping
Landscapes
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a three-dimensional flood evolution simulation method and system based on WebGL, which are used for improving the processing speed. The method comprises the following steps: taking each moment output in the hydrodynamic model as a frame, extracting water depth data frame by frame, writing the water depth data into a time sequence-grid water depth matrix, wherein each row represents water depth values of all grids at one moment; meanwhile, extracting maximum water level data writing time sequence-grid maximum water level array frame by frame; the method comprises the steps of customizing Mesh primitives of a water body grid, decomposing the quadrilateral grids into two independent triangular grids to obtain numbers, vertex arrays and index arrays of the triangular grids, and defining the appearance of materials by using a shader; setting a timer, coloring and updating each grid of the Mesh primitive according to the material appearance and the color value mapped by the water depth value of each triangular grid frame by frame, taking the maximum water level value in all grids at the same time as the whole height of the Mesh primitive, and forming a framing animation to realize dynamic flood evolution numerical simulation.
Description
Technical Field
The invention relates to a computer system based on a specific computing model, in particular to a three-dimensional flood evolutionary simulation method and system based on WebGL (Web Graphics Library, a 3D drawing protocol).
Background
The water flow visualization technology can be divided into a water flow numerical value visualization technology and a water body visual simulation technology. The water flow value visualization technology refers to intuitively and realistically displaying the values of various water flow information, such as water level, water depth, flow velocity, gradient, pollutant concentration and the like, by drawing patterns, surface coloring and the like. The water vision simulation technology refers to a method of applying computer graphics to simulate the shape and color change of water flow.
For water flow value visualization, all water flow information can be categorized into scalar and vector categories. For scalar water flow information, taking parameters such as water level, water depth and the like as examples, numerical value-color mapping is generally adopted in practical research to color a grid, and the size of the grid is represented. And on the basis, contour lines or contour planes are added to intuitively represent gradient distribution. For vector water flow information, the flow velocity and the flow direction are taken as examples, and the vector method is based on streamline or arrow to express flow field distribution.
The river water vision simulation method mainly comprises a physical-based simulation method and a non-physical-based simulation method. The physical-based simulation method can truly represent the real flow effect of water flow, but complex Navier-Stokes equation solving work is needed, general calculation is difficult to complete, and the method is not suitable for real-time drawing of the water flow effect. The non-physical simulation-based method mainly comprises simple texture mapping, normal texture mapping, waveform function transformation, a particle system, a Perlin noise function, a statistical model, a cellular automaton and the like. Among them, the waveform function transformation and normal texture mapping are most widely used. The normal texture mapping is to change the normal of the surface of the water body, add disturbance to illumination, form concave-convex effect and realize simulation of water body fluctuation. For example: the method can simulate the river flow effect by applying the directional mapping of the normal texture through the texture mapping technology, so that the flow state change of the river is represented, and the sense of reality of the water body in the river basin is enhanced.
The application image of the water flow visualization technology expresses the space-time distribution characteristics of water flow information and enriches the expression content of the digital twin drainage basin. But simultaneously, for using a water flow numerical visualization technology, the realization of high-speed simulation deduction of flood evolution is still challenging.
One of the main reasons is that the hydrodynamic model has huge data volume of calculation results. The simulation of the flood movement process needs to be based on a numerical model of hydrology, hydrodynamic force and the like. Flood deduction relates to a calculation process of a multi-time space scale, a numerical model of tens of minutes to even hours, and a grid calculation result of tens of thousands to hundreds of thousands; secondly, the dynamic and efficient rendering requirements of the browser end cannot be met, and the rendering efficiency is low. The digital twin-basin display form is developed from two dimensions to three dimensions, the architecture is developed from a single edition to a network edition, and the expression mode is developed from symbolized expression to virtual simulation. For a B/S (Browser/Server) architecture system, the large data size of the hydrodynamic value calculation result causes slow network transmission response speed and the sudden increase of page rendering pressure at the Browser end caused by the performance bottleneck of a 3DGIS engine (3-dimension Geographic Information Systems, three-dimensional geographic information system rendering engine). The final expression is that the water conservancy business system developed based on the 3DGIS engine is numerous, but the system for realizing the flood evolution simulation function based on the hydrodynamic model is not common.
Disclosure of Invention
The invention aims to disclose a three-dimensional flood evolutionary simulation method and a system based on WebGL, so as to improve processing speed, and particularly improve browser-end flood simulation rendering efficiency.
In order to achieve the above purpose, the three-dimensional flood evolutionary simulation method based on WebGL disclosed by the invention comprises the following steps:
step S1, hydrodynamic data processing, which comprises the following steps:
step S11, generating a grid file in a plane coordinate system aiming at the underlying surface of the modeling area river basin based on DEM (Digital Elevation Model ) data, wherein the grid file comprises triangular grids and quadrilateral grids; wherein, the river course adopts quadrilateral mesh to split, two sides of the river course adopts triangle mesh to split; the grid points of each grid carry terrain elevation information;
s12, inputting the split grid file and working condition information comprising interval rainfall and upstream and downstream water flow boundary conditions into a two-dimensional hydrodynamic model, and extracting water depth and water level information of each grid changing along with time from a model calculation output result;
step S13, projecting the grid layer for obtaining the water depth and water level information to a WGS84 coordinate system (World Geodetic System 1984, a coordinate system established for GPS global positioning system use) by using an ArcGIS (Arc Geographic Information System, a software for analyzing and managing geographic information developed by Esri corporation) reprojection toolbox, and exporting the data to a GeoJSON format (GeoJSON, a vector data format which has good human readability, is convenient for network transmission and is widely used) by using an ArcGIS format conversion toolbox; taking the grid hydraulics parameter file at each moment output in the two-dimensional hydrodynamic model numerical calculation result as a frame, extracting water depth data frame by frame, writing the water depth data into a time sequence-grid water depth matrix, wherein each row represents the water depth values of all grids at one moment; meanwhile, extracting maximum water level data writing time sequence-grid maximum water level array frame by frame; the grid hydraulics parameter file comprises center point coordinates of each grid at the current moment, river bottom elevation, water level, water depth, flow rate and flow direction information;
S2, constructing a primitive bottom layer principle based on a 3DGIS engine Cesium js (Cesium js is an open-source browser end three-dimensional virtual earth engine) and WebGL, customizing a water body grid Mesh primitive, decomposing a quadrilateral grid into two independent triangular grids to obtain the serial numbers, vertex arrays and index arrays of the triangular grids, and endowing different water depth values to the same vertex in different triangles; defining the appearance of the material by using a coloring device, and displaying the grid color;
and S3, setting a timer, coloring and updating each grid of the Mesh primitive frame by frame according to the material appearance and the color value mapped by the water depth value of each triangular grid, taking the maximum water level value in all grids at the same time as the whole height of the Mesh primitive, and forming a frame animation so as to realize dynamic flood evolution numerical simulation.
Preferably, in the generating of the mesh file in step S11, further includes: and carrying out local encryption on the partial area, carrying out relative coefficient control on the partial area, and setting a boundary for the outline of the water-blocking building.
Preferably, in the data processing process of the two-dimensional hydrodynamic model, the method further comprises: and (3) carrying out elevation correction, setting boundary and roughness and configuring model parameters, wherein the two-dimensional hydrodynamic model adopts a HydroMPM_FloodRisk flood analysis model (HydroMPM_FloodRisk, a flood analysis simulation software).
Preferably, the invention calls the self-defined WebGL water body grid primitive of the function of creating the grid primitive, the primitive is displayed through the display primitive function, the primitive is hidden by the hidden primitive function, the integral elevation of the primitive is set by the set height function through the array of the time sequence highest water level, and whether the primitive is visible is judged by the set visibility function; and in the rendering process, further comprising: the browser invokes the GPU (graphics processing unit, a computer graphics processor, a computer graphics card core chip) to accelerate data rendering and update primitive functions to realize a time sequence dynamic update mechanism.
Preferably, in the process of frame animation, webworkbench technology (webworkbench, a method for running scripts in a background thread by a browser end) is adopted to load a program file for processing and preparing rendering data in a current program main thread by using a branch thread class so as to open up a new thread.
Preferably, the method of the present invention further comprises: at the data level, the hydrodynamic numerical result data is extremely compressed into gzip format (GNU zip, a data compression format used in network transmission) by writing post-processing code; correspondingly, a NGINX web server (NGINX, a high-performance HTTP and reverse proxy web server) supporting gzip is used at the server, so that the data is transmitted to the browser end and then automatically decoded. Further, for the animation playing strategy, the user operation monitor is set to realize the page operation state monitoring, when the mobile page is monitored, the playing is paused, and after the page is stable, the playing is continued to reduce redrawing.
In order to achieve the above purpose, the invention also discloses a three-dimensional flood evolutionary simulation system based on WebGL, which comprises a browser node and a server node, wherein each node respectively comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, and the server node interacts with the corresponding browser node to respectively implement the method by executing the corresponding computer program.
The invention has the following beneficial effects:
1. and screening and extracting elevation information and water depth water level information corresponding to the grid from the two-dimensional hydrodynamic model numerical simulation massive result data to perform three-dimensional flood evolution based on the WebGL technology, and combining a 3D virtual earth engine Cesium.js to realize self-defining WebGL water grid primitives, so that the high-speed simulation of the flood evolution process is facilitated by combining data processing, compressed storage, network transmission optimization and dynamic efficient rendering. The three-dimensional flood evolution high-speed simulation of 15 ten thousand mesh quantity can be supported at the highest, and the rendering efficiency at the browser end is greatly improved; the response and rendering speed of the Web-end three-dimensional flood evolution simulation are greatly improved, and the method is suitable for popularization.
2. The water body Mesh primitive is customized, the quadrilateral Mesh is decomposed into two independent triangular meshes, the number, the vertex array and the index array of each triangular Mesh are obtained, and the same vertex can be endowed with different water depth values in different triangles. By the method, the relation between the water depth and the water level based on the result data of the hydrodynamic model and the application program interface of the WebGL is established, the modeling grid is converted into the customized WebGL water body grid primitive, and the grid water depth value is mapped into the primitive vertex color. Further, when playing a moment animation, one row of animation is taken out to map the water depth value to a color array, and each grid color of the water body grid primitive is refreshed through a primitive self-defined dynamic updating mechanism. The hydrodynamic modeling mesh file will typically be a triangle mesh and a quadrilateral mesh at the same time, the quadrilateral may be composed of two triangles, which may be considered as a "degenerate" quadrilateral with the 4 th and 1 st points coincident. Finally, the quadrilateral grids and the triangular grids can be unified into two triangular grids at the rendering level. The self-defined water body grid primitive method has good visual rendering compatibility for different hydrodynamic force numerical calculation results.
3. The grid element of the water body is lifted as a whole plane, which can cause tangent to the terrain and the house, but generally the upstream topography is higher than the downstream, and the lifting from low to high easily causes the visual incorrect result that water is submerged from the downstream to the upstream.
The invention will be described in further detail with reference to the accompanying drawings.
Drawings
The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the invention. In the drawings:
fig. 1 is a technical roadmap of a WebGL-based three-dimensional flood evolution high-speed simulation method disclosed by the embodiment of the invention.
FIG. 2 is a flow chart of a program for processing hydrodynamic calculation values by Python (Python, a high-level computer programming language) script, according to an embodiment of the present invention.
FIG. 3 is a diagram showing the processing procedure of the hydrodynamic numerical calculation result disclosed in the embodiment of the invention.
Fig. 4 is a schematic diagram showing unified expression of triangle meshes and quadrilateral meshes according to an embodiment of the present invention.
Fig. 5 is a schematic diagram of a construction principle of a water body grid disclosed in an embodiment of the present invention.
FIG. 6 is a diagram illustrating the method composition and parameters of the custom WebGL water grid primitive class disclosed in the embodiments of the present invention.
Fig. 7 is a schematic diagram of implementing water grid primitive set water level elevation by homogeneous coordinate translation transformation under local coordinates according to an embodiment of the present invention.
FIG. 8 is a schematic diagram of an incoming WebWorker multithreading technique disclosed in an embodiment of the invention.
Detailed Description
Embodiments of the invention are described in detail below with reference to the attached drawings, but the invention can be implemented in a number of different ways, which are defined and covered by the claims.
Example 1
Referring to fig. 1, the present embodiment discloses a three-dimensional flood evolutionary simulation method based on WebGL. Mainly comprises the following large blocks of contents:
1. large scale hydrodynamic outcome data processing
The HydroMPM is a hydrodynamic model computing system, the system is of a B/S (browser/server) architecture, the client is of various types of browsers, and the construction, the computing scheme configuration and the visual display of results of the hydrodynamic model are comprehensively realized.
The construction of the HydroMPM two-dimensional hydrodynamic model mainly comprises the following substeps:
step1: and determining a model range. According to the topography and topography in the research area, river water system, maximum flood level of the analysis scheme, embankment and other conditions.
Step2: and (5) data processing. And processing the data of the contour line, the DEM, the river cross section bottom elevation, the river shoreline, the house contour and the like of the calculated area, so as to meet the modeling requirement.
Step3: meshing. And adopting SMS (Surface Water Modeling System, surface water modeling simulation software) software to conduct mesh subdivision on a research area, wherein a river channel adopts quadrilateral meshes for subdivision, and two banks of the river channel adopt triangular meshes for subdivision. Local encryption is carried out in key areas such as the vicinity of a river channel, outlines and boundaries are set on water-blocking buildings such as houses and bridges, encryption grids are arranged in the water-blocking buildings, and other areas are controlled relatively sparsely.
Step4: and (5) elevation correction. And importing the grid file data, checking interpolation topography, and correcting special topography and incorrect topography. Special terrains include linear ground features, lake waters, water passing culverts, and the like. For linear ground objects such as railways, highways, dykes and the like in the protection area, the grid topography can reflect the water blocking effect of the linear ground objects through the correction of the grid node elevation.
Step5: a boundary is set. The upper boundary control section of the setting model is set as a flow boundary, and the lower boundary outlet section is set as a water level boundary. The flow boundary is the designed flood process under different frequencies, and the water level boundary is the river bottom elevation value.
Where flow boundaries generally refer to water flow input or output points defined in the model for simulating the process of water flow in and out. The setting of the flow boundaries may vary depending on the purpose of the flood model. In general, the upstream boundaries will typically be set to design flood flows at different frequencies, as rainfall and snow thawing conditions in the upstream basin may lead to different flood conditions. Upstream may often need to consider design floods to ensure that the water flow simulation covers the possible extremes. The downstream boundary may be set as the actual water flow outlet or connected body of water, so the water level boundary may be used to simulate the effect of water level.
The water level boundary generally refers to the elevation of the water level specified in the model for simulating the water level change of a river or body of water. These boundaries are typically used to determine the impoundment, flood discharge or withdrawal process of the water flow. Typically, the downstream boundaries are easier to set as water level boundaries, as they are typically used to simulate water level changes in rivers, as well as flood conditions with surrounding areas. Upstream boundaries may then be of greater concern for flows because they are affected by upstream rainfall and hydrologic conditions, often requiring more flood simulation.
Step6: setting the roughness. The topography and topography of different areas such as river course, farmland, residential land, woodland, grassland are different, in order to guarantee model calculation accuracy, need set up the roughness of different land utilization types respectively, model roughness is between 0.025~ 0.1. In addition, in order to simulate the influence of the building on the evolution process in the flood evolution process, under the condition that grid scale restriction and collected topography are difficult to accurately represent the elevation of the building, a roughness increasing method is adopted for the building so as to achieve the outline of the water blocking effect of the building.
Among them, roughness (Roughness) is a physical property describing surface Roughness or friction characteristics. It is commonly used in the fields of fluid mechanics, engineering, and geographic information systems to describe the degree of resistance or friction of a surface or medium to the movement of a fluid (e.g., water, air).
Step7: and setting model parameters. Including calculating analog time periods, time steps, output result parameters, etc.
Step8: and (5) establishing a model. And establishing a two-dimensional hydrodynamic model by adopting the configured grid, the configured parameters, the configured roughness, the configured boundary and other configuration conditions.
And storing the numerical result calculated by the HydroMPM_FloodRisk flood analysis model under a working catalog OUT2D folder, sequentially named as C0 times csv according to the time sequence, and generating an intermediate result csv file of 72 times in total by using whole field flood if the calculation time length of each frequency flood is 6 hours and the calculation step length is 5 minutes. Wherein, the frequency, i.e. the reproduction period, refers to how many years are met, also called reproduction interval or reproduction period, is an important concept in statistics and meteorology, and is used for describing the frequency or probability of occurrence of a specific event (such as flood, rainfall, earthquake, etc.); it refers to the average time interval during which a certain event reaches or exceeds a certain threshold value within a certain time frame.
The hydrodynamic characteristic parameters of all grids at the current moment are recorded in each csv file, and the hydrodynamic characteristic parameters comprise grid numbers, grid center point coordinates, water level, water depth, flow velocity, flow direction and other information.
The original csv format result has large data size and is quite fragmented, and a scalar method is adopted for water body numerical simulation, so that water level and water depth values are generally mapped through colors. Therefore, in this embodiment, a file read-write Python script may be written, the program flow is shown in fig. 2, the intermediate result csv file at each moment is regarded as a frame in the animation, other useless field information in the csv file is removed, and only water level and water depth parameters are reserved in a flood calculation result, and the result is stored in a compact matrix form. And traversing all csv files under the OUT2D result folder, extracting and generating a time sequence-grid water depth matrix and a time sequence-grid maximum water level array, wherein the result is shown in figure 3.
Wherein the time sequence-grid water depth matrix stores the water depth value of each grid unit at each moment; the time series-grid maximum water level array stores the water level elevation values of the whole grid primitives at each moment.
The amount of data is greatly reduced from the data plane. For example, a flood analysis calculation result is obtained, 48419 grids are split in total, 72 times are calculated, the size of a csv file of each intermediate result is 10.4M, the final output result file is 1.16G, through the processing steps, based on a Python 3.10 environment, an office notebook computer end with a 16G memory conventionally configured is stored under an Intel i5-9300H CPU 8 core processor with a main frequency of 2.4GHz, script processing time is 21.8s, the size of a final time sequence-grid water depth matrix file is 19.3M, and a data extraction compression ratio is 1.62%.
For a modeling grid file, SMS software is generally adopted to conduct grid subdivision on a research area, wherein a river channel is subdivided by adopting quadrilateral grids, and two sides of the river channel are subdivided by adopting triangular grids. Local encryption is carried out in key areas such as the vicinity of a river channel, outlines and boundaries are set on water-blocking buildings such as houses and bridges, encryption grids are arranged in the water-blocking buildings, and other areas are controlled relatively sparsely. The modeling grid file comprises triangle grids and quadrilateral grids, the grid file is split and can be derived into a shp format, and a layer under a plane coordinate system (such as Gaussian grid projection) used in general modeling is formed, but in WebGIS application, a vector file is the most general WGS84 coordinate system GeoJSON format, and JSON data is high in human readability and convenient for network transmission. The grid layer can be projected to a WGS84 coordinate system by using an ArcGIS reprojection toolbox, and then exported into a GeoJSON format by using a conversion toolbox.
Referring to fig. 4, since the GeoJSON file has a closure to the surface layer structure representation, the last point must be the same as the first. Therefore, one triangular mesh element is composed of 4 points, and one quadrangular mesh element is composed of 5 points. The primitive which is the most basic in the WebGL bottom layer is a triangle, and the expressed triangle consists of a vertex and an index. The first 4 points are uniformly taken for each grid element, and the quadrangle can be formed by two triangles, and the triangle can be regarded as a 'degenerated' quadrangle with the 4 th point and the 1 st point overlapped. Finally, the quadrilateral grids and the triangular grids can be unified into two triangular grids at the rendering level.
2. Custom WebGL water grid primitive
In computer graphics, a primitive is a set of finite or infinite points, a three-dimensional visual graphic is drawn by combining innumerable primitives or points, and the basic primitive of WebGL contains points, line segments and triangles, which are the smallest units of WebGL graphic rendering. Rendering a triangle primitive from raw data to on-screen results requires a series of pipelining operations on the GPU, referred to as a rendering pipeline, whose graphics rendering typically comprises four steps: vertex processing, clipping, primitive assembling, rasterizing and primitive processing, and finally displaying a real scene. The hydrodynamic modeling is based on triangle or quadrilateral grids, the analysis shows that the modeling grids can be uniformly expressed as triangle grids in storage, the graphic rendering is also based on triangle grids, the connection between result data and an API interface of the WebGL is established, the modeling grids are converted into self-defined WebGL water body grid primitives, grid water depth values are mapped into primitive vertex colors, and the underlying principle based on the construction of the WebGL framework water body grids is shown in figure 5.
Cesium. Js is the most popular open-source WebGIS two-dimensional three-dimensional integrated virtual earth engine (i.e. a visual rendering library at the webpage end). The system can provide powerful map data display and related operation functions for users without any browser plug-in support, and is an advanced encapsulation library of the WebGL rendering engine on geographic information data display application.
The Cesium architecture includes:
(1) Core layer: it is the bottom layer in the Cesium architecture and contains some common functions such as coordinate transformation, map projection, geometric algorithms, etc. that are usually related to mathematics.
(2) Renderer layer: the renderer layer encapsulates and abstracts functions provided by the WebGL, converts three-dimensional data in the computer to a two-dimensional display plane, and displays the three-dimensional data to a user after rendering by the renderer.
(3) Scene layer: the method is built on the core layer and the rendering layer, and can provide high-level earth map display functions, such as switching between 2D, 2.5D and 3D, creating geometric elements such as polygons and text labels.
(4) Dynamic scene layer: the dynamic scene layer is the highest layer of a Cesium system architecture, supports a data-driven visualization technology, creates a dynamic object by analyzing vector data such as GeoJSON and the like, and renders each frame of scene of the dynamic object in real time by a visualization class so as to complete dynamic rendering of the whole scene.
Cesium provides a functional rich generic interface for controlling the behavior of cameras, layers and 3D objects. The view object Viewer (earth window) is the core of Cesium, and can be used for superposing various image terrains and layers. The entity class can be added with various geometric bodies, dotted lines, planes and the like, and can be provided with materials such as colors, pictures and the like. The primitive class is the bottommost interface in the interfaces disclosed by Cesium, and faces to the scene of high-performance customizable material coloring devices and static three-dimensional geometric objects. The primitive class decouples geometry from material appearance, which can be modified separately.
Under the browser/server architecture, the difficulty of flood evolution simulation is that the data size of the calculated result of the flood dynamics model is huge, and the interface provided by the advanced packaging engine cannot meet the dynamic and efficient rendering requirement of the browser end, so that the rendering efficiency is low. For example, although Cesium provides a quick construction and loading method for layers such as points, lines and planes, so that rich information data display is conveniently and quickly realized, the basic layer construction method can have the problems of data loading delay, scene interaction blocking, browser breakdown and the like when a large amount of data is loaded. WebGL can support browser-call GPU for data rendering acceleration, thereby enabling fast rendering of substantial amounts of data. After looking up the source codes in Cesium, the applicant finds that the basic geometric primitives can be imitated to customize the WebGL primitives, the geometry and the material appearance are customized, and the high-performance loading and displaying of the general data are realized by relying on the powerful and efficient data rendering capability of the WebGL, so that the problems are solved.
Therefore, referring to fig. 6, the embodiment initializes the custom WebGL water grid primitive call to create the grid primitive function, the primitive can be displayed by displaying the primitive function, the primitive is hidden by hiding the primitive function, the primitive height function is set, and the integral height of the primitive is set by the input time-series highest water level array, so that the rising and falling reflection flood of the water primitive is realized. And setting a primitive visibility function to judge whether the primitive is visible.
And setting the elevation parameters of the water level transmitted by the primitive height function so as to adjust the elevation values of the water grid primitives in the three-dimensional scene. The processing hydrodynamic modeling result outputs a maximum water level elevation sequence, water level parameters are transmitted in time sequence in the dynamic flood playing process, the elevation of the water body graphic element is dynamically changed, the rising and falling of the graphic element are realized, and the rising and falling of flood is simulated. The height Cheng Yuanyin of the selected maximum water level elevation as the primitive is that the modeling grid-to-water grid numerical simulation reflects mainly water depth, the two-dimensional hydrodynamic model input is typically a planar grid, the in-industry rendering process is also mostly static, and each grid color is changed over time to reflect the submerged water depth variation. The self-defined water body grid is positioned in a three-dimensional virtual water conservancy scene, a dynamic water level value is added, a dynamic flood evolution numerical simulation result is displayed from two dimensions of water depth and water level, a water body grid graphic element is lifted as a whole plane, the water body grid graphic element is tangential to the ground and a house, but generally the upstream topography is higher than the downstream, the lower-to-higher lifting is easy to cause the visual false result that water is submerged from the downstream to the upstream, the grid maximum water level value is taken as the overall height of the grid, the rationality of the expanding and retreating process is ensured, the grid with the water depth value is always positioned above the corresponding house or the ground, and the rendering result of the reverse common sense caused by the shielding of the plane grid is not caused.
Referring to fig. 7, the lifting of a water grid primitive in a three-dimensional scene may be considered as a translation up and down based on the grid primitive center point perpendicular to the earth's surface direction, but because of the WGS84 coordinate system (space coordinates are represented by (longitude, latitude, elevation) triples) most commonly used in 3 DGIS. However, since the height of the WGS84 coordinate system is defined to be vertical and downward and points to the gravity direction of the earth center, and is not vertical to the earth surface, the connection line of two points with different elevation values of longitude and latitude is not vertical to the earth surface in a microscopic specific scene, and the three-dimensional coordinate of the central point of the grid primitive is directly modified, and meanwhile, the whole oblique upward deviation is caused. To avoid the above problems in the graphical WebGL engine, a three-dimensional cartesian coordinate system is generally turned to a local coordinate system on northeast. And establishing a local coordinate system by taking the central point of the graphic primitive as an origin, carrying out translation transformation, and converting the local coordinate into a three-dimensional coordinate through inverse transformation between the local coordinate system and the three-dimensional Cartesian coordinate system. The process is mainly realized by arranging the primitive height function, the longitude and latitude position coordinates of the grid center are kept unchanged, the input water level elevation parameters realize one-dimensional translational motion in the vertical earth surface direction, the primitives themselves are provided with model matrixes, the three-dimensional space position information is represented, and the object (or primitive) translation is realized by adopting homogeneous coordinate translation transformation matrix multiplication in the graphics.
The core method in the self-defined WebGL water body grid primitive class of the embodiment is to update primitive functions, and a time sequence dynamic update mechanism is realized. Looking up the Cesium source code, finding that the custom primitive class prototype chain must have an updated primitive function, the updated primitive function ensures that the primitive and the whole page are synchronously updated together, if the primitive is to be dynamically changed, the reconstructed primitive is destroyed in the function, or the state and the parameters are updated, and the screen flashing phenomenon is not caused. The custom WebGL water body grid primitive class is merged into an update queue of the whole scene earth window object only when the primitive exists and is visible, so that the state of the custom WebGL water body grid primitive is changed immediately only by transmitting a new color array or water level value.
The large-scale hydrodynamic result data processing finally extracts three types of information, namely modeling the split grid geometry and storing the split grid geometry in a GeoJSON format. And secondly, a time sequence-grid water depth matrix is used for storing water level information of each grid at each moment. And finally, storing a time sequence-water level array, and storing the whole maximum water level elevation of the water body grid graphic element at each moment. The time sequence-grid water depth matrix is used for storing the water depth value of each grid at each time of the whole field flood animation, when one time animation is played, one row of the water depth value is taken out to map the water depth value to a color array, and a graphic element function is updated through a graphic element self-defined dynamic updating mechanism, so that each grid color of the water body grid graphic element is refreshed. The color array stores triangle primitive vertices rgba (red, green, blue, aphla, red, green, blue transparency four channel color) color values. There are two mapping methods from the water depth value to the rgb a color, linear interpolation and preset interval. Alternatively, because the legend in a general flood analysis system is segmented, a preset interval method can be adopted, the water depth value is divided into a segment interval at intervals of 0.5 m, and rainbow color bars are adopted for segmentation. The determination that the current water depth value falls within that interval is mapped to the corresponding color of the color band.
Through comparison and verification, the sequence of the GeoJSON grid elements is consistent with the grid sequence in the grid water depth matrix. Thus, one element in the mesh layer is unified to consist of two triangular meshes, whether triangular meshes or quadrilateral meshes. Assuming that the grid element is the ith grid element, taking out 4 coordinate points, sequentially determining 4i,4i+1,4i+2, 4i+3 according to the index sequence in a clockwise direction, determining a lower vertex array and an index array, simultaneously endowing the 4 vertices with corresponding same color values after the water depth value of the grid in the grid matrix is subjected to water depth color mapping, traversing all grids to obtain a color array, obtaining the vertex array and the index array, and obtaining the input parameters of a server through an Ajax interface technology in actual application to form the custom WebGL water body grid element.
3. Dynamic efficient three-dimensional flood evolution simulation
In order to realize more dynamic and efficient flood evolutionary simulation in a three-dimensional scene, the front-end optimization loading technology is used for reference, the experiment is repeated, three optimization ideas are comprehensively obtained, and the rendering efficiency is further greatly improved when the three-dimensional scene is comprehensively applied to the flood evolutionary simulation. The method comprises the following steps:
the WebWorker technology supports a framing animation, the three-dimensional flood evolution simulation is numerical simulation, the calculation result of each moment of hydrodynamics is regarded as one frame in the animation, because the data size of the grid water depth of each frame is large, the JS engine at the browser end is single-threaded, when the playing speed is set too fast and the time interval is set small, the browser is not enough to read data, the redrawing page still can cause blocking, as shown in fig. 8, the WebWorker solves the problem by introducing a multi-thread-like mechanism, and a new thread is opened up by loading a program file for processing and preparing data by using branch threads in the main thread of the current program, so that the execution effect of the browser is achieved without blocking each other.
Further, for the animation playing strategy, the interactive operation optimization is performed. The method aims at reducing the page drawing times as much as possible, reducing the performance loss caused by the state switching of the browser bottom program and reducing the data volume submitted to the GPU. Setting a user operation monitor to realize page operation state monitoring, suspending playing when moving the page, continuing after the page is stable, and reducing redrawing.
Preferably, aiming at the application layer optimization, the method belongs to loading performance optimization and rendering frame rate optimization, and on the data layer, post-processing codes can be further written to extremely compress hydrodynamic numerical result data into gzip format; then, at the server, using the NGINX network server, starting supporting gzip, further reducing the data volume, and the compression ratio is 10: about 1, the network transmission speed can be greatly optimized, and the data is transmitted to a browser end and then automatically decoded; and finally, suggesting the user browser to start hardware acceleration at the client, and performing GPU setting tuning. gzip is a data compression format, the compression efficiency is extremely high, NGINX is the most mainstream network server at present, gzip file transmission is supported, automatic decompression is carried out on the server, network transmission bandwidth can be greatly saved, network transmission time is reduced, and front-end visual rendering efficiency is optimized. After the steps, starting the browser frame rendering statistical information (Frame Rendering Stats, frame rendering state parameters), wherein the page full frame rate is 60FPS, and the flood evolution Cheng Zhen rate is always kept at 45-55 FPS through testing, so that the flood evolution dynamic high-efficiency display function is realized.
[ concrete application example ]
The applicant selects a three-dimensional flood scene to be previewed, takes a plurality of towns in a certain county as objects, firstly collects basic data, monitoring data, geospatial data and water conservancy service data required by constructing a twin water conservancy scene data base plate to construct a river basin data base plate, processes the data by means of interfaces such as terrain, images, vectors, geometry, models and the like provided by a three-dimensional virtual earth engine Cesium.js, designs a pattern, designs a display level, and displays a virtual scene from thick to thin and from whole to local in a grading manner. By using the three-dimensional flood high-speed simulation method based on WebGL, the flood submerging process under six working conditions in different reproduction periods is intuitively displayed, and by setting different scenes, the risk assessment of mountain torrent disasters is carried out, and the risk hidden danger is identified and checked. Mountain torrent previewing generally has two forms, namely field flood control exercise and digital previewing based on a visual platform. The digital previewing can set the rainstorm flood with different rainfall, namely, the flood development situation under different situations such as bridge water blocking and choking, main tributary converging and jacking and the like, grasp the flood evolution trend and the range of a flood dangerous area, and identify and search the flood hidden danger area so as to plan the danger avoiding transfer route and the temporary placement point in advance. The core functions of the method comprise the following steps:
The scene switching function enables the platform to switch smoothly in three scenes of large, medium and small, and the situation of the under-pad surface of the key city town ballasting area of J county is displayed from macroscopic to fine by combining administrative division data, river basin water system data, place name marking data, inclination measurement model and other geographic space data. The large scene is an administrative division of A, and the position information of a research area on a map and the basic information of watercourses such as water systems, stations and the like are displayed. The middle scene is B administrative boundaries, water system and small river basin layers and the distribution information of important town residents in J county. The small scene shows urban inclined photographic data, high-precision terrain and digital orthophoto data acquired by unmanned aerial vehicle mapping, the real water conservancy scene is restored, simulation is supported, and specific disaster prevention objects are aimed. The data is processed and then is smoothly loaded on the Web end, a fine three-dimensional real model of ground feature elements such as houses, roads and river channels is displayed, and POI (point of interest) place name label information is added to determine the azimuth, so that the communication is convenient.
And the flood deduction function is used for analyzing and calculating a plurality of sets of hydrodynamic schemes in the early stage, and rendering the flood evolution numerical result to a three-dimensional platform for display after processing. The pull-down can select six working conditions of 5 years, 10 years, 20 years, 50 years, 100 years and 300 years of a single town. By means of a three-dimensional GIS visualization technology in a digital twin river basin simulation engine, a water conservancy scene is digitalized, typical heavy rain flood inundation conditions of a flood bank are intuitively and simulated, typical heavy rain city town flood inundation conditions under different reproduction periods are simulated, flood development situations are known through preset scenes, possible risk points and weak links of flood disasters are intuitively displayed, and accurate flood protection decisions of mountain torrents are supported. Omnibearing and multilevel auxiliary J county important town disaster deduction, danger investigation, working out danger avoidance transfer plans and other businesses.
The GIS measurement plotting tool analyzes and researches the judging function, and meanwhile, the system is also provided with a basic GIS space analysis function such as measurement ranging and marking plotting assisted drainage basin flood control situation analysis and decision consultation.
The risk avoidance analysis display function is used for automatically generating a plan through analysis of a previewing result, obtaining risk points, risk areas and risk avoidance route information through a large number of historical disaster investigation and model trial calculation before, determining flood risk areas of each urban town by combining GIS analysis tools and manual research and review, and planning risk avoidance transfer routes by touching hidden danger points in advance and analyzing risk avoidance points.
The thematic map shows the function, after each set of flood technical scheme is finished, the platform will provide reasonable risk avoidance route for selection, and after flood inundation analysis, according to industry specifications and technical requirements, the flood risk map is produced and updated and comprises six thematic maps of maximum water depth map, maximum water map, maximum flow rate map, flood arrival time map, flood inundation duration map and maximum inundation range map.
In summary, the three-dimensional flood evolutionary simulation method based on the WebGL disclosed by the embodiment of the invention is particularly a three-dimensional flood evolutionary high-speed simulation method based on the WebGL technology for numerically simulating massive result data for a two-dimensional hydrodynamic model. The method combines the most popular 3D virtual earth engine Cesium. Js to realize the self-defined WebGL water body grid primitive, and provides a set of flood evolution high-speed simulation method from data processing, compressed storage, network transmission optimization and dynamic high-efficiency rendering, and the core content comprises the following steps:
Step S1, hydrodynamic data processing, which comprises the following steps:
step S11, generating a grid file based on DEM data aiming at the sublevel of the modeling area river basin in a plane coordinate system, wherein the grid file comprises triangular grids and quadrilateral grids; wherein, the river course adopts quadrilateral mesh to split, two sides of the river course adopts triangle mesh to split; the grid points of each grid carry terrain elevation information.
S12, inputting the split grid file and working condition information comprising interval rainfall and upstream and downstream water flow boundary conditions into a two-dimensional hydrodynamic model, and extracting water depth and water level information of each grid changing along with time from a model calculation output result.
Step S13, projecting the grid layer with the obtained water depth and water level information to a WGS84 coordinate system by using an ArcGIS heavy projection toolbox, and exporting the grid layer into a GeoJSON format by using an ArcGIS format conversion toolbox; taking the grid hydraulics parameter file at each moment output in the two-dimensional hydrodynamic model numerical calculation result as a frame, extracting water depth data frame by frame, writing the water depth data into a time sequence-grid water depth matrix, wherein each row represents the water depth values of all grids at one moment; meanwhile, extracting maximum water level data writing time sequence-grid maximum water level array frame by frame; the grid hydraulics parameter file contains the central point coordinates, river bottom elevation, water level, water depth, flow rate and flow direction information of each grid at the current moment.
S2, constructing a primitive bottom layer principle based on a 3DGIS engine Cesium. Js and WebGL, customizing a water body grid Mesh primitive, decomposing a quadrilateral grid into two independent triangular grids to obtain the number, vertex array and index array of each triangular grid, and endowing different water depth values to the same vertex in different triangles; and defining the appearance of the material by using a shader to display the grid color.
The appearance of the custom material can dynamically set the color of each triangular patch in the graphic primitive. Appearance materials determine how each pixel of a primitive is rendered, and during rendering, vertex shaders and fragment shaders are typically programmable, writing GLSL code (OpenGL Shading Language ), allowing developers to write custom shader programs to achieve various visual effects. This flexibility enables a variety of advanced graphic effects such as lighting, shading, texture mapping, water effects, etc. Vertex shaders and fragment shaders are very important components in graphics rendering, which allow developers to fully control the rendering flow, thereby creating high quality graphics and visual effects. The vertex shader is primarily responsible for processing the computation of each input vertex. It can transform and process the position, color, normal, etc. of the vertex. In general, the main task of vertex shaders is to transform vertex positions in the local coordinate system (object space) of the model into positions in the world coordinate system, camera coordinate system or clipping coordinate system for subsequent projection and viewport transformation. This is also where model transforms, camera view transforms, and projective transforms are implemented. The fragment shader is responsible for calculating the final color value of each fragment (pixel) inside each primitive (typically a triangle). This includes the calculation of effects of illumination, texture mapping, shading, transparency, etc. The fragment shader determines the color of the pixel that is ultimately rendered on the screen.
And S3, setting a timer, coloring and updating each grid of the Mesh primitive frame by frame according to the material appearance and the color value mapped by the water depth value of each triangular grid, taking the maximum water level value in all grids at the same time as the whole height of the Mesh primitive, and forming a frame animation so as to realize dynamic flood evolution numerical simulation.
Noteworthy are: in the above step, the grid is a concept of hydraulic modeling, the primitive is a concept inside the engine, and finally, the two are mapped relations. The engine is present as a whole and is called a "Mesh primitive".
Example two
Corresponding to the embodiment of the method, the embodiment discloses a three-dimensional flood evolutionary simulation system based on WebGL, which comprises a browser node and a server node, wherein each node respectively comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, and the server node interacts with the corresponding browser node to respectively realize the corresponding series of steps in the method of the embodiment by executing the corresponding computer program.
In summary, the method and system disclosed by the embodiment of the invention have at least the following beneficial effects:
1. And screening and extracting elevation information and water depth water level information corresponding to the grid from the two-dimensional hydrodynamic model numerical simulation massive result data to perform three-dimensional flood evolution based on the WebGL technology, and combining a 3D virtual earth engine Cesium.js to realize self-defining WebGL water grid primitives, so that the high-speed simulation of the flood evolution process is facilitated by combining data processing, compressed storage, network transmission optimization and dynamic efficient rendering. The three-dimensional flood evolution high-speed simulation of 15 ten thousand mesh quantity can be supported at the highest, and the rendering efficiency at the browser end is greatly improved; and the frame rate of the picture of the browser is continuously kept above 50FPS, which is far higher than the technical index requirement of 24FPS in the moving process of the scene picture in section 6.1 of the digital twin-basin visual model Specification (trial) issued by the water conservancy division. Meanwhile, the flood evolution process also supports progress bar dragging fast forward and rollback viewing. The requirements of the digital twin river basin on the dynamic, efficient and smooth rendering of the flood evolution simulation are fully met. The response and rendering speed of the Web-end three-dimensional flood evolution simulation are greatly improved, and the method is suitable for popularization.
2. The water body Mesh primitive is customized, the quadrilateral Mesh is decomposed into two independent triangular meshes, the number, the vertex array and the index array of each triangular Mesh are obtained, and the same vertex can be endowed with different water depth values in different triangles. By the method, the relation between the water depth and the water level based on the result data of the hydrodynamic model and the API interface of the WebGL is established, the modeling grid is converted into a custom WebGL water body grid primitive (the same as the custom water body grid primitive), and the grid water depth value is mapped into the primitive vertex color. Further, when playing a moment animation, one row of animation is taken out to map the water depth value to a color array, and each grid color of the water body grid primitive is refreshed through a primitive self-defined dynamic updating mechanism. And different water depth values can be given to the same vertex in different triangles, so that the technical prejudice that the color assignment of the pixel points at the same position can only be unique is overcome, and in the display process, only the color values corresponding to the water depths of the vertex with the same coordinate in the different triangles are overlapped in a traditional mode, and the reliability of data display can be ensured. The hydrodynamic modeling mesh file will typically be a triangle mesh and a quadrilateral mesh at the same time, the quadrilateral may be composed of two triangles, which may be considered as a "degenerate" quadrilateral with the 4 th and 1 st points coincident. Finally, the quadrilateral grids and the triangular grids can be unified into two triangular grids at the rendering level. The self-defined water body grid primitive method has good visual rendering compatibility for different hydrodynamic force numerical calculation results.
3. The grid element of the water body is lifted as a whole plane, which can cause tangent to the terrain and the house, but generally the upstream topography is higher than the downstream, and the lifting from low to high easily causes the visual incorrect result that water is submerged from the downstream to the upstream.
The above description is only of the preferred embodiments of the present invention and is not intended to limit the present invention, but various modifications and variations can be made to the present invention by those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (8)
1. The three-dimensional flood evolution simulation method based on WebGL is characterized by comprising the following steps of:
step S1, hydrodynamic data processing, which comprises the following steps:
step S11, generating a grid file based on DEM data aiming at the sublevel of the modeling area river basin in a plane coordinate system, wherein the grid file comprises triangular grids and quadrilateral grids; wherein, the river course adopts quadrilateral mesh to split, two sides of the river course adopts triangle mesh to split; the grid points of each grid carry terrain elevation information;
S12, inputting the split grid file and working condition information comprising interval rainfall and upstream and downstream water flow boundary conditions into a two-dimensional hydrodynamic model, and extracting water depth and water level information of each grid changing along with time from a model calculation output result;
step S13, projecting the grid layer with the obtained water depth and water level information to a WGS84 coordinate system by using an ArcGIS heavy projection toolbox, and exporting the grid layer into a GeoJSON format by using an ArcGIS format conversion toolbox; taking the grid hydraulics parameter file at each moment output in the two-dimensional hydrodynamic model numerical calculation result as a frame, extracting water depth data frame by frame, writing the water depth data into a time sequence-grid water depth matrix, wherein each row represents the water depth values of all grids at one moment; meanwhile, extracting maximum water level data writing time sequence-grid maximum water level array frame by frame; the grid hydraulics parameter file comprises center point coordinates of each grid at the current moment, river bottom elevation, water level, water depth, flow rate and flow direction information;
s2, constructing a primitive bottom layer principle based on a 3DGIS engine Cesium. Js and WebGL, customizing a water body grid Mesh primitive, decomposing a quadrilateral grid into two independent triangular grids to obtain the number, vertex array and index array of each triangular grid, and endowing different water depth values to the same vertex in different triangles; defining the appearance of the material by using a coloring device, and displaying the grid color;
And S3, setting a timer, coloring and updating each grid of the Mesh primitive frame by frame according to the material appearance and the color value mapped by the water depth value of each triangular grid, taking the maximum water level value in all grids at the same time as the whole height of the Mesh primitive, and forming a frame animation so as to realize dynamic flood evolution numerical simulation.
2. The method according to claim 1, further comprising, in generating the mesh file in step S11: and carrying out local encryption on the partial area, carrying out relative coefficient control on the partial area, and setting a boundary for the outline of the water-blocking building.
3. The method according to claim 1 or 2, characterized in that during the data processing of the two-dimensional hydrodynamic model, further comprising: and carrying out elevation correction, setting boundary and roughness and configuring model parameters, wherein the two-dimensional hydrodynamic model adopts a HydroMPM_FloodRisk flood analysis model.
4. The method of claim 1, wherein the creating MeshPrimive function is called to define the WebGL water body grid primitive, the primitive is displayed through a showy function, the primitive is hidden through a hide function, the setHeight function sets the whole height of the primitive through an input time sequence highest water level array, and whether the primitive is visible is judged through an isVicable function; and in the rendering process, further comprising: and the browser calls the GPU to accelerate data rendering, and the update function realizes a time sequence dynamic update mechanism.
5. The method of claim 1, wherein during the processing of the framing animation, webWorker technology is used to load a js file in the current js main thread using a worker class to open up a new thread.
6. The method as recited in claim 1, further comprising:
at the data level, the hydrodynamic numerical result data is extremely compressed into a gzip format by writing post-processing codes; correspondingly, an NGINX network server supporting gzip is used at the server side, so that the data is transmitted to the browser side and then automatically decoded.
7. The method as recited in claim 1, further comprising:
and for the animation playing strategy, the user operation monitor is set to realize the page operation state monitoring, when the mobile page is monitored, the playing is paused, and after the page is stable, the playing is continued to reduce redrawing.
8. A WebGL-based three-dimensional flood simulation system comprising browser nodes and server nodes, each node comprising a memory, a processor and a computer program stored on the memory and executable on the processor, respectively, characterized in that the server nodes interact with corresponding browser nodes to implement the method of any of the preceding claims 1 to 7, respectively, by executing corresponding computer programs.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311445204.1A CN117173369B (en) | 2023-11-02 | 2023-11-02 | WebGL-based three-dimensional flood evolution simulation method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311445204.1A CN117173369B (en) | 2023-11-02 | 2023-11-02 | WebGL-based three-dimensional flood evolution simulation method and system |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117173369A CN117173369A (en) | 2023-12-05 |
| CN117173369B true CN117173369B (en) | 2023-12-29 |
Family
ID=88937898
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311445204.1A Active CN117173369B (en) | 2023-11-02 | 2023-11-02 | WebGL-based three-dimensional flood evolution simulation method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117173369B (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108021780A (en) * | 2018-01-24 | 2018-05-11 | 国电南瑞科技股份有限公司 | A kind of mountain torrents dynamic emulation method based on random unstrctured grid model |
| CN108062453A (en) * | 2018-01-12 | 2018-05-22 | 河南省水利勘测设计研究有限公司 | Water Conservancy Information system flood efficient simulation and high Visual Dynamic methods of exhibiting true to nature |
| CN111784833A (en) * | 2020-06-23 | 2020-10-16 | 长江空间信息技术工程有限公司(武汉) | WebGL-based flood evolution situation three-dimensional dynamic visualization display method |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6791559B2 (en) * | 2001-02-28 | 2004-09-14 | 3Dlabs Inc., Ltd | Parameter circular buffers |
| EP3268938A1 (en) * | 2015-03-12 | 2018-01-17 | Happy L-Lord AB | System, method and device for three-dimensional voxel-based modeling |
-
2023
- 2023-11-02 CN CN202311445204.1A patent/CN117173369B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108062453A (en) * | 2018-01-12 | 2018-05-22 | 河南省水利勘测设计研究有限公司 | Water Conservancy Information system flood efficient simulation and high Visual Dynamic methods of exhibiting true to nature |
| CN108021780A (en) * | 2018-01-24 | 2018-05-11 | 国电南瑞科技股份有限公司 | A kind of mountain torrents dynamic emulation method based on random unstrctured grid model |
| CN111784833A (en) * | 2020-06-23 | 2020-10-16 | 长江空间信息技术工程有限公司(武汉) | WebGL-based flood evolution situation three-dimensional dynamic visualization display method |
Non-Patent Citations (2)
| Title |
|---|
| Mesh grid stability and its impact on flood inundation through (2D) hydrodynamic HEC-RAS model with special use of Big Data platform—a study on Purna River of Navsari city;Azazkhan Ibrahimkhan Pathan 等;《ArabianJournalofGeosciences》;第628-659页 * |
| 双层异步迭代洪水演进模拟算法_;刘修国 等;《武汉大学学报 信息科学版》;第41卷(第12期);第1570-1576页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117173369A (en) | 2023-12-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111784833B (en) | Flood evolution situation three-dimensional dynamic visualization display method based on WebGL | |
| Mahdavi-Amiri et al. | A survey of digital earth | |
| US9286712B2 (en) | System and method for approximating cartographic projections by linear transformation | |
| KR100915209B1 (en) | Automatic Modeling And Navigation System for Solid Builing Plane And Internal in Base of XML, And Method Thereof | |
| CN110246220A (en) | A kind of three-dimensional tube platform construction method, system, device and medium based on GIS | |
| Urech et al. | A simulation-based design framework to iteratively analyze and shape urban landscapes using point cloud modeling | |
| Bishop et al. | Linking modelling and visualisation for natural resources management | |
| CN113750516A (en) | Method, system and equipment for realizing three-dimensional GIS data loading in game engine | |
| Kumar et al. | Dynamic 3D visualization of floods: case of The Netherlands | |
| CN112860839A (en) | Water environment quality real-time monitoring method and device based on Unity3D | |
| CN110400366B (en) | Real-time flood disaster visualization simulation method based on OpenGL | |
| CN113806654A (en) | Virtual space system based on geographic information | |
| Zhang et al. | Three-dimensional waterway system for ship navigation based on integrated virtual waterway and flow simulation | |
| Kamat et al. | Large-scale dynamic terrain in three-dimensional construction process visualizations | |
| CN117173369B (en) | WebGL-based three-dimensional flood evolution simulation method and system | |
| Jang et al. | View-Dependent Multiresolution Splatting of Non-Uniform Data. | |
| Kehl et al. | Interactive simulation and visualisation of realistic flooding scenarios | |
| CN110232846A (en) | A kind of assault boat drive simulating method, system and relevant apparatus | |
| Giannakidis et al. | 3D photorealistic scientific visualization of tsunami waves and sea level rise | |
| JP3940834B2 (en) | Analysis work support CAE device using numerical map information data | |
| Kelly et al. | An interactive system for procedural city generation | |
| Cornel et al. | Integrated Simulation and Visualization for Flood Management | |
| Mantler et al. | GEARViewer: A state of the art real-time geospatial visualization framework | |
| Louis | Application of Augmented Reality and Tangible Interfaces to Minimize Work Zone Effects on Mobility through Participatory Planning | |
| Schilling | 3D Spatial Data Infrastructures for Web-Based Visualization |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |