A method for generating three-dimensional thermal cloud map based on webgl

Abstract

The present invention relates to a method for generating a three-dimensional thermal cloud map based on webgl, comprising the steps of: S1: generating N cubes in a scene to be rendered, for filling the scene to be rendered; S2: respectively calculating the final opacity of each fragment of the six faces of the N cubes in step S1; S3: obtaining the RGB color value corresponding to the thermal map color band according to the final opacity of the fragment, thereby attaching the RGB color value to the fragment; S4: calculating the colors of all the fragments of all the cubes, and finally generating a three-dimensional thermal cloud map. The method for generating a three-dimensional thermal cloud map based on webgl generates N cubes from the scene to be rendered to fill the area, and then determines the color of the fragment by the distance between the thermal point and the cube fragment, thereby obtaining all the colors of the cube and generating a three-dimensional thermal cloud map. The method reduces the granularity of rendering, and the rendered thermal cloud map has low granularity and is smoother.

Description

Technical Field

[0001] The present invention relates to the field of deep learning technology, and in particular to a method for generating a three-dimensional thermal cloud map based on WebGL. Background Art

[0002] The events caused by social security, school safety, road traffic, natural or man-made disasters, etc. have brought huge losses of life and property to people. The detection, alarm and handling of events have become particularly important. If we only rely on manpower to complete these tasks, it can no longer meet people's needs. This requires the use of technical means to assist people in completing the detection, alarm and other related tasks of events, reducing people's workload and improving the efficiency of event handling. At the same time, government departments also attach great importance to such events and require the use of "human defense, material defense and technical defense" to efficiently handle or even avoid such events.

[0003] With the development of monitoring systems, the application of monitoring systems is increasing. When there are many monitoring locations, it is obviously unrealistic to analyze them manually, and the cost is also high. This puts forward the requirement for the intelligence of the monitoring system. Nowadays, with the continuous advancement of computer technology, storage capacity, and digital encoding and decoding technology, video monitoring has gradually developed towards intelligence. Summary of the invention

[0004] The purpose of the present invention is to provide a method for generating a three-dimensional thermal cloud map based on webgl. The granularity of the rendering is reduced, because the smaller the cube, the lower the granularity, and the rendered thermal cloud map has a lower granularity and is smoother.

[0005] To solve the above problems, the technical solution adopted by the present invention is: the method for generating a three-dimensional thermal cloud map based on webgl comprises the following steps:

[0006] S1: Generate N cubes in the scene to be rendered to fill the scene to be rendered;

[0007] S2: Calculate the final opacity of each fragment of the six faces of the N cubes in step S1 respectively;

[0008] S3: According to the final opacity of the fragment, the RGB color value corresponding to the heat map color band is obtained, so as to attach the RGB color value to the fragment;

[0009] S4: Calculate the colors of all the fragments of all the cubes, and finally generate a three-dimensional thermal cloud map.

[0010] Using the above technical solution, first generate N cubes to fill the area in the scene to be rendered. The smaller the cube, the lower the granularity, and the lower the granularity and smoother the rendered thermal cloud map. The three-dimensional thermal cloud map is volume rendering, not surface rendering. In the three-dimensional space of the rendered scene, there are color values ​​near each spatial coordinate. These colors appear continuous and uninterrupted at all angles, rather than just showing a few faces of the three-dimensional scene. The difference from other thermal maps is that the three-dimensional thermal map does not need to draw grayscale gradient circles; this method calculates the distance between each fragment in the space and all thermal points, so as to directly obtain the final opacity, and then finds the corresponding color from the color band to obtain a three-dimensional thermal cloud map.

[0011] As a preferred technical solution of the present invention, the specific steps of calculating the opacity of each fragment in step S2 are:

[0012] S21: Traverse the thermal points and get the opacity according to the distance between the fragment position and the thermal point. The formula is:

[0013] opacity=1-distance / maxRadius;

[0014] opacity=opacity>0? opacity: 0;

[0015] Among them, opacity is opacity, distance is the distance between the fragment position and the thermal point, and maxRadius is the range radius affected by the thermal point;

[0016] S22: The opacity obtained in step S21 is superimposed on the current opacity of the fragment to obtain the fragment opacity, and the formula is:

[0017] Fragment opacity = (1-fragment opacity)*opacity+fragment opacity;

[0018] Among them, the fragment opacity is the fragment opacity;

[0019] S23: looping steps S21 to S22, calculating the next thermal point, until all thermal points are traversed, and obtaining the final opacity of the fragment. The color of the fragment is determined by the distance of the fragment from each thermal point.

[0020] As a preferred technical solution of the present invention, the specific steps of step S3 are: according to the final opacity of the fragment, the corresponding RGB color value is obtained from the heat map color band, and the RGB color value is attached to the fragment; the color position corresponding to the opacity on the color band is: (1-opacity)*256.

[0021] As a preferred technical solution of the present invention, step S1 specifically includes the following steps:

[0022] S11: Generate N cubes in the scene to be rendered, that is, divide the scene with length a, width b, and height c into N cubes with width d, and calculate the coordinates of the center point of each cube; the formula is:

[0023] x=d*xIndex+d / 2+xmin;

[0024] y=d*yIndex+d / 2+ymin;

[0025] z=d*zIndex+d / 2+zmin;

[0026] Where d is the side length of the cube; xIndex is the index of the cube on the X axis; yIndex is the index of the cube on the Y axis; zIndex is the index of the cube on the Z axis; xmin, ymin, zmin are the minimum coordinates of the scene;

[0027] S12: Each cube consists of 8 vertices forming 12 triangles (point 123, point 134, point 437, point 478, point 876, point 865, point 562, point 521, point 514, point 548, point 267, point 273). N cubes have 12*N triangles. The vertices of 12*N triangles are transferred to the buffer object, waiting for the fragment shader to calculate the color.

[0028] As a preferred technical solution of the present invention, the specific steps of step S11 are:

[0029] S111: Divide the length a into segments, a divided by the cube width d to obtain n1 segments; divide the width b into segments, b divided by the cube width d to obtain n2 segments; divide the height c into segments, c divided by the cube width d to obtain n3 segments;

[0030] S112: Calculate the center point coordinates of N cubes with a width of d in a loop, thereby obtaining the center point coordinates of each cube.

[0031] Compared with the prior art, the technical solution of the present invention has the following beneficial effects: the method for generating a three-dimensional thermal cloud map based on webgl generates N cubes to fill the area of ​​the scene to be rendered, and then determines the color of the cube by the distance between the thermal point and the cube fragment, thereby obtaining all the colors of the cube and generating a three-dimensional thermal cloud map. This method reduces the granularity of the rendering, because the smaller the cube, the lower the granularity, and the rendered thermal cloud map has a lower granularity and is smoother. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] The technical solution of the present invention is further described below in conjunction with the accompanying drawings:

[0033] Figure 1 It is a flow chart of the method for generating a three-dimensional thermal cloud map based on webgl of the present invention;

[0034] Figure 2 The effect diagram of generating N cubes in step S11 of the method for generating a three-dimensional thermal cloud map based on webgl of the present invention;

[0035] Figure 3 A flowchart of calculating the center point of each cube in step S11 of the method for generating a three-dimensional thermal cloud map based on webgl of the present invention;

[0036] Figure 4 It is a schematic diagram of the triangle composition formed by the vertices of each cube in step S12 of the method for generating a three-dimensional thermal cloud map based on webgl of the present invention;

[0037] Figure 5 It is a flowchart of step S2 of the method for generating a three-dimensional thermal cloud map based on webgl of the present invention;

[0038] Figure 6 It is a schematic diagram of a fragment of a cube being affected by two thermal points in step S2 of the method for generating a three-dimensional thermal cloud map based on webgl of the present invention;

[0039] Figure 7 It is a schematic diagram of the color position corresponding to the opacity on the color band in step S3 of the method for generating a three-dimensional thermal cloud map based on webgl of the present invention;

[0040] Figure 8 The effect of the thermal cloud map obtained in step S4 of the method for generating a three-dimensional thermal cloud map based on webgl of the present invention Figure 1 ;

[0041] Fig. 9 The effect of the thermal cloud map obtained in step S4 of the method for generating a three-dimensional thermal cloud map based on webgl of the present invention Figure 2 . DETAILED DESCRIPTION

[0042] The technical solution of the present invention will be clearly and completely described below in conjunction with the embodiments. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0043] Embodiment: The method for generating a three-dimensional thermal cloud map based on webgl comprises the following steps:

[0044] S1: Generate N cubes in the scene to be rendered to fill the scene to be rendered;

[0045] The step S1 specifically includes the following steps:

[0046] S11: Generate N cubes in the scene to be rendered, that is, divide the scene with length a, width b, and height c into N cubes with width d, and calculate the coordinates of the center point of each cube; the formula is:

[0047] x=d*xIndex+d / 2+xmin;

[0048] y=d*yIndex+d / 2+ymin;

[0049] z=d*zIndex+d / 2+zmin;

[0050] Where d is the side length of the cube; xIndex is the index of the cube on the X axis; yIndex is the index of the cube on the Y axis; zIndex is the index of the cube on the Z axis; xmin, ymin, zmin are the minimum coordinates of the scene;

[0051] The specific steps of step S11 are:

[0052] S111: Divide the length a into segments, a divided by the cube width d to obtain n1 segments; divide the width b into segments, b divided by the cube width d to obtain n2 segments; divide the height c into segments, c divided by the cube width d to obtain n3 segments;

[0053] S112: cyclically calculating the center point coordinates of N cubes with a width of d, thereby obtaining the center point coordinates of each cube;

[0054] S12: Each cube consists of 8 vertices forming 12 triangles (point 123, point 134, point 437, point 478, point 876, point 865, point 562, point 521, point 514, point 548, point 267, point 273). N cubes have 12*N triangles. The vertices of 12*N triangles are transferred to the buffer object, waiting for the fragment shader to calculate the color.

[0055] S2: Calculate the final opacity of each fragment of the six faces of the N cubes in step S1 respectively;

[0056] The specific steps of calculating the opacity of each fragment in step S2 are:

[0057] S21: Traverse the thermal points and get the opacity according to the distance between the fragment position and the thermal point. The formula is:

[0058] opacity=1-distance / maxRadius;

[0059] opacity=opacity>0? opacity: 0;

[0060] Among them, opacity is opacity, distance is the distance between the fragment position and the thermal point, and maxRadius is the range radius affected by the thermal point;

[0061] S22: The opacity obtained in step S21 is superimposed on the current opacity of the fragment to obtain the fragment opacity, and the formula is:

[0062] Fragment opacity = (1-fragment opacity)*opacity+fragment opacity;

[0063] Among them, the fragment opacity is the fragment opacity;

[0064] S23: looping steps S21 to S22, calculating the next thermal point, until all thermal points are traversed, that is, the traversal is completed, and the final opacity of the fragment is obtained; the color of the fragment is determined by the distance of the fragment from each thermal point;

[0065] S3: According to the final opacity of the fragment, the RGB color value corresponding to the heat map color band is obtained, so as to attach the RGB color value to the fragment;

[0066] The specific steps of step S3 are: according to the final opacity of the fragment, the corresponding RGB color value is obtained from the heat map color band texture (red to green gradient color), and the RGB color value is attached to the fragment; the color position corresponding to the opacity on the color band is: (1-opacity)*256;

[0067] S4: Calculate the colors of all the fragments of all the cubes, and finally generate a three-dimensional thermal cloud map.

[0068] For ordinary technicians in this field, the specific embodiments are only illustrative descriptions of the present invention. It is obvious that the specific implementation of the present invention is not limited to the above-mentioned methods. As long as various non-substantial improvements are made using the method concepts and technical solutions of the present invention, or the concepts and technical solutions of the present invention are directly applied to other occasions without improvement, they are all within the protection scope of the present invention.

Claims

1. A method for generating a three-dimensional thermal cloud map based on webgl, characterized in that: The following steps are involved: S1: Generate N cubes in the scene to be rendered to fill the scene to be rendered; S2: Calculate the final opacity of each fragment of the six faces of the N cubes in step S1 respectively; S3: According to the final opacity of the fragment, the RGB color value corresponding to the heat map color band is obtained, so as to attach the RGB color value to the fragment; S4: Calculate the colors of all the fragments of all the cubes, and finally generate a three-dimensional thermal cloud map; The specific steps of calculating the opacity of each fragment in step S2 are: S21: Traverse the thermal points and get the opacity according to the distance between the fragment position and the thermal point. The formula is: opacity=1-distance / maxRadius; opacity=opacity>0? opacity: 0; Among them, opacity is opacity, distance is the distance between the fragment position and the thermal point, and maxRadius is the range radius affected by the thermal point; S22: The opacity obtained in step S21 is superimposed on the current opacity of the fragment to obtain the fragment opacity, and the formula is: Fragment opacity = (1-fragment opacity)*opacity+fragment opacity; Among them, the fragment opacity is the fragment opacity; S23: looping steps S21 to S22, calculating the next thermal point, until all thermal points are traversed, and obtaining the final opacity of the fragment; The specific steps of step S3 are: according to the final opacity of the fragment, the corresponding RGB color value is obtained from the heat map color band, and the RGB color value is attached to the fragment; the color position corresponding to the opacity on the color band is: (1-opacity)*256; The step S1 specifically includes the following steps: S11: Generate N cubes in the scene to be rendered, that is, divide the scene with length a, width b, and height c into N cubes with width d, and calculate the coordinates of the center point of each cube; the formula is: x=d*xIndex+d / 2+xmin; y=d*yIndex+d / 2+ymin; z=d*zIndex+d / 2+zmin; Where d is the side length of the cube; xIndex is the index of the cube on the X axis; yIndex is the index of the cube on the Y axis; zIndex is the index of the cube on the Z axis; xmin, ymin, zmin are the minimum coordinates of the scene; S12: Each cube consists of 8 vertices forming 12 triangles. N cubes have 12*N triangles. The vertices of 12*N triangles are transferred to the buffer object, waiting for the fragment shader to calculate the color.

2. The method for generating a three-dimensional thermal cloud map based on webgl according to claim 1, characterized in that: The specific steps of step S11 are: S111: Divide the length a into segments, a divided by the cube width d to obtain n1 segments; divide the width b into segments, b divided by the cube width d to obtain n2 segments; divide the height c into segments, c divided by the cube width d to obtain n3 segments; S112: Calculate the center point coordinates of N cubes with a width of d in a loop, thereby obtaining the center point coordinates of each cube.

Images