CN114549714A - WebGL-based rendering method for three-dimensional wind graph visualization - Google Patents

Abstract

The invention discloses a rendering method based on WebGL three-dimensional wind graph visualization, which specifically comprises the following steps: step 1, acquiring grid data of a wind field; step 2, encoding the grid data of the wind field obtained in the step 1 into wind intensity texture data; step 3, sampling the wind intensity texture data obtained in the step 2 according to the grid points corresponding to the positions, decoding the wind intensity data, calculating corresponding color values and generating a wind field distribution diagram; step 4, traversing the particle information list, acquiring the wind direction according to the particle flow position, and calculating the particle position at the next moment; step 5, traversing the particle information list, and calculating the color transparency of each particle of the particle flow; and 6, updating the particle position and color transparency memory to generate a wind direction streamline. The invention solves the problems of unsatisfactory rendering effect and low rendering efficiency of the existing rendering method.

Description

WebGL-based rendering method for three-dimensional wind graph visualization

Technical Field

The invention belongs to the technical field of weather visualization methods, and relates to a rendering method based on WebGL three-dimensional wind graph visualization.

Background

In the geographic information system (GIS for short) industry, time-varying and multi-scale data visualization is always a basic characteristic of geospatial information. In recent years, typhoon and tsunami cause great loss to human beings, and the multi-scale change characteristics of a wind field have profound influence on meteorological change, on one hand, grid data of the wind field cannot show wind direction change clearly and intuitively, on the other hand, real-time scheduling and rendering of the data occupy more resource space, great pressure is caused to a system, how to generate an effective and clear displayed wind direction graph is generated, and meanwhile, great load is not caused to the system, so that the problem of urgent need to be solved is solved.

In order to solve the contradiction between the non-intuitive performance, low rendering efficiency and actual requirements of the traditional three-dimensional wind direction graph, two conventional solutions are provided, one of the solutions utilizes a Canvas rendering technology to generate random wind direction particle flow and a wind distribution graph in a map visible range, dynamic wind direction change and distribution are visually displayed, and the three-dimensional wind direction visualization solution is solved to a certain extent, but in essence, the three-dimensional wind direction visualization solution is based on two-dimensional plane rendering, when a visual angle is changed, the wind direction graph can be cleared and re-rendered, real-time rendering cannot be performed, and multi-scale visualization cannot be met; and the second scheme is that on the basis of the first scheme, the drawn result is used as a texture to be rendered in a WebGL mode, the rendering efficiency is improved to some extent, but the rendering effect is poor, the problems exist at the same time, and the two schemes cannot meet the requirements.

Disclosure of Invention

The invention aims to provide a rendering method based on WebGL three-dimensional wind graph visualization, and solves the problems of unsatisfactory rendering effect and low rendering efficiency of the existing rendering method.

The technical scheme adopted by the invention is that the rendering method based on the WebGL three-dimensional wind graph visualization specifically comprises the following steps:

step 1, acquiring grid data of a wind field;

step 2, encoding the grid data of the wind field obtained in the step 1 into wind intensity texture data;

step 3, sampling the wind intensity texture data obtained in the step 2 according to the lattice points corresponding to the positions, decoding the wind intensity data, calculating corresponding color values and generating a wind field distribution diagram;

step 4, traversing the particle information list, acquiring the wind direction according to the particle flow position, and calculating the particle position at the next moment;

step 5, traversing the particle information list, and calculating the color transparency of each particle of the particle flow;

and step 6, updating the particle position and color transparency memory to generate a wind direction streamline.

The invention is also characterized in that:

the specific process of the step 1 is as follows:

step 101, acquiring wind field grid data, including data area range, grid precision, horizontal grid points, vertical grid points, horizontal wind direction grid point data, vertical wind direction grid point data, horizontal wind strength grid point data and vertical wind strength grid point data;

102, creating a particle information storage list, a particle flow list and a color transparency list according to the set particle number and the set particle length, simultaneously creating a particle position memory, an index memory and a color transparency memory respectively, and creating a particle flow color value template array according to the set length and the set step length of a color template;

