A method for processing and rendering slice images of ocean grid data

Abstract

The present invention discloses a method for processing and rendering ocean grid data, which relates to the field of image data processing technology and includes the following steps: determining the scale and resolution; generating a grid data pyramid; generating a color image from grid data using a color mapping table; slicing a multi-level image and establishing a slicing index; calculating a slicing index according to a required image; making a data request for an image slicing according to the index; rendering according to the image slicing; splicing the slicing rendered images and performing edge optimization; and displaying the rendering results. The present invention reduces the amount of data calculation while maintaining good data information, reduces the amount of data transmission during transmission, performs edge optimization to improve the display effect of data, and better solves the above-mentioned problems of large data processing volume, poor display speed and effect during grid data processing.

Description

Technical Field

[0001] The present invention relates to the field of grid data processing and slice display, and in particular to a slice image processing and rendering display method based on ocean grid data. Background Art

[0002] Grid data has a wide range of application scenarios and is one of the main data formats in the fields of meteorology and oceanography. However, due to its own characteristics, grid data has a large storage volume and is slow to directly transmit and render. Traditional technology generally converts grid data to JSON format on the server first, and then renders and displays it through the front end. However, when faced with situations such as ocean grid data, which covers a wide area and has a huge amount of data, this method has the disadvantages of large data transmission volume and occupying more server resources.

[0003] To solve the above-mentioned problems of grid data processing and display, the current mainstream approaches are as follows: 1) visualization of raster data isosurfaces; 2) visualization of vector isosurfaces; the above-mentioned mainstream solutions still have deficiencies in visualization effect and performance, and have problems of large data processing volume and poor display speed. Summary of the invention

[0004] The purpose of the present invention is to solve the shortcomings of the prior art, such as large data transmission pressure and untimely interaction caused by the large spatial range and huge data volume of ocean grid data in data processing and front-end rendering and display, and thus a sliced ​​image rendering method for ocean grid data based on WebGL is proposed. The sliced ​​image rendering method for ocean grid data based on WebGL first outputs the grid data into an image form, and further processes the image using a slice scheme, and uses WebGL rendering technology to render and display the image in terms of rendering.

[0005] In order to achieve the above-mentioned purpose, the present invention adopts the following technical scheme: designing a method for processing and rendering image of ocean grid data slices, which specifically includes the following steps:

[0006] Step S1), calculate standard resolution: according to the actual selected map standard scale, establish the standard scale level and the corresponding grid data resolution.

[0007] Step S2), using pooling and interpolation operations to generate a grid data pyramid: using pooling and cubic convolution interpolation operations to perform data thinning operations on the grid data. Each pooling operation will reduce the grid data by half, and then adjust the resolution through cubic convolution interpolation to generate multi-level grid data with different resolutions.

[0008] Step S3) by querying a preset color mapping table to obtain color data corresponding to the grid data. The multi-level grid data is converted into a PNG format color image using the color mapping table, thereby generating a multi-level image.

[0009] Step S4), slice the images at different levels, and then use the scale level, number of rows and number of columns of each data slice as the index of the image slice.

[0010] Step S5), according to the actual spatial range of the display window and the slicing rule, the index of the required image slice is obtained: according to the actual spatial range of the window display, that is, the visible area, including the minimum longitude, maximum longitude, minimum latitude, maximum latitude and current map scale information, the index of the required slice data is calculated;

[0011] Step S6) Obtain image slices according to the data request and adopt a cache solution: The front end requests the required image slices. If the visible area remains unchanged for more than a certain period of time, it is considered that a higher resolution image under the visible area is needed, and the higher resolution image slices within the actual geographical range are automatically cached.

[0012] Step S7), generate an isosurface map according to the image and render it: use the webgl rendering method to render the image; establish a canvas webgl context, calculate the grayscale texture and color texture of the image, customize the shader logic, and make the shader combine the grayscale texture and color texture for hierarchical rendering. At the same time, after the data rendering of the current interface is completed, continue to render the lower image slices with a larger resolution.

[0013] Step S8) stitching the slice rendering images and performing weighted average fusion: after the slice rendering is completed, the slices are stitched according to their actual geographical location range. Since the edge parts of the slices will partially overlap, the overlapping parts are weighted average fused to generate the final rendering result.

[0014] Step S9), display rendering results: load and display the rendered image on the web platform.

[0015] Furthermore, in step S2), the thinning algorithm specifically includes the following steps:

[0016] Step S21, dividing the grid data into sub-regions according to a 2x2 pooling window;

[0017] Step S22: perform a maximum pooling operation on each sub-region, and use the pooled value as a new value of the sub-region;

[0018] Step S23: Use cubic convolution interpolation to interpolate the pooled grid data to the target resolution.

[0019] Furthermore, in step S3), the calculation method of generating an image from grid data is as follows:

