Rendering method of three-dimensional wind direction map visualization based on WebGL

Abstract

The present invention discloses a rendering method based on WebGL three-dimensional wind direction map visualization, which specifically includes the following steps: step 1, obtaining wind field grid data; step 2, encoding the wind field grid data obtained in step 1 into wind intensity texture data; step 3, sampling the wind intensity texture data obtained in step 2 according to the grid points corresponding to the position, decoding the wind intensity data, calculating the corresponding color value and generating a wind field distribution map; step 4, traversing the particle information list, obtaining 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, calculating the color transparency of each particle in the particle flow; step 6, updating the particle position and color transparency memory, and generating a wind direction streamline. The present invention solves the problems of unsatisfactory rendering effect and low rendering efficiency in the existing rendering method.

Description

Technical Field

[0001] The invention belongs to the technical field of meteorological visualization methods and relates to a rendering method based on WebGL three-dimensional wind direction map visualization. Background Art

[0002] In the Geographic Information System (GIS) industry, time-varying, multi-scale data visualization has always been a basic feature of geographic spatial information. In recent years, typhoons and tsunamis have caused huge losses to mankind, and the multi-scale variation characteristics of wind fields have a profound impact on meteorological changes. On the one hand, wind field grid data cannot show wind direction changes in a striking and intuitive way. On the other hand, real-time data scheduling and rendering occupy a lot of resource space, causing great pressure on the system. How to generate an effective and clear display of wind direction map without causing a large load on the system has become an urgent problem to be solved.

[0003] In order to solve the contradiction between the traditional three-dimensional wind direction map's lack of intuitiveness and low rendering efficiency and actual needs, there are two conventional solutions. Solution 1 uses Canvas rendering technology to generate random wind direction particle flow and wind distribution map within the visible range of the map, intuitively showing the dynamic wind direction changes and distribution, and to a certain extent solving the three-dimensional wind direction visualization solution. However, in essence, it is based on two-dimensional plane rendering. When the viewing angle is changed, the wind direction map will be cleared and re-rendered, and real-time rendering cannot be performed. At the same time, it cannot meet multi-scale visualization. Solution 2 is based on Solution 1 and renders the drawn result as a texture in WebGL mode. The rendering efficiency is improved, but the rendering effect is poor, and the above problems exist at the same time. Both solutions cannot meet the needs. Summary of the invention

[0004] The purpose of the present invention is to provide a rendering method based on WebGL three-dimensional wind map visualization, which solves the problems of unsatisfactory rendering effect and low rendering efficiency in existing rendering methods.

[0005] The technical solution adopted by the present invention is a rendering method based on WebGL three-dimensional wind direction map visualization, which specifically includes the following steps:

[0006] Step 1, obtaining wind farm grid data;

[0007] Step 2, encoding the wind field grid data obtained in step 1 into wind intensity texture data;

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

[0009] Step 4, traverse the particle information list, obtain the wind direction according to the particle flow position, and calculate the particle position at the next moment;

[0010] Step 5, traverse the particle information list and calculate the color transparency of each particle in the particle flow;

[0011] Step 6: Update the particle position and color transparency memory to generate wind direction streamlines.

[0012] The present invention is also characterized in that:

[0013] The specific process of step 1 is:

[0014] Step 101, obtaining wind farm grid data, including data area range, grid accuracy, number of horizontal grid points, number of vertical grid points, horizontal wind direction grid point data, vertical wind direction grid point data, horizontal wind intensity grid point data, and vertical wind intensity grid point data;

[0015] Step 102, according to the set number of particles and particle length, create a particle information storage list, a particle flow list and a color transparency list, and at the same time create a particle position memory, an index memory and a color transparency memory respectively, and according to the set color template length and step size, create a particle flow color value template array;

[0016] Step 103, randomly generate initialization particles within the visible area, the particle information includes initial position, age and direction, and then calculate the particle intensity according to the grid position of the particle, round down the intensity data as the color value template index, obtain the particle color value, and save it in the particle information list, and add the position and color value to the particle flow list;

[0017] Step 104: create a thread for calculating the color transparency of the particle flow, and put the thread in a suspended state.

[0018] Step 2 specifically includes the following steps:

[0019] Step 201, creating horizontal and vertical wind intensity textures respectively according to the data area range and accuracy;