step 103, randomly generating initialized particles in a visible region range, wherein particle information comprises an initial position, an age and a direction, calculating particle intensity according to a grid position where the particles are located, rounding down intensity data to be used as a color value template index, acquiring a particle color value, storing the particle color value in a particle information list, and adding the position and the color value into a particle flow list;

and 104, creating a thread for calculating the color transparency of the particle flow, and putting the thread in a suspended state.

The step 2 specifically comprises the following steps:

step 201, respectively creating horizontal and vertical wind strength textures according to the range and precision of a data area;

and 202, encoding the horizontal wind intensity lattice point and vertical wind intensity lattice point floating point data into RGB format data, and respectively storing the RGB format data in the horizontal wind intensity texture and the vertical wind intensity texture.

The step 3 specifically comprises the following steps:

step 301, converting space coordinates corresponding to a data area in a view field range into longitude and latitude coordinates through a GPU slice source shader, calculating longitude and latitude coordinates of 4 grid points adjacent to the coordinates, and normalizing;

step 302, taking the adjacent grid point coordinates normalized in step 301 as texture coordinates, respectively sampling horizontal and vertical wind intensity textures, and decoding sampling results into wind intensity values of corresponding positions;

step 303, calculating wind intensity values of the 4 adjacent grid points influencing the position by using an inverse distance weighted interpolation algorithm according to the wind intensity values of the adjacent positions obtained in the step 302;

step 304, according to the wind intensity value calculated in step 303, setting a maximum influence value, an influence threshold value and color transparency, and calculating a color value of the position.

The step 4 specifically comprises the following steps:

step 401, calculating a space distance mapped in the vertical direction of the current visual angle according to the set particle pixel length;

step 402, traversing the particle information, if the age of the particle is larger than the set particle length, the particle dies, and repeating the step 103 to generate a new particle; if the particle age is less than the set particle length, the particles continue to grow;

step 403, respectively calculating 4 lattice point wind direction values of the adjacent horizontal and vertical directions of the particles according to the positions of the particles;

step 404, calculating the wind direction of the particles by using a bilinear interpolation algorithm, and normalizing;

step 405, calculating longitude and latitude values of particle deviation in frame time according to the unit wind direction value obtained in step 404 and the time difference of the previous frame and the next frame;

step 406, calculating the position of the next time according to the offset longitude and latitude values and the current particle position obtained in step 405, updating the current particle position in the particle information list, binding the particle color value in the position information component, storing the particle color value in the particle flow list, and adding 1 to the particle age.

The specific process of the step 5 is as follows:

restoring the thread state, traversing the particle information list, and acquiring a transparency list with the length L corresponding to the particles in the corresponding color transparency list; the transparency alpha is 0 when the index value k of the list is larger than the age of the particles, the transparency alpha is 255 when the index value k is equal to the age of the particles, and A is used when the index value k is smaller than the age of the particles_TAnd sequentially attenuating the transparency of the particles at intervals, and suspending the thread after the completion.

The specific process of the step 6 is as follows:

and repeating the step 4-5, and respectively updating the particle flow list data and the color transparency list data to the particle position memory and the color transparency memory to generate a wind direction streamline.

The invention has the beneficial effects that: the invention codes the wind intensity grid data into texture data, and through an inverse distance weighting algorithm and a GPU one-by-one source rendering method, and utilizes the parallel computing capability and real-time rendering capability of the GPU to carry out pixel-by-pixel sampling and coloring, improves the rendering efficiency and definition of the wind direction distribution diagram, meanwhile, combining with a vision field cutting technology, a horizontal cutting technology and a bilinear interpolation algorithm, generating random new particles and growing particles circularly and repeatedly, batch dynamic particle flow lines are formed in the visible area, and the multithreading technology is utilized to calculate the color transparency of each particle in the particle flow, improve the CPU calculation efficiency, enhance the visual reality and the third dimension of the wind field, and all the particle vertexes, the color transparency and the index memory are respectively merged, and the rendering times are reduced from thousands of levels to one batch, so that the effect of rendering the wind graph is improved, and the rendering efficiency is improved.