[0020] First, read the grid data, count the values ​​of different types of grid data, encode the grid data type values ​​with natural numbers in the order of the original value size, generate the key-value pair dictionary dict, and then use the following formula to obtain the corresponding grid data value:

[0021] g(i,j)=dict[p(i,j)] (1)

[0022] In formula (1), p(i, j) is the value corresponding to the grid data point, dict is the coding table, and the original grid data value is input into the dictionary as the key to obtain the corresponding coding value g(i, j). Then, according to the obtained g(i, j), the query is as follows: Figure 2 The preset color mapping table shown in the figure is used to obtain the final RGB value. An image is generated based on the RGB value of the above grid data.

[0023] Furthermore, in step S4), when the image is sliced, the image of each layer is pre-segmented according to the custom slice size to determine the center of each slice. In the actual segmentation, the cutting area of ​​each slice is expanded to a certain range around the pre-segmented slice center, so that the actual slice area is slightly larger than the pre-segmented slice area, and the edges of the actual segmented slices overlap.

[0024] Furthermore, in step S6), the specific steps of the adopted cache solution are as follows:

[0025] Step 61), if the required image slice is not in the cache, obtain the image slice of the required level and the image slice with a higher resolution than the current level;

[0026] Step 62), caching image slices with a resolution higher than the current level in the front end, and setting the cache time;

[0027] Step 63), if a higher resolution image is used later, the image in the cache is directly used;

[0028] Step 64), if the image slice cache time expires, delete it.

[0029] Furthermore, in step 8), the specific method of weighted average fusion is as follows:

[0030] F(x,y)=ωa·A(x,y)+ωb·B(x,y) (2)

[0031] In formula (2), F(x, y) is the final weighted fusion image, A(x, y) is the first image to be fused, and B(x, y) is the second image to be fused. Where ωa and ωb are weighting coefficients, ωa+ωb=1, if ωa=ωb=0.5, it is weighted average fusion. The rendering result is segmented and spliced ​​according to the spatial geographic location. For the overlapping parts of the segments, the final rendering result image is generated using the method of formula (2).

[0032] The present invention proposes a sliced ​​image rendering and sliced ​​display method based on WebGL, which has the beneficial effect that: the present invention summarizes the core issues of data processing and real-time rendering through the analysis of ocean grid data processing, display method and rendering process. The present invention uses a color mapping table to re-encode the grid data, and uses the color mapping table to generate an image. At the same time, combined with the pyramid slicing scheme, the image corresponding to the grid data is sliced ​​and indexed, which greatly reduces the amount of data transmission and further improves the data transmission efficiency. In terms of data rendering, the efficient rendering method of WebGL is adopted, and the traditional method of directly rendering the grid data is abandoned, and the image rendering method of the slice is used instead, which greatly speeds up the rendering effect and rendering speed. At the same time, in order to solve the problem of uneven edges that may be caused by slice splicing, this scheme uses a weighted fusion scheme to optimize the edges. Finally, when displaying the rendering results on the front end of the data, a caching scheme is adopted to solve the problem of the previous front-end display effect being not smooth enough. Specifically:

[0033] (1) The present invention uses pooling and cubic convolution interpolation operations to perform data thinning operations: In the process of building a data pyramid model, we need to perform data thinning operations on the original grid data to obtain grid data with a smaller resolution. In this process, traditional methods often use direct elimination of odd or even column data, or directly use pooling operations to perform data thinning operations. However, this will lose a lot of information. The present invention uses a method of first pooling and then performing cubic convolution interpolation, uses a maximum pooling layer for downsampling, and then uses cubic convolution interpolation combined with data from adjacent grid points for interpolation processing, and thus downsamples the image to the corresponding resolution rate. This method achieves fast data thinning while better maintaining the original data characteristics.

[0034] (2) The present invention adopts a processing method that combines the use of imaging and slicing for grid data: because the traditional method generally only slices the grid data, or converts the grid data into other forms such as JSON. In the case of a very large amount of data, the traditional slicing method still has defects. The present invention uses a color mapping table to image the grid data and slice the image. During the rendering process, there is no need to use the original grid data, only the image slices corresponding to the required part of the grid data are obtained, and then the image slices are directly rendered, which can greatly speed up the loading speed and rendering speed, and improve the timeliness of interaction.

[0035] (3) The present invention adopts a weighted fusion method to solve the problem of edge splitting after tile rendering: In the traditional tile rendering process, the front-end webgl will render each slice separately. Due to different sampling strategies for texture rendering, such as interpolation strategy or nearest neighbor, the connection of the tile edges will have an obvious sense of splitting due to the sampling strategy. In the present invention, the redundant edge parts are reserved in advance, and the rendered images are spliced ​​according to the position. For the overlapping parts of the edge parts, the image is fused by weighted average fusion to avoid the sense of splitting caused by direct splicing of the tile edges.

[0036] (4) The present invention adopts front-end caching technology: After the introduction of the slicing technology, when zooming in or out on the visualization results within a certain spatial range, the front end needs to render and load data at different levels. The present invention uses the front-end caching technology. After the user stays in a certain spatial range for one second, the front end automatically renders the higher-resolution slicing images below that level and caches the results. If the user subsequently zooms in, the cache is directly read, which greatly saves rendering and loading time and improves the smoothness of system interaction. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] The accompanying drawings are used to provide a further understanding of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the present invention and do not constitute a limitation of the present invention. In the accompanying drawings:

[0038] Figure 1 It is a flow chart of the present invention.

[0039] Figure 2 It is a color mapping representation scheme adopted by the present invention.

[0040] Figure 3 It is the result of using a color mapping table to visualize the grid data. Specific implementation methods

[0041] The technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention; it is obvious that the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments, and all other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making creative work are within the scope of protection of the present invention.

[0042] Now, the structural features of the present invention are described in detail with reference to the accompanying drawings. Figure 1 The present invention is a method for processing and rendering ocean grid data slice images based on WebGL, which specifically includes the following steps:

[0043] S1. Calculate standard resolution: According to the actual selected map standard scale, establish the standard scale level and the corresponding grid data resolution;

[0044] S2. Generate grid data pyramid: Use pooling and cubic convolution interpolation operations to perform data thinning operations on grid data to generate multi-level grid data of different resolutions;

[0045] S3. Obtain color data corresponding to the grid data by querying a preset color mapping table. Use the color mapping table to convert multi-level grid data into a PNG format color image.

[0046] S4. Slice the multi-level image and create an index.

[0047] S5. Obtaining the index of the required image slice according to the actual spatial range of the display window and the slicing rule: If the index of the required slice data is calculated according to the actual spatial range displayed by the window, including the minimum longitude, maximum longitude, minimum latitude, maximum latitude and current map scale information;

[0048] S6. Data request for image slices based on the index and use a cache solution: The front end requests the required image slices. If the actual display window range remains unchanged for more than a certain period of time, the larger resolution image slices within the actual geographic range are automatically cached;

[0049] S7, calculate texture according to image and render: by calculating the grayscale texture and color texture of the image, customize the shader logic, and make the shader combine the grayscale texture and color texture for hierarchical rendering to further improve the visualization effect. Use the webgl rendering method to render the grid data in real time, establish the canvas webgl context, establish the vertex shader according to the spatial information of the data, and then establish the fragment shader according to the style information such as the color example. At the same time, after the data rendering of the current interface is completed, continue to render the lower image fragments with a larger resolution;

[0050] S8, stitching the tile rendering images and performing weighted average fusion: After the tile rendering is completed, the tiles are stitched according to the actual geographical location range. Since redundant parts are left in advance, the edge parts of the tiles will partially overlap. The overlapping parts are weighted average fused to generate the final rendering result;

[0051] S9. Display rendering results: load and display the rendered image on the web platform.

[0052] The present invention is a method for processing and rendering sliced ​​images based on ocean grid data. By analyzing the problems in the process of processing and rendering ocean grid data, an optimization method for processing and rendering grid data is proposed. In terms of data processing, a method combining pooling operation and cubic convolution interpolation is adopted to perform multi-layer thinning of data according to the map scale, which reduces the amount of information while maintaining good data characteristics. Since the grid data is too large, considering the transmission pressure and processing pressure, a method of converting grid data into images is adopted, which greatly reduces the amount of data transmission without affecting the rendering effect. At the same time, an image slicing scheme is proposed, and the slicing technology is used to reduce the transmission of redundant data and further improve the data transmission efficiency. In terms of data rendering, the efficient rendering method of Webgl is adopted to improve the display effect of data. At the same time, in order to solve the problem of strong sense of splicing edge segmentation caused by the splicing of slice rendering results, a weighted fusion method is adopted. Specifically:

[0053] 1. When performing multi-level data thinning, the general method often directly extracts data by intercepting odd and even rows, which often leads to a large loss of data accuracy. The present invention uses a method of first pooling and then performing cubic convolution interpolation, uses a maximum pooling layer for downsampling, and then uses cubic convolution interpolation to combine the data of adjacent grid points for interpolation processing, thereby downsampling the image to the corresponding resolution, while achieving fast data thinning and better maintaining the original data characteristics. The specific calculation method is as follows:

[0054] (1) Divide the grid data into sub-regions according to the 2x2 pooling window;

[0055] (2) Perform a maximum pooling operation on each sub-region and use the pooled value as the new value of the sub-region;

[0056] (3) Use cubic convolution interpolation to interpolate the pooled grid data to the target resolution;

[0057] 2. Use the color map to visualize the grid data: read the grid data, count the values ​​of different types of grid data, encode the grid data type values ​​with natural numbers in the order of the original value size, generate a key-value pair dictionary dict, and then use the following formula to obtain the corresponding grid data value:

[0058] g(i,j)=dict[p(i,j)]

[0059] In the formula, p(i,j) is the value corresponding to the grid data point, dict is the code table, and the original grid data value is input into the dictionary as the key to obtain the corresponding code value g(i,j). Then, according to the obtained g(i,j), the query is as follows Figure 2 The preset color mapping table shown in the figure obtains the final RGB value. An image is generated based on the RGB value of the above grid data;

[0060] 3. Weighted average fusion method for fragment fusion:

[0061] In some embodiments of the present invention, the above step S7 specifically includes the following steps: stitching the rendered images according to the positions, and for the overlapping parts of the edge parts, weighted average fusion is performed using the following calculation formula: F(x, y) = ωa·A(x, y) + ωB·B(x, y), where F(x, y) is the final weighted fusion image, and A(x, y) is the image to be fused. Figure 1 The value at the (x,y) coordinate, B(x,y) is the value to be fused Figure 2 The value at the (x, y) coordinate. ωa, ωb are weighted coefficients, and ωa+ωb=1. The weighted average fusion of all the fragment edges generates the final rendering result.

Claims

1. A method for processing and rendering slice images of ocean grid data, characterized in that: The specific steps include: S1. Calculate standard resolution: Determine the standard scale level and the corresponding grid data resolution according to the actual selected map standard scale; S2, using pooling and interpolation operations to perform data thinning and generate multi-level, different-resolution grid data pyramids; S3, obtaining color data corresponding to the grid data by querying a preset color mapping table; The multi-level grid data is converted into a PNG format color image using a color mapping table, thereby generating multi-level image data; S4, fragment the multi-level images and create fragment indexes; S5. Request the backend for the index of the required image slice according to the actual spatial range of the display window and the slice rule; S6, obtaining image slices according to the data request and caching them; S7, generating textures according to image slices and rendering: using the webgl rendering method to render the current level image slices in the visible area; at the same time, after the data rendering of the current visible area is completed, continue to render the image slices of the current visible area with a larger resolution and cache them; S8, splicing the slice rendering images and optimizing the edges of the overlapping slices by using image fusion; S9, display rendering results: load and display the rendered image on the web platform; Wherein, step S2 comprises the following steps: S21, dividing the grid data into sub-regions according to a 2x2 pooling window; S22, performing a maximum pooling operation on each sub-region, and using the pooled value as a new value of the sub-region; S23, using cubic convolution interpolation to interpolate the pooled grid data to a target resolution; The specific cache strategy of step S6 is as follows: S61: If the required image slice is not in the cache, request to obtain the image slice of the required level, and if the condition that the visible area range remains unchanged for a certain period of time is met, obtain the image slice with a higher resolution than the current level; S62, caching image slices with a resolution higher than the current level in the front end, and setting the cache time; S63: If a higher resolution image is used subsequently, the image in the cache is directly used; S64: If the image slice cache time expires, delete it.

2. The method for processing and rendering slice images of ocean grid data according to claim 1, characterized in that: The specific requirements in step S4 are as follows: when the image is segmented, the image of each layer is pre-segmented according to the customized segment size to determine the center of each segment; in the actual segmentation, the cutting area of ​​each segment is expanded by 5% of the segment side length around the pre-segmented segment center, so that the actual segmentation area is larger than the pre-segmentation strategy segmentation area, and the edge parts of the segments after the actual segmentation overlap.

3. The method for processing and rendering slice images of ocean grid data according to claim 1, characterized in that: Specific requirements in step S6: When making a request for image slicing, use caching technology, and the specific steps are as follows: when the user stops changing the window range within 3 seconds, cache higher resolution slices of the current range; when the user changes the range or zooms in or out, if the target resolution has been cached, directly use the cached image for rendering.

4. The method for processing and rendering slice images of ocean grid data according to claim 1, characterized in that: Step S7 includes the following steps: S71, calculating the grayscale texture and color texture of the image slice; S72. The custom shader performs hierarchical rendering according to the grayscale texture and color texture values.

5. The method for processing and rendering slice images of ocean grid data according to claim 1, characterized in that: In step S8, the weighted average fusion formula of the overlapping parts of the slices is as follows: F(x,y)=ωa·A(x,y)+ωb·B(x,y) In the formula, F(x, y) is the final weighted fusion graph, A(x, y) is the first graph to be fused, and B(x, y) is the second graph to be fused; where ωa and ωb are weighting coefficients, ωa ≥ 0, ωb ≥ 0, ωa + ωb = 1.0.

Images