[0020] Step 202, encode the horizontal wind intensity grid point and vertical wind intensity grid point floating point data into RGB format data, and store them in the horizontal and vertical wind intensity textures respectively.

[0021] Step 3 specifically includes the following steps:

[0022] Step 301, converting the spatial coordinates corresponding to the data area in the viewing range into longitude and latitude coordinates through the GPU source shader, and calculating the longitude and latitude coordinates of the four grid points adjacent to the coordinates, and normalizing them;

[0023] Step 302, using the normalized adjacent grid point coordinates in step 301 as texture coordinates, sampling the horizontal and vertical wind intensity textures respectively, and decoding the sampling results into wind intensity values ​​at corresponding positions;

[0024] Step 303, based on the wind intensity values ​​of the adjacent positions obtained in step 302, using the inverse distance weighted interpolation algorithm, calculate the wind intensity values ​​of the adjacent four grid points that affect the position;

[0025] Step 304, according to the wind intensity value calculated in step 303, the maximum impact value, impact threshold, and color transparency are set, and the color value of the position is calculated.

[0026] Step 4 specifically includes the following steps:

[0027] Step 401, calculating the spatial distance mapped in the vertical direction of the current viewing angle according to the set particle pixel length;

[0028] Step 402, traverse the particle information, if the particle age is greater than the set particle length, the particle dies, and repeat step 103 to generate a new particle; if the particle age is less than the set particle length, the particle continues to grow;

[0029] Step 403, according to the location of the particle, respectively calculate the wind direction values ​​of four grid points adjacent to the particle in the horizontal and vertical directions;

[0030] Step 404, using a bilinear interpolation algorithm, calculate the particle wind direction and normalize it;

[0031] Step 405, calculating the longitude and latitude values ​​of particle offset within the frame time according to the unit wind direction value obtained in step 404 and the time difference between the previous and next frames;

[0032] Step 406, calculate the position at the next moment according to the offset longitude and latitude values ​​and the current particle position obtained in step 405, update the current particle position in the particle information list, bind the particle color value to the position information component, store it in the particle flow list, and increase the particle age by 1.

[0033] The specific process of step 5 is as follows:

[0034] Restore the thread state, traverse the particle information list, and obtain the transparency list of length L corresponding to the particle in the corresponding color transparency list; when the list index value k is greater than the particle age age, the transparency α is 0, when the index value k is equal to the particle age age, the transparency α is 255, and when the index value k is less than the particle age age, the transparency α is A. T Decrease the transparency of particles in order at intervals, and suspend the thread after completion.

[0035] The specific process of step 6 is as follows:

[0036] Repeat steps 4 to 5 to update the particle flow list and color transparency list data to the particle position memory and color transparency memory respectively to generate wind direction streamlines.

[0037] The beneficial effects of the present invention are as follows: the present invention encodes wind intensity grid data into texture data, performs pixel-by-pixel sampling and coloring through an inverse distance weighted algorithm and a GPU source-by-source rendering method, and utilizes the parallel computing capability and real-time rendering capability of a GPU, thereby improving the rendering efficiency and clarity of a wind direction distribution map, and at the same time combines viewport clipping technology, horizontal clipping technology, and a bilinear interpolation algorithm to repeatedly generate random new particles and growing particles, forming batch dynamic particle streamlines in a visible area, and utilizes multi-threading technology to calculate the color transparency of each particle in a particle flow, thereby improving CPU computing efficiency, and enhancing the visual reality and three-dimensional sense of a wind field, and merges all particle vertices, color transparency, and index memory, respectively, thereby reducing the number of rendering times from thousands to one batch, thereby both improving the rendering effect of a wind direction map and improving the rendering efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] Figure 1 It is a flow chart of a rendering method of a WebGL-based three-dimensional wind direction map visualization of the present invention;

[0039] Figure 2 It is a longitude and latitude position map of particles in the rendering method of the present invention based on WebGL three-dimensional wind direction map visualization;

[0040] Figure 3 The present invention is a rendering effect diagram rendered by using the rendering method based on WebGL three-dimensional wind direction map visualization. DETAILED DESCRIPTION

[0041] The present invention is described in detail below with reference to the accompanying drawings and specific embodiments.

[0042] The present invention is based on the WebGL three-dimensional wind map visualization rendering method, such as Figure 1 As shown, the following steps are included:

[0043] Step 1: Obtain wind farm grid data, including storage data area range, wind direction and wind intensity information;

[0044] Step 101, obtaining wind farm grid data, including data area range R = [i min ,j min ,i max ,j max ], horizontal grid accuracy X o , vertical grid accuracy Y o , horizontal grid number X c , the number of vertical grid points Y c , horizontal wind direction grid data X d, vertical wind direction grid data Y d , horizontal wind intensity grid data X s , vertical wind intensity grid data Y s ;

[0045] Step 102: according to the set number of particles N and particle length L, create a particle information storage list P, a particle flow list Q and a color transparency list A, and at the same time create a particle position memory M1, an index memory M2 and a color transparency memory M3 respectively, and according to the set color template length T l and step length T s , create a particle flow color value template array T, which increases evenly to 255;

[0046] Step 103, randomly generate N initialization particles within the visible longitude and latitude area, the particle information includes initial position, age and direction, specifically, the age is a random integer between 0 and L, and the particle is initialized according to the longitude and latitude position [i c ,j c ],like Figure 2 As shown, from the wind intensity data X s , Y s Get the intensity value of its adjacent grid points (X 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 ), and then calculate the particle intensity S through the following formula (1), round the intensity data down as the color value template index, obtain the particle color value from T, and save it in the particle information list P, and store the position and color value in the particle flow list Q, where if the index value is less than 0, it is 0, and if it is equal to or greater than the color value template length, it is the maximum index value of the color value template list;

[0047]

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

[0049] Step 2, encoding the wind field intensity data into texture data;

[0050] Step 201, according to the data area range R, data accuracy X o , Y o , number of grid points X c , Y c , create horizontal and vertical wind intensity textures I respectively x ,I y ;

[0051] Step 202: horizontal wind intensity X s and vertical wind intensity Y s The data are encoded as RGB format data and stored in I x ,I y In the texture, specifically, the R channel stores the integer absolute value of the wind intensity, the G channel stores the decimal value of the wind intensity, and the B channel stores the sign bit.

[0052] Step 3: According to the coordinates of the adjacent grid points corresponding to the longitude and latitude positions of the visible area, Figure 2 As shown, they are used as texture coordinates, and the wind intensity texture I x ,I y Sampling is performed, the sampled RGB color values ​​are decoded into wind intensity data, the position color is calculated, and a wind field distribution map is generated;

[0053] Step 301, converting the spatial coordinates corresponding to the visible range into longitude and latitude coordinates through the GPU source shader, and calculating the longitude and latitude coordinates of the four adjacent grid points, and normalizing the longitude and latitude coordinates of the adjacent grid points according to the data area range R, specifically, mapping the longitude and latitude values ​​of the data area range R to the range of 0 to 1;

[0054] Step 302: using the normalized adjacent grid point coordinates in step 301 as texture coordinates, the horizontal and vertical wind intensity textures I x ,I y Sampling is performed, and the sampled RGB color value is decoded into wind intensity data. Specifically, the R channel is the integer bit of wind intensity, the G channel is the decimal bit of wind intensity, and the B channel is the sign bit of wind intensity;

[0055] Step 303: according to the adjacent position strength value X obtained in 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+1 ,like Figure 2 As shown in the figure, similarly, using formula (1), the wind intensity value of the influence of the four adjacent grid points on the source position is calculated in the GPU and recorded as f; that is, f here is equivalent to the particle intensity S in formula (1), and the calculation process of the two is exactly the same. When calculating f, just replace S in formula (1) with f. The remaining variables only have different values, and the parameters and variables used are the same.

[0056] Step 304: according to the wind intensity value f calculated in step 303, set the maximum impact value F max , Impact threshold V Tand color transparency alpha T , use formula (2) to calculate the influence value w of the position, and then use the influence value w and threshold V T The relationship between the color value c is calculated. Specifically, if the influence value w is less than or equal to the influence threshold V T When the color is calculated using formula (3), if the influence value w is greater than the influence threshold V T When , the color c is calculated using formula (4).

[0057] w=min(f,F max )÷F max (2);

[0058]

[0059]

[0060] Step 4, traverse the particle information list P, obtain the wind direction according to the particle position, and calculate the particle position at the next moment;

[0061] Step 401: according to the set pixel length P in the vertical direction s , calculate the spatial distance D mapped in the vertical direction of the current viewing angle s Specifically, calculate the vertical length from the center of the screen to P s The spatial distance between the two pixel positions;

[0062] Step 402, traverse the particle information P, if the particle age is greater than the set particle length L, the particle dies, repeat step 103 to generate a new particle, otherwise continue to grow; (the particle length is the number of points storing the particle position data)

[0063] Step 403, based on the longitude and latitude position of the particle [i d ,j d ],like Figure 2 As shown, from X d , Y d Get the wind direction values ​​X of the four adjacent grid points in the horizontal and vertical directions of the particle respectively 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 ;

[0064] Step 404, calculate the particle wind direction through formula (5), and normalize it to obtain the unit wind direction value [μ x ,μ y ];

[0065]

[0066] Step 405: according to the unit wind direction value [μ x ,μ y ] and the time difference between the previous and next frames σ t , horizontal grid accuracy X o , vertical grid accuracy Y o , using formula (6) to calculate the particle offset longitude and latitude [Δ μ ,Δ ν ];

[0067]

[0068] Step 406, according to the offset longitude and latitude values ​​[Δ μ ,Δ ν ] and the current particle position [i d ,j d ], and calculate the particle's next position [i du ,j dν ], and update the current particle position in the particle information list P, bind the particle color value to the position information component, store it in the particle flow list Q, and increase the particle age by 1.

[0069]

[0070] Step 5, traverse the particle information list and calculate the color transparency of each particle in the particle flow;

[0071] Restore the thread state, traverse the particle information list P, obtain the transparency list of length L corresponding to the particle in the corresponding color transparency list A, when the list index value k is greater than the particle age age, the transparency α is 0, when the index value k is equal to the particle age age, the transparency α is 255, when the index value k is less than the particle age age, the transparency α is A T The transparency of particles is attenuated in sequence at intervals, as shown in formula (8), and the thread is suspended after the calculation is completed.

[0072]

[0073] Step 6, repeat steps 4 to 5, update the particle flow list Q and color transparency list A data to the particle position memory M1 and color transparency memory M3 respectively, and generate wind direction streamlines.

[0074] Through the above manner, the rendering method of the three-dimensional wind direction map visualization based on WebGL of the present invention encodes the wind intensity grid data into texture data, performs pixel-by-pixel sampling and coloring through an inverse distance weighted algorithm and a GPU source-by-source rendering method, improves the smoothness and clarity of the rendering of the wind direction distribution map, and combines the field of view clipping technology, the horizontal clipping technology and the bilinear interpolation algorithm to repeatedly generate random new particles and growing particles, form batch dynamic particle streamlines in the visible area, and utilize multi-threading technology to calculate the color transparency of each particle in the particle flow, improve the CPU computing efficiency, enhance the realism and three-dimensional sense of wind field visualization, and merge all particle vertices, color transparency and index memory respectively, and reduce the number of rendering times from thousands to one batch, thereby improving the rendering effect of the wind direction map and improving the rendering efficiency.

[0075] Example

[0076] In this embodiment, global wind field data is used:

[0077] S101, obtain the wind farm data area range R = [-180, -90, 180, 90], horizontal grid accuracy X o =1, vertical grid accuracy Y o =1, horizontal grid number X c =360, number of vertical grid points Y c =180, horizontal wind direction grid data X d , vertical wind direction grid data Y d , horizontal wind intensity grid data X s , vertical wind intensity grid data Y s ;

[0078] S102, set the number of particles N = 5000 and the particle length L = 100, create a particle information storage list P, a particle flow list Q and a color transparency list A, and create a particle position memory M1, an index memory M2 and a color transparency memory M3 respectively, set the color template length T l =17 and step length T s =13, create a particle flow color value template array T, and increase it to 255 evenly;

[0079] S103, randomly generate N initialization particles within the visible longitude and latitude area, the particle information includes initial position, age and direction, specifically, the age is a random integer between 0 and L, and the particle is initialized according to the longitude and latitude position [i c ,j c ], from the wind intensity data X s , Y s Get the intensity value of its adjacent grid points (X 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 ), calculate the particle intensity S, round down the intensity data as the color value template index, obtain the particle color value from T, and save it in the particle information list P, and store the position and color value in the particle flow list Q. If the index value is less than 0, it is 0; if it is equal to or greater than the color value template length, it is the maximum index value of the color value template list;

[0080] S104, creating a thread for calculating the color transparency of the particle flow, and putting the thread in a suspended state;

[0081] S105, according to the latitude and longitude range R of the data area, the data accuracy X o , Y o , number of grid points X c , Y c , create horizontal and vertical wind intensity textures I respectively x ,I y ;

[0082] S106, horizontal wind intensity X s and vertical wind intensity Y s The data are encoded as RGB format data and stored in I x ,I y In the texture, specifically, the R channel stores the integer absolute value of the wind intensity, the G channel stores the decimal value of the wind intensity, and the B channel stores the sign bit;

[0083] S107, converting the spatial coordinates corresponding to the visible range into longitude and latitude coordinates through the GPU source shader, and calculating the longitude and latitude coordinates of the four adjacent grid points, and normalizing the longitude and latitude coordinates of the adjacent grid points according to the data area range R, specifically, mapping the longitude and latitude values ​​of the data area range R to the range of 0 to 1;

[0084] S108, using the adjacent grid point coordinates normalized by S107 as texture coordinates, and respectively generating the horizontal and vertical wind intensity textures I x ,I y Sampling is performed, and the sampled RGB color value is decoded into wind intensity data. Specifically, the R channel is the integer bit of wind intensity, the G channel is the decimal bit of wind intensity, and the B channel is the sign bit of wind intensity;

[0085] S109, the adjacent position strength value X obtained by S108 i,j , X i+1,j , X i,j+1 , X i+1,j+1 , Y i,j , Y i+1,j , Yi,j+1 , Y i+1,j+1 , calculate the wind intensity value f of the four adjacent grid points affecting the location;

[0086] S110, set the maximum impact value F max =100, impact rate threshold V T =0.45, color transparency α=0.4, get the influence value w, and calculate the current position color c;

[0087] S111, calculate the pixel length in the vertical direction as P s The spatial mapping distance D s ;

[0088] S112, traverse the particle information, if the particle age is greater than L, the particle dies, and repeat S103 to generate a new particle, otherwise it continues to grow;

[0089] S113, according to the longitude and latitude position of the particle [i d ,j d ], from X d , Y d Get the wind direction values ​​X of the four adjacent grid points in the horizontal and vertical directions of the particle respectively 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 ;

[0090] S114, calculate the particle wind direction, and normalize it to obtain the unit wind direction value [μ x ,μ y ];

[0091] S115, the unit wind direction value [μ x ,μ y ] and the time difference between the previous and next frames σ t , horizontal grid accuracy X o , vertical grid accuracy Y o , calculate the particle offset longitude and latitude [Δ μ ,Δ ν ];

[0092] S116, according to S115, the offset longitude and latitude [Δ μ ,Δ ν ] and the current particle position [i d ,j d ], calculate the particle's next position [i du ,j dν], and update the current particle position in the particle information list P, bind the particle color value to the position information component, store it in the particle flow list Q, and increase the particle age by 1.

[0093] S117, set transparency step A T = 10, restore the thread state, traverse and update the particle information P, obtain the transparency list of length L corresponding to the particle in the corresponding color transparency list A, when the list index value k is greater than the particle age age, the transparency α is 0, when the index value k is equal to the particle age age, the transparency α is 255, when the index value k is less than the particle age age, the transparency α is A T Attenuate the transparency of particles in order, and suspend the thread after completion;

[0094] S118. Repeat steps S111 to S117 to update the particle flow list and color transparency list data to the particle position memory M1 and the color transparency memory M2 respectively, and render the particle streamlines.

[0095] As shown in Figure 3, it can be seen that the particle streamlines are basically consistent with the wind intensity distribution, and the wind direction map has a clear outline, vivid and realistic, with a frame rate of about 57 (full frame is 60), which improves the rendering effect of the wind direction map while also having a high rendering efficiency.

Claims

1. A rendering method for visualizing a three-dimensional wind direction map based on WebGL, characterized in that: The specific steps include: Step 1, obtaining wind farm grid data; The specific process of step 1 is as follows: Step 101, obtaining wind farm grid data, including data area range, grid accuracy, number of horizontal grid points, number of vertical grid points, horizontal wind direction grid point data, vertical wind direction grid point data, horizontal wind intensity grid point data, and vertical wind intensity grid point data; Step 102, according to the set number of particles and particle length, create a particle information list, a particle flow list and a color transparency list, and at the same time create a particle position memory, an index memory and a color transparency memory respectively, and according to the set color template length and step size, create a particle flow color value template array; Step 103, randomly generate initialization particles within the field of view, the particle information includes initial position, age and direction, and then calculate the particle intensity according to the grid position of the particle, round down the intensity data as the color value template index, obtain the particle color value, and save it in the particle information list, and add the position and color value to the particle flow list; Step 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 grid data obtained in step 1 into wind intensity texture data; The step 2 specifically includes the following steps: Step 201, creating horizontal and vertical wind intensity textures respectively according to the data area range and grid accuracy; Step 202, encoding the horizontal wind intensity grid point and the vertical wind intensity grid point floating point data into RGB format data, and storing them in the horizontal and vertical wind intensity textures respectively; Step 3, sampling the wind intensity texture data obtained in step 2 according to the grid points corresponding to the longitude and latitude positions of the viewing range, decoding the wind intensity grid point data, calculating the corresponding color values ​​and generating a wind field distribution map; The step 3 specifically comprises the following steps: Step 301, converting the spatial coordinates corresponding to the data area in the viewing range into longitude and latitude coordinates through the GPU source shader, and calculating the longitude and latitude coordinates of the four grid points adjacent to the coordinates, and normalizing them; Step 302, using the normalized adjacent grid point coordinates in step 301 as texture coordinates, sampling the horizontal and vertical wind intensity textures respectively, and decoding the sampling results into wind intensity grid point data at corresponding positions; Step 303, based on the adjacent position wind intensity grid point data obtained in step 302, using the inverse distance weighted interpolation algorithm, calculate the wind intensity value affected by the position where the adjacent four grid points are located by converting the spatial coordinates corresponding to the data area in the field of view range into the longitude and latitude coordinates through the GPU source shader in step 301; Step 304, according to the wind intensity value calculated in step 303, set the maximum impact value, impact threshold, and color transparency, and calculate the color value of the position; Step 4, traverse the particle information list, obtain the wind direction according to the particle position, and calculate the particle position at the next moment; Step 5, traverse the particle information list and calculate the color transparency of each particle in the particle flow; Step 6: Update the particle position and color transparency memory to generate wind direction streamlines.

2. The rendering method for visualizing a three-dimensional wind direction map based on WebGL according to claim 1, characterized in that: The step 4 specifically comprises the following steps: Step 401, calculating the spatial distance mapped in the vertical direction of the current viewing angle according to the set particle pixel length; Step 402, traverse the particle information, if the particle age is greater than the set particle length, the particle dies, and repeat step 103 to generate a new particle; if the particle age is less than the set particle length, the particle continues to grow; Step 403, according to the location of the particle, respectively calculate the wind direction grid point data of four grid points in the horizontal and vertical directions adjacent to the particle; Step 404, using a bilinear interpolation algorithm, calculate the particle wind direction, and normalize it to obtain a unit wind direction value at the position; Step 405, calculating the longitude and latitude values ​​of particle offset within the frame time according to the unit wind direction value obtained in step 404 and the time difference between the previous and next frames; Step 406, calculate the position at the next moment according to the offset longitude and latitude values ​​and the current particle position obtained in step 405, update the current particle position in the particle information list, bind the particle color value to the position information component, store it in the particle flow list, and increase the particle age by 1.

3. The rendering method for visualizing a three-dimensional wind direction map based on WebGL according to claim 2, characterized in that: The specific process of step 5 is as follows: Restore the thread state, traverse the particle information list, and obtain the transparency list of length L corresponding to the particle in the corresponding color transparency list; list index value Greater than particle age Time transparency is 0, index value Equal to the particle age Time transparency The index value is 255. Less than the particle age When the transparency step Decrease the transparency of particles in order at intervals, and suspend the thread after completion.

4. The rendering method for visualizing a three-dimensional wind direction map based on WebGL according to claim 3, characterized in that: The specific process of step 6 is: repeating steps 4-5, updating the particle flow list and color transparency list data to the particle position memory and color transparency memory respectively, and generating wind direction streamlines.

Images