Drawings

FIG. 1 is a flow chart of a rendering method based on a WebGL three-dimensional wind graph visualization in the invention;

FIG. 2 is a longitude and latitude position diagram of particles in the rendering method based on WebGL three-dimensional wind graph visualization;

FIG. 3 is an effect diagram rendered by the rendering method based on the WebGL three-dimensional wind graph visualization.

Detailed Description

The present invention will be described in detail below with reference to the accompanying drawings and specific embodiments.

The rendering method based on the WebGL three-dimensional wind graph visualization comprises the following steps as shown in figure 1:

step 1, acquiring wind field grid data, including storage data area range, wind direction and wind intensity information;

step 101, acquiring wind field grid data, including a data region range R ═ i_min,j_min,i_max,j_max]Horizontal grid precision X_oVertical grid accuracy Y_oHorizontal grid number X_cVertical lattice number Y_cHorizontal wind direction lattice data X_dVertical wind direction lattice point data Y_dHorizontal wind intensity lattice data X_sVertical wind intensity lattice data Y_s；

102, creating a particle information storage list P, a particle flow list Q and a color transparency list A according to the set number of particles N and the set length of the particles L, and simultaneously creating a block of particle position memory M₁Index memory M₂And color transparency memory M₃And according to the set length T of the color template_lAnd step length T_sCreating a particle flow color value template array T, and increasing the uniform interval to 255;

103, randomly generating N initialization particles in the visible longitude and latitude area range, wherein the particle information comprises an initial position, an age and a direction, specifically, the age is a random integer between 0 and L, and the initialization particles are randomly generated according to the longitude and latitude position [ i ] where the particles are located_c,j_c]From the wind intensity data X, as shown in FIG. 2_s、Y_sObtaining the intensity value (X) of its adjacent grid point_i,j,Y_i,j)、(X_i+1,j,Y_i+1,j)、(X_i,j+1,Y_i,j+1)、(X_i+1,j+1,Y_i+1,j+1) Then by passing throughCalculating the intensity S of the particles, rounding the intensity data downwards to be used as a color value template index, acquiring the color value of the particles from T, storing the color value of the particles in a particle information list P, and storing the position and the color value in a particle flow list Q, wherein if the index value is less than 0, the index value is 0, and if the index value is greater than the length of the color value template, the index value is the maximum index value of the color value template list;

104, creating a thread for calculating the color transparency of the particle flow and putting the thread in a suspended state;

step 2, encoding the wind field intensity data into texture data;

step 201, according to the data area range R, the data precision X_o、Y_oNumber of lattice points X_c、Y_cRespectively creating horizontal and vertical wind strength texture I_x、I_y；

Step 202, the horizontal wind intensity X is measured_sAnd vertical wind strength Y_sThe data are respectively encoded into RGB format data and respectively stored in I_x、I_yIn the texture, specifically, the R channel stores an absolute value of an integer bit of the wind intensity, the G channel stores a fractional part value of the wind intensity, and the B channel stores a sign bit.

Step 3, according to the coordinates of the adjacent grid points corresponding to the longitude and latitude positions of the visible area range, as shown in fig. 2, respectively serving as texture coordinates and aiming at the wind intensity texture I_x、I_ySampling, decoding the sampled RGB color values into wind intensity data, calculating position colors, and generating a wind field distribution diagram;

step 301, converting space coordinates corresponding to a visible range into longitude and latitude coordinates through a GPU (graphics processing Unit) fragment source shader, calculating longitude and latitude coordinates of 4 adjacent grid points, normalizing the longitude and latitude coordinates of the adjacent grid points according to a data area range R, and specifically mapping the longitude and latitude values of the data area range R into 0-1 intervals;

step 302, normalizing according to step 301The coordinates of the adjacent grid points are used as texture coordinates for horizontal and vertical wind intensity textures I_x、I_ySampling, and decoding the sampled RGB color values into wind intensity data, wherein specifically, an R channel is a wind intensity integer bit, a G channel is a wind intensity decimal bit, and a B channel is a wind intensity sign bit;

303, obtaining the neighboring location intensity value X according to the step 302_i,j、X_i+1,j、X_i,j+1、X_i+1,j+1、Y_i,j、Y_i+1,j、Y_i,j+1、Y_i+1,j+1As shown in fig. 2, similarly using formula (1), calculating a wind intensity value of the influence of 4 adjacent grid points on the position of the film source in the GPU as f; that is, f is equivalent to the particle intensity S in the formula (1), the calculation processes of the two are completely the same, when f is calculated, S in the formula (1) is replaced by f, the other variables are only different in value, and the used parameters and variables are the same.

Step 304, according to the wind intensity value F calculated in step 303, setting the maximum influence value F_maxInfluence threshold V_TAnd color transparency alpha_TCalculating the position influence value w by using the formula (2), and then calculating the position influence value w and the threshold value V_TThe color value c is calculated according to the relationship between the influence value w and the influence threshold V_TThen, the color is calculated by formula (3), if the influence value w is greater than the influence threshold value V_TThen, the color c is calculated using equation (4).

w＝min(f,F_max)÷F_max (2)；

Step 4, traversing the particle information list P, acquiring the wind direction according to the particle position, and calculating the particle position at the next moment;

step 401, according to the set vertical directionUpper pixel length P_sCalculating the space distance D mapped in the vertical direction of the current visual angle_sSpecifically, the length of the screen from the center to the vertical direction is calculated to be P_sA spatial distance between two of the pixel locations;

step 402, traversing the particle information P, if the age of the particle is larger than the set particle length L, disappearing the particle, repeating the step 103 to generate a new particle, otherwise, continuing to grow; (particle Length is the number of points to store particle position data)

Step 403, according to the longitude and latitude position [ i ] of the particle_d,j_d]From X, as shown in FIG. 2_d、Y_dRespectively acquiring wind direction values X of 4 grid points adjacent to each other in the horizontal and vertical directions of the particles_di,j、X_di,j+1、X_di+1,j、X_di+1,j+1、Y_di,j、Y_di,j+1、Y_di+1,j、Y_di+1,j+1；

Step 404, calculating the wind direction of the particles according to the formula (5), and normalizing to obtain the unit wind direction value [ mu ] of the position_x,μ_y]；

Step 405, obtaining the unit wind direction value [ mu ] according to step 404_x,μ_y]And the difference between the previous and subsequent frame times σ_tHorizontal grid precision X_oVertical grid accuracy Y_oCalculating the longitude and latitude value [ Delta ] of particle offset by using the formula (6)_μ,Δ_ν]；

Step 406, according to the longitude and latitude value [ Delta ] of the offset obtained in step 405_μ,Δ_ν]And current particle position [ i_d,j_d]Calculating the next time position [ i ] of the particle by the formula (7)_du,j_dν]And updating the current particle position in the particle information list P and binding the particle color value in the positionThe information amount is stored in the particle flow list Q, and the particle age is increased by 1.

Step 5, traversing the particle information list, and calculating the color transparency of each particle of the particle flow;

restoring the thread state, traversing the particle information list P, obtaining a transparency list with the length L corresponding to the particles in the corresponding color transparency list A, wherein when the index value k of the list is greater than the age of the particles, the transparency alpha is 0, when the index value k is equal to the age of the particles, the transparency alpha is 255, when the index value k is less than the age of the particles, the index value A is used for_TThe particle transparency is attenuated for the interval in turn, as in equation (8), and the thread is suspended after the computation is complete.

And 6, repeating the steps 4 to 5, and respectively updating the data of the particle flow list Q and the data of the color transparency list A to the particle position memory M₁And color transparency memory M₃And generating a wind direction streamline.

By the way, the invention codes the grid point data of the wind intensity into the texture data based on the visual rendering method of the WebGL three-dimensional wind graph, pixel-by-pixel sampling and coloring are carried out through an inverse distance weighting algorithm and a GPU (graphics processing unit) piece-by-piece source rendering method, the rendering smoothness and the definition of a wind direction distribution diagram are improved, meanwhile, combining with a vision field cutting technology, a horizontal cutting technology and a bilinear interpolation algorithm, generating random new particles and growing particles circularly and repeatedly, batch dynamic particle flow lines are formed in the visible area, and the multithreading technology is utilized to calculate the color transparency of each particle in the particle flow, improve the CPU calculation efficiency, enhance the visual reality and the third dimension of the wind field, and all the particle vertexes, the color transparency and the index memory are respectively merged, and the rendering times are reduced from thousands of levels to one batch, so that the effect of rendering the wind graph is improved, and the rendering efficiency is improved.

Examples

Global wind field data are adopted in this embodiment:

s101, acquiring a wind field data area range R [ -180, -90,180,90 [ -180 [ ]]Horizontal grid precision X _o1, vertical grid accuracy Y _o1, number of horizontal lattice points X_cNumber of vertical lattice points Y of 360_c180, horizontal wind direction lattice point data X_dVertical wind direction lattice data Y_dHorizontal wind intensity lattice data X_sVertical wind intensity grid data Y_s；

S102, set the number of particles N to 5000 and the length of particles L to 100, create a particle information storage list P, a particle flow list Q, and a color transparency list a, and create a block of particle position memory M, respectively₁Index memory M₂And color transparency memory M₃Setting the length T of the color template_l17 and step size T_sCreating a particle flow color value template array T, and increasing the uniform interval to 255;

s103, randomly generating N initialization particles in the visible longitude and latitude area range, wherein the particle information comprises an initial position, an age and a direction, specifically, the age is a random integer between 0 and L, and the initialization particles are randomly generated according to the longitude and latitude position [ i ] of the particle_c,j_c]From wind intensity data X_s、Y_sObtaining the intensity value (X) of its adjacent grid point_i,j,Y_i,j)、(X_i+1,j,Y_i+1,j)、(X_i,j+1,Y_i,j+1)、(X_i+1,j+1,Y_i+1,j+1) Calculating the intensity of a particle S, rounding down intensity data to be used as a color value template index, acquiring a color value of the particle from T, storing the color value in a particle information list P, and storing the position and the color value in a particle flow list Q, wherein if the index value is less than 0, the index value is 0, and if the index value is greater than the length of the color value template, the index value is the maximum index value of the color value template list;

s104, creating a thread for calculating the color transparency of the particle flow and putting the thread in a suspended state;

s105, according to the longitude and latitude range R and the data precision X of the data area_o、Y_oNumber of lattice points X_c、Y_cRespectively creating horizontal and vertical wind strength texture I_x、I_y；

S106, converting the horizontal wind intensity X_sAnd vertical wind strength Y_sThe data are respectively encoded into RGB format data and respectively stored in I_x、I_yIn the texture, specifically, an R channel stores an absolute value of an integral number digit of the wind intensity, a G channel stores a fractional part value of the wind intensity, and a B channel stores a sign bit;

s107, converting the space coordinates corresponding to the visible range into longitude and latitude coordinates through a GPU (graphics processing Unit) fragment source shader, simultaneously calculating longitude and latitude coordinates of 4 adjacent grid points, normalizing the longitude and latitude coordinates of the adjacent grid points according to a data area range R, and specifically mapping the longitude and latitude values of the data area range R into 0-1 intervals;

s108, taking the adjacent grid point coordinates normalized by the S107 as texture coordinates, and respectively aligning the horizontal and vertical wind intensity textures I_x、I_ySampling, and decoding the sampled RGB color values into wind intensity data, wherein specifically, an R channel is a wind intensity integer bit, a G channel is a wind intensity decimal bit, and a B channel is a wind intensity sign bit;

s109, Adjacent position intensity value X obtained in S108_i,j、X_i+1,j、X_i,j+1、X_i+1,j+1、Y_i,j、Y_i+1,j、Y_i,j+1、Y_i+1,j+1Calculating the wind intensity value f of the influence of 4 adjacent grids on the position;

s110, setting the maximum influence value F_max100, influence rate threshold V_TObtaining an influence value w and calculating a current position color c, wherein the color transparency alpha is 0.45 and the color transparency alpha is 0.4;

s111, calculating the length of a pixel in the vertical direction to be P_sIs spatially mapped to a distance D_s；

S112, traversing the particle information, if the age of the particle is larger than L, disappearing the particle, repeating S103 to generate a new particle, and if not, continuing to grow;

s113, according to the longitude and latitude position [ i ] of the particle_d,j_d]From X_d、Y_dRespectively obtainTaking wind direction values X of 4 grid points which are adjacent in the horizontal direction and the vertical direction of the particle_di,j、X_di,j+1、X_di+1,j、X_di+1,j+1、Y_di,j、Y_di,j+1、Y_di+1,j、Y_di+1,j+1；

S114, calculating the wind direction of the particles, normalizing the wind direction of the particles to obtain a unit wind direction value [ mu ] of the position_x,μ_y]；

S115, Unit wind Direction value [ mu ] obtained in S114_x,μ_y]And the difference between the previous and subsequent frame times σ_tHorizontal grid precision X_oVertical grid accuracy Y_oCalculating the longitude and latitude value [ Delta ] of the particle offset_μ,Δ_ν]；

S116, obtaining the longitude and latitude [ delta ] of the offset according to the S115_μ,Δ_ν]And current particle position [ i_d,j_d]Calculating the next time position [ i ] of the particle_du,j_dν]And updating the current particle position in the particle information list P, binding the particle color value in the position information component, and storing the particle color value in the particle flow list Q, wherein the particle age is added by 1.

S117, setting a transparency step length A_TAnd (10) restoring the thread state, traversing and updating the particle information P, acquiring a transparency list with the length L corresponding to the particle in the corresponding color transparency list A, wherein when the index value k of the list is greater than the age of the particle, the transparency alpha is 0, when the index value k is equal to the age of the particle, the transparency alpha is 255, and when the index value k is less than the age of the particle, A is used_TSequentially attenuating the transparency of the particles at intervals, and suspending the thread after the completion;

s118, repeating the steps from S111 to S117, and respectively updating the particle flow list and the color transparency list data to the particle position memory M₁And color transparency memory M₂And rendering the particle stream.

3, as can be seen from the figure, the particle flow line and the wind intensity distribution are basically consistent, the wind graph has clear and vivid outline, the frame rate reaches about 57 (the full frame is 60), the rendering effect of the wind graph is improved, and the rendering efficiency is also high.

Claims (7)

1. The rendering method based on the WebGL three-dimensional wind graph visualization is characterized by comprising the following steps: the method specifically comprises the following steps:

step 1, acquiring grid data of a wind field;

step 2, encoding the grid data of the wind field obtained in the step 1 into wind intensity texture data;

step 3, sampling the wind intensity texture data obtained in the step 2 according to the grid points corresponding to the positions, decoding the wind intensity data, calculating corresponding color values and generating a wind field distribution diagram;

step 4, traversing the particle information list, acquiring the wind direction according to the particle flow position, and calculating the particle position at the next moment;

step 5, traversing the particle information list, and calculating the color transparency of each particle of the particle flow;

and 6, updating the particle position and color transparency memory to generate a wind direction streamline.

2. The rendering method based on the WebGL three-dimensional wind graph visualization as claimed in claim 1, wherein: the specific process of the step 1 is as follows:

step 101, acquiring wind field grid data, including data area range, grid precision, horizontal grid points, vertical grid points, horizontal wind direction grid point data, vertical wind direction grid point data, horizontal wind strength grid point data and vertical wind strength grid point data;

102, creating a particle information storage list, a particle flow list and a color transparency list according to the set particle number and the set particle length, simultaneously creating a particle position memory, an index memory and a color transparency memory respectively, and creating a particle flow color value template array according to the set length and the set step length of a color template;

step 103, randomly generating initialized particles in a visible region range, wherein particle information comprises an initial position, an age and a direction, calculating particle intensity according to a grid position where the particles are located, rounding down intensity data to be used as a color value template index, acquiring a particle color value, storing the particle color value in a particle information list, and adding the position and the color value into a particle flow list;

and 104, creating a thread for calculating the color transparency of the particle flow, and putting the thread in a suspended state.

3. The rendering method based on the WebGL three-dimensional wind graph visualization as claimed in claim 2, wherein: the step 2 specifically comprises the following steps:

step 201, respectively creating horizontal and vertical wind strength textures according to the range and precision of a data area;

and 202, encoding the horizontal wind intensity lattice point and vertical wind intensity lattice point floating point data into RGB format data, and respectively storing the RGB format data in the horizontal wind intensity texture and the vertical wind intensity texture.

4. The rendering method based on the WebGL three-dimensional wind graph visualization as claimed in claim 3, wherein: the step 3 specifically comprises the following steps:

step 301, converting space coordinates corresponding to a data area in a view field range into longitude and latitude coordinates through a GPU slice source shader, calculating longitude and latitude coordinates of 4 grid points adjacent to the coordinates, and normalizing;

step 302, taking the coordinates of the adjacent grid points normalized in the step 301 as texture coordinates, respectively sampling horizontal and vertical wind intensity textures, and decoding the sampling results into corresponding position wind intensity values;

step 303, calculating wind intensity values of the 4 adjacent grid points influencing the position by using an inverse distance weighted interpolation algorithm according to the wind intensity values of the adjacent positions obtained in the step 302;

step 304, according to the wind intensity value calculated in step 303, setting a maximum influence value, an influence threshold value and color transparency, and calculating a color value of the position.

5. The rendering method based on the WebGL three-dimensional wind graph visualization as claimed in claim 4, wherein the step 4 specifically comprises the following steps:

step 401, calculating a space distance mapped in the vertical direction of the current visual angle according to the set particle pixel length;

step 402, traversing the particle information, if the age of the particle is larger than the set particle length, the particle dies, and repeating the step 103 to generate a new particle; if the particle age is less than the set particle length, the particles continue to grow;

step 403, respectively calculating 4 lattice point wind direction values of the adjacent horizontal and vertical directions of the particles according to the positions of the particles;

step 404, calculating the wind direction of the particles by using a bilinear interpolation algorithm, and normalizing;

step 405, calculating longitude and latitude values of particle deviation in frame time according to the unit wind direction value obtained in step 404 and the time difference of the previous frame and the next frame;

step 406, calculating the position of the next time according to the offset longitude and latitude values and the current particle position obtained in step 405, updating the current particle position in the particle information list, binding the particle color value in the position information component, storing the particle color value in the particle flow list, and adding 1 to the particle age.

6. The rendering method based on the WebGL three-dimensional wind graph visualization as claimed in claim 5, wherein the specific process of the step 5 is as follows:

restoring the thread state, traversing the particle information list, and acquiring a transparency list with the length L corresponding to the particles in the corresponding color transparency list; the transparency alpha is 0 when the index value k is larger than the particle age, the transparency alpha is 255 when the index value k is equal to the particle age, and A is used when the index value k is smaller than the particle age_TAnd sequentially attenuating the transparency of the particles at intervals, and suspending the thread after the completion.

7. The rendering method based on the WebGL three-dimensional wind graph visualization as claimed in claim 6, wherein the specific process of the step 6 is as follows:

and repeating the step 4-5, and respectively updating the particle flow list data and the color transparency list data to the particle position memory and the color transparency memory to generate a wind direction streamline.

Images