A method for generating thermal cloud map based on webgl

Abstract

The present invention relates to a method for generating a thermal cloud map based on WebGL, comprising the following steps: S1: generating multiple triangle vertices according to each thermal point; S2: constructing a circle in a fragment shader and calculating the opacity of the fragment, and generating a grayscale image in a frame buffer; S3: combining the grayscale image generated in step S2 with the thermal color band to obtain a thermal cloud map. The method for generating a thermal cloud map based on WebGL can meet the requirements of rapidly generating a thermal map for millions of thermal points, at a millisecond level, without lag, and with a very fast rendering speed, thereby improving the generation speed and efficiency.

Description

Technical Field

[0001] The present invention relates to the field of deep learning technology, and in particular to a method for generating a 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, reduce people's workload, and improve 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 thermal cloud map based on WebGL, which can quickly generate thermal maps for millions of thermal points at the millisecond level, without any lag, and with a very fast rendering speed, thereby improving the generation speed and efficiency.

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

[0006] S1: Each thermal point generates multiple triangle vertices according to the thermal point;

[0007] S2: Construct a circle in the fragment shader and calculate the opacity of the fragment, and generate a grayscale image in the frame buffer;

[0008] S3: Combine the grayscale image and thermal color band generated in step S2 to obtain a thermal cloud image.

[0009] Using the above technical solution, any graphics drawn based on webgl are composed of triangular faces, so each thermal point requires two triangles to form a square, the thermal point is the center of the square, and the triangle vertices are generated according to the thermal point; in order to remove redundant fragments (that is, to remove redundant pixels), it is necessary to cut the square into a circle in the fragment shader, and calculate the opacity to generate a grayscale image; the grayscale image and the thermal color band image are combined to generate a heat map; this technical solution can meet the needs of quickly generating heat maps for millions of thermal points, at the millisecond level, without lag, and with a very fast rendering speed, which improves the generation speed and efficiency.

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

[0011] S11: Each thermal point generates 4 vertices with the thermal point as the center, and the 4 vertices form 2 triangles; 2 triangles have 6 vertices, so N thermal points have N*6 vertices;

[0012] S12: Pass the triangle vertices of all heat points into the buffer object.

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

[0014] S21: construct a circle in the fragment shader, that is, form a thermal point circle, and add transparency to the pixel point according to the distance from the fragment to the center of the thermal point;

[0015] S22: Draw N*2 triangles in the shader, automatically superimpose the transparency of the heat point circle based on the WebGL million-level data volume, and finally generate a frame buffer grayscale image.

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

[0017] S211: In the fragment shader, a circle with a radius of r is cut out with the heat point as the center. The opacity changes linearly according to the distance between the position of the fragment and the center of the circle. The closer the position of the fragment is to the center of the circle, the greater the opacity value, and the farther the fragment is from the center of the circle, the lower the opacity value;

[0018] S212: Calculate the opacity of each fragment;

[0019] S2121: Obtain the opacity according to the distance between the fragment position and the associated thermal point. The formula is:

[0020] opacity=1-distance / maxRadius;

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

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

[0023] S2122: The opacity obtained in step S2121 is superimposed on the current opacity of the fragment to obtain the fragment opacity, and the formula is:

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

[0025] Among them, the fragment opacity is the fragment opacity.

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

[0027] S31: The four vertices of the drawing area of ​​the heat map are formed into two triangles;

[0028] S32: transfer the triangle vertices of all heat points to the buffer object;

[0029] S33: pass the grayscale image and thermal band as textures into the buffer object;

[0030] S34: In the fragment shader, set the color of the fragment;

[0031] S35: According to the position of the fragment, the opacity of the grayscale image is obtained from the grayscale image texture, and the color value of the proportional position of the color band is obtained from the thermal color band according to the opacity, and finally the color value is assigned to the fragment to obtain the thermal cloud map.

[0032] As a preferred technical solution of the present invention, step S35 obtains the corresponding RGB color value from the heat map color band according to the opacity of the grayscale image, and attaches the RGB color value to the color band; the color position corresponding to the opacity on the color band is: (1-opacity)*256.

[0033] As a preferred technical solution of the present invention, the specific steps of step S11 are: taking the thermal point as the center, generating a rectangle with 2r as the side, and marking the four vertices as point 1, point 2, point 3, and point 4, wherein point 1, point 2, point 3 and point 1, point 3, point 4 respectively form two counterclockwise triangles.

[0034] As a preferred technical solution of the present invention, the specific steps of step S31 are: the four vertices of the drawing area of ​​the heat map are marked as point a, point b, point c, and point d, wherein point a, point b, point c and point a, point c, point d respectively form two counterclockwise triangles.

[0035] Compared with the prior art, the technical solution of the present invention has the beneficial effect that the method for generating a thermal cloud map based on WebGL can quickly generate a thermal map for millions of thermal points at the millisecond level without any lag, and the rendering speed is very fast, thereby improving the generation speed and efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

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

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

[0038] Figure 2 It is a flowchart of steps S1-S2 of the method for generating a thermal cloud map based on webgl of the present invention;

[0039] Figure 3 A schematic diagram of generating two triangles in step S11 of the method for generating a thermal cloud map based on webgl of the present invention;

[0040] Figure 4 It is a schematic diagram of the step S21 of the method for generating a thermal cloud map based on webgl of the present invention;

[0041] Figure 5 It is an effect diagram of the grayscale image generated in step S22 of the method for generating a thermal cloud image based on webgl of the present invention;

[0042] Figure 6 It is a flowchart of step S3 of the method for generating a thermal cloud map based on webgl of the present invention;

[0043] Figure 7 A schematic diagram of generating two triangles in step S31 of the method for generating a thermal cloud map based on webgl of the present invention;

[0044] Figure 8 It is a schematic diagram of a grayscale image and a thermal band color image in step S33 of the method for generating a thermal cloud image based on webgl of the present invention;

[0045] Fig. 9 This is a flow chart showing the effect of step S35 of the method for generating a thermal cloud map based on webgl of the present invention;

[0046] Fig.10The present invention is a flow chart of the effect of a thermal cloud map obtained by the method for generating a thermal cloud map based on WebGL. DETAILED DESCRIPTION

[0047] 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.

[0048] Example: Figure 1-2 As shown, the method for generating a thermal cloud map based on webgl includes the following steps:

[0049] S1: Each thermal point generates multiple triangle vertices according to the thermal point;

[0050] The specific steps of step S1 are:

[0051] S11: Each thermal point generates 4 vertices with the thermal point as the center, and the 4 vertices form 2 triangles; 2 triangles have 6 vertices, so N thermal points have N*6 vertices; Figure 3 As shown, the specific steps of step S11 are: taking the thermal point as the center, generating four vertices of a rectangle with 2r as the side, marked as point 1, point 2, point 3, and point 4, wherein point 1, point 2, point 3 and point 1, point 3, point 4 respectively form two counterclockwise triangles;

[0052] S12: Pass the triangle vertices of all thermal points into the buffer object;

[0053] S2: Construct a circle in the fragment shader and calculate the opacity of the fragment, and generate a grayscale image in the frame buffer;

[0054] The specific steps of step S2 are:

[0055] S21: Figure 4 As shown, in the fragment shader, a circle is constructed to form a thermal point circle, and transparency is added to the pixel point according to the distance from the fragment to the center of the thermal point;

[0056] The specific steps of step S21 are:

[0057] S211: In the fragment shader, a circle with a radius of r is cut out with the heat point as the center. The opacity changes linearly according to the distance between the position of the fragment and the center of the circle. The closer the position of the fragment is to the center of the circle, the greater the opacity value, and the farther the fragment is from the center of the circle, the lower the opacity value;

[0058] S212: Calculate the opacity of each fragment;

[0059] S2121: Obtain the opacity according to the distance between the fragment position and the associated thermal point. The formula is:

[0060] opacity=1-distance / maxRadius;

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

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

[0063] S2122: The opacity obtained in step S2121 is superimposed on the current opacity of the fragment to obtain the fragment opacity, and the formula is:

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

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

[0066] S22: Draw N*2 triangles in the shader, automatically superimpose the transparency of the heat point circle based on the webgl million-level data volume, and finally generate a frame buffer grayscale image; Figure 5 As shown;

[0067] S3: Combine the grayscale image and thermal color band generated in step S2 to obtain a thermal cloud image; Figure 6 As shown,

[0068] S31: The four vertices of the drawing area of ​​the heat map are formed into two triangles; Figure 7 As shown, the specific steps of step S31 are: the four vertices of the drawing area of ​​the heat map are marked as point a, point b, point c, and point d, wherein point a, point b, point c and point a, point c, point d respectively form two counterclockwise triangles;

[0069] S32: transfer the triangle vertices of all heat points to the buffer object;

[0070] S33: pass the grayscale image and thermal band as textures into the buffer object; Figure 8 As shown;

[0071] S34: In the fragment shader, set the color of the fragment;

[0072] S35: According to the position of the fragment, the opacity of the grayscale image is obtained from the grayscale image texture, and the color value of the proportional position of the color band is obtained from the thermal color band according to the opacity, and finally the color value is assigned to the fragment to obtain the thermal cloud map (such as Fig.10 As shown); Step S35 obtains the corresponding RGB color value from the heat map color band according to the opacity of the grayscale image, and attaches the RGB color value to the color band; the color position corresponding to the opacity on the color band is: (1-opacity)*256, such as Fig. 9 shown.

[0073] 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 thermal cloud map based on webgl, characterized in that: The following steps are involved: S1: Each thermal point generates multiple triangle vertices according to the thermal point; S2: Construct a circle in the fragment shader and calculate the opacity of the fragment, and generate a grayscale image in the frame buffer; S3: Combining the grayscale image and thermal color band generated in step S2 to obtain a thermal cloud image; The specific steps of step S1 are: S11: Each thermal point generates 4 vertices with the thermal point as the center, and the 4 vertices form 2 triangles, so N thermal points have N*6 vertices; S12: Pass the triangle vertices of all thermal points into the buffer object; The specific steps of step S2 are: S21: construct a circle in the fragment shader, that is, form a thermal point circle, and add transparency to the pixel point according to the distance from the fragment to the center of the thermal point; S22: Draw N*2 triangles in the shader, automatically superimpose the transparency of the heat point circle based on the webgl million-level data volume, and finally generate a frame buffer grayscale image; The specific steps of step S21 are: S211: In the fragment shader, a circle with a radius of r is cut out with the heat point as the center. S212: Calculate the opacity of each fragment; S2121: Obtain the opacity according to the distance between the fragment position and the associated 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 associated thermal point, and maxRadius is the range radius affected by the thermal point; S2122: The opacity obtained in step S2121 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; The specific steps of step S3 are: S31: The four vertices of the drawing area of ​​the heat map are formed into two triangles; S32: transfer the triangle vertices of all heat points to the buffer object; S33: pass the grayscale image and thermal band as textures into the buffer object; S34: In the fragment shader, set the color of the fragment; S35: according to the position of the fragment, the opacity of the grayscale image is obtained from the grayscale image texture, and the color value of the color band ratio position is obtained from the thermal color band according to the opacity, and finally the color value is assigned to the fragment to obtain the thermal cloud map; The step S35 obtains the corresponding RGB color value from the heat map color band according to the opacity of the grayscale image, and attaches the RGB color value to the color band; the color position corresponding to the opacity on the color band is: (1-opacity)*256; The specific steps of step S11 are: taking the thermal point as the center, generate four vertices of a rectangle with 2r as the side, marked as point 1, point 2, point 3, and point 4, wherein point 1, point 2, point 3 and point 1, point 3, point 4 respectively form two counterclockwise triangles.

2. The method for generating a thermal cloud map based on webgl according to claim 1, characterized in that: The specific steps of step S31 are as follows: the four vertices of the drawing area of ​​the heat map are marked as point a, point b, point c, and point d, wherein point a, point b, point c and point a, point c, point d respectively form two counterclockwise triangles.

Images