WebGL-based large-scale heat map rendering method, system, medium and device

Abstract

The present invention relates to a large-scale heat map rendering method based on WebGL, which includes: a heat point smooth rendering step: constructing a model to be rendered and a variety of resources required for the model to be rendered, rendering the model to be rendered in a heat map overlay rendering pipeline using a point drawing mode, performing a gradient smoothing process on the heat value of the heat point based on a preset smoothing function, and caching the smoothing result of the heat point in a shared texture memory; a heat point shading rendering step: rendering the smoothing result of the heat point based on a gradient color band texture map in a heat map shading rendering pipeline, and caching the shading result of the heat point in a shared texture memory; a user terminal rendering step: transferring the shading overlay result of the heat point in the form of a texture to the user terminal rendering pipeline for rendering processing, and outputting the final heat map processing result to a user display page. The present invention also relates to a large-scale heat map rendering system, medium and device based on WebGL.

Description

Technical Field

[0001] The present invention relates to the field of heat map rendering technology, and in particular to a WebGL-based large-scale heat map rendering method, system, medium and device. Background Art

[0002] Heat maps are currently widely used in 3D virtual simulations to visually represent various types of data, such as web page visit statistics, regional population density, gas concentrations, and traffic congestion levels. These data are displayed using a graphical color scale, providing a clear and scientific reference for users and researchers. Existing technologies typically generate and render heat maps using canvas or WebGL. The former involves drawing a circle for a single point on the canvas, then filling it with a radial gradient of heat values ​​from the center outward. Multiple grayscale circles generated for each point are then superimposed to create a stacked grayscale image. The canvas corresponding to this stacked grayscale image is then transferred to a WebGL graphics display system, which combines it with a basemap to create a perfect heat map display of the business data. This heat map calculation and rendering method is relatively slow. For ultra-large screen systems with large, high-pixel heat map canvases, this transfer process can cause thread blocking. The larger the data, the longer the blocking time, resulting in page lag in the display system, severely impacting the user experience and hindering interactive operations. In the latter technology, when using WebGL for drawing, a rectangular area is used to construct a heat point radiation circle. The texture of the rectangular area is drawn to obtain a single-point heat radiation circle. The heat point radiates from the center of the rectangle to the surrounding areas to obtain a circular radiation circle. The existing technology mostly uses linear interpolation to interpolate the heat value from the center to the surrounding areas to obtain a gradient effect. However, the radiation circle generated by this method will have obvious roughness when multiple radiation circles are superimposed, making the superimposed result not smooth enough. Another interpolation method uses a Gaussian function for interpolation. The Gaussian function is infinitely close to 0 as the radius increases. When the Gaussian function is intercepted within the circle, the edge value of the circle will be a smaller value, not 0. In this way, when multiple radiation circles are superimposed, there will also be obvious fault marks at the edge, making the superimposed result not smooth enough.

[0003] The following problems currently exist in the prior art:

[0004] 1) For large-screen display systems, the screen size is 4096*4096, or larger. Current technology cannot meet the requirements for smooth interactive operation when constructing heat maps at this size while meeting the clarity requirements. The reason is as follows: There is a texture transfer process from the texture constructed by canvas to the final display system. When the size is too large, the heat point overlay map constructed by canvas is transferred to the WebGL display system in texture form. The excessive texture data can easily cause thread blocking, resulting in page freezes and inability to meet interactive operation requirements. Specifically, Figure 1 、 Figure 2 As shown;

[0005] 2) On the other hand, in the process of constructing and drawing heat points, most current technologies draw a rectangular patch (two triangles), then construct an inscribed circle from the center of the rectangle to generate a gradient radiation circle, such as Figure 3 As shown;

[0006] 3) In the existing technology, linear and Gaussian functions are commonly used for gradient smoothing. However, linear and Gaussian functions will have discontinuous value jumps after superimposing multiple points, resulting in an overall non-smooth curve.

[0007] Take the Gaussian function as an example. The left side of the orthogonal camera projection range is -1 and the right side is 1. When the Gaussian function is drawn from the center of the single-point canvas, at the edge x = -1 and x = 1, the value of the Gaussian function is a very small value, but not 0, such as Figure 4 As shown, when multiple such functions are superimposed, the value of these small jumps will accumulate. When the accumulation reaches a certain level, the thermal image will have many creases, resulting in an uneven appearance, such as Figure 5 、 Figure 6 As shown. Of course, adjusting the Gaussian function σ parameter can make the boundary point infinitely close to 0. However, too large a σ value will cause the Gaussian curve to become a narrow strip shape, forming a too steep curve, so that the heat point formed is too concentrated in the center of the heat point and insufficiently diffused to the surroundings. The same is true for the linear function and the superposition result, as shown in Figure 7 、 Figure 8 As shown, the same problem exists.

[0008] In order to solve the problems existing in the existing technology, it is urgent to develop a high-precision thermal map rendering method that meets the requirements of ultra-large size and large screen systems, and at the same time design a new smoothing function to make the superposition result smoother. Summary of the Invention

[0009] The technical problem to be solved by the present invention is to address the deficiencies of the existing technology and provide a method, system, medium and device for rendering large-scale heat maps based on WebGL.

[0010] The present invention solves the above technical problems with the following technical solution: a method for rendering a large-scale heat map based on WebGL, the method comprising:

[0011] Thermal point smooth rendering step: Build the model to be rendered and the various resources required for the model to be rendered, render the model to be rendered in the heat map overlay rendering pipeline using point drawing mode, perform gradient smoothing on the thermal values ​​of the thermal points based on a preset smoothing function, and cache the smoothing results of the thermal points in the shared texture memory;

[0012] Heat point shading rendering steps: construct a gradient color band texture map, render the smooth results of the heat points based on the gradient color band texture map in the heat map shading rendering pipeline, and cache the shading results of the heat points in the shared texture memory;

[0013] User terminal rendering step: The shading overlay results of the heat points are passed to the user terminal rendering pipeline in the form of textures for rendering processing, and the final heat map processing results are output to the user display page.

[0014] Preferably, the above-mentioned hot spot smooth rendering step further includes:

[0015] Constructing smooth rendering steps: Prepare hotspot data, build the first scene, the first camera, the first geometry, the first rendering material, build the first rendering queue, and add the first camera and the first geometry to the first scene;

[0016] Smooth rendering parameter input step: pass the various parameters required for rendering the material into the shader in the form of uniforms, and pass the hot spot data as vertex data into the hot spot overlay rendering pipeline;

[0017] Smoothing step: Set the size of the drawn thermal point to a predetermined size, pass the thermal data through the vertex shader to the fragment shader after processing, use the preset smoothing function in the fragment shader to smooth the thermal value of the thermal point from the center of the circle to the surrounding radial gradient, and use the point drawing mode to complete the smooth rendering;

[0018] Output smooth result step: The fragment shader outputs the smooth processing result of the hot point to the frame buffer and then to the shared texture memory.

[0019] Preferably, the above-mentioned hot spot shading and rendering step further includes:

[0020] Constructing the shader rendering step: constructing the second scene, the second camera, the second geometry, the second rendering material, constructing the second rendering queue, adding the second camera and the second geometry to the second scene, and constructing the gradient color band texture map;

[0021] Shading rendering parameter input step: pass the gradient color band texture map, the smoothing result of the heat point and various rendering parameters into the shader in the form of texture through uniforms;

[0022] Shading and rendering steps: The vertex coordinates of the hot point are transferred from the vertex shader to the fragment shader for processing, and the shading and rendering are completed using the triangle drawing mode;

[0023] Output shading result step: The fragment shader outputs the shading processing result of the hot point to the frame buffer and then to the shared texture memory.

[0024] Preferably, the user terminal rendering step includes:

[0025] Construct terminal rendering steps: construct the third scene, the third camera, the third geometry, the third rendering material, and the third rendering queue;

[0026] Terminal rendering parameter input step: pass the shading processing results of the heat point into the shader in the form of texture through uniforms;

[0027] Terminal rendering step: Use triangle drawing mode to complete user terminal rendering;

[0028] Output terminal result step: The fragment shader outputs the user terminal processing result of the hot point to the user page.

[0029] Preferably, the preset smooth function is:

[0030]

[0031] Where a is the coordinate value of the center of the thermal point, and a is an arbitrary real number. Different thermal points correspond to different a values. f(x) is the longitudinal profile curve of the thermal point, x is the horizontal axis of the thermal point, and is the independent variable of the smooth function. For a certain thermal point, f(x) represents the smooth curve generated along the horizontal axis x.

[0032] The present invention also provides a WebGL-based large-size heat map rendering system, which adopts the WebGL-based large-size heat map rendering method described above, and the system includes:

[0033] Thermal point smooth rendering module: used to build the model to be rendered and the various resources required for the model to be rendered, render the model to be rendered in the heat map overlay rendering pipeline using point drawing mode, perform gradient smoothing on the thermal values ​​of the thermal points based on a preset smoothing function, and cache the smoothing results of the thermal points in the shared texture memory;

[0034] Heat spot shading rendering module: Constructs a gradient color band texture map, renders the smooth results of the heat spots based on the gradient color band texture map in the heat map shading rendering pipeline, and caches the shading results of the heat spots in the shared texture memory;

[0035] User terminal rendering module: The shading overlay results of the heat points are passed to the user terminal rendering pipeline in the form of textures for rendering processing, and the final heat map processing results are output to the user display page.

[0036] Preferably, the above-mentioned hot spot smooth rendering module further includes:

[0037] Build a smooth rendering module: prepare the hotspot data, build the first scene, the first camera, the first geometry, the first rendering material, build the first rendering queue, and add the first camera and the first geometry to the first scene;

[0038] Smooth rendering parameter input module: passes various parameters required for rendering materials into the shader in the form of uniforms, and passes the hot spot data as vertex data into the hot spot overlay rendering pipeline;

[0039] Smoothing module: Sets the size of the drawn thermal point to a predetermined size, passes the thermal data through the vertex shader to the fragment shader after processing, uses the preset smoothing function in the fragment shader to smooth the thermal value of the thermal point from the center of the circle to the surrounding radial gradient, and uses the point drawing mode to complete the smooth rendering;

[0040] Output smooth result module: The fragment shader outputs the smooth processing results of the hot spot to the frame buffer and then to the shared texture memory.

[0041] Preferably, the above-mentioned hot spot shading and rendering module further includes:

[0042] Constructing a shading rendering module: constructing a second scene, a second camera, a second geometry, a second rendering material, constructing a second rendering queue, adding the second camera and the second geometry to the second scene, and constructing a gradient color band texture map;

[0043] Shading rendering parameter input module: pass gradient color band texture map, hot spot smoothing results and various rendering parameters into the shader in texture form through uniforms;

[0044] Shading and rendering module: The vertex coordinates of the hot spot are transferred from the vertex shader to the fragment shader for processing, and the shading and rendering are completed using the triangle drawing mode;

[0045] Output shading result module: The fragment shader outputs the shading processing results of the hot spot to the frame buffer and then to the shared texture memory.

[0046] The present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the above-mentioned WebGL-based large-size heat map rendering method.

[0047] The present invention provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, the steps of the WebGL-based large-size heat map rendering method are implemented.

[0048] The beneficial effects of this method invention are:

[0049] 1) This invention proposes a high-precision thermal map rendering method that meets the requirements of ultra-large-scale large-screen systems. It also proposes a new smoothing function to make the superposition result smoother.

[0050] 2) The smooth function constructed by the present invention smoothly processes the thermal value of the thermal point from the center of the circle to the surrounding radial direction, and the value becomes smoother after the multi-point superposition is completed;

[0051] 3) The point drawing mode adopted by the present invention merges all points, greatly reducing the number of rendering draw calls and significantly improving performance;

[0052] 4) The present invention uses a new smoothing function to solve the problem of edge fold marks on the superimposed edges of thermal points and ensure the smoothness of the thermal map.

[0053] Advantages of additional aspects of the present invention will be given in part in the following description and in part will be obvious from the following description, or will be learned through practice of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the embodiments of the present invention or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0055] Figure 1 Schematic diagram of texture blocking in the prior art Figure 1 ;

[0056] Figure 2 Schematic diagram of texture blocking in the prior art Figure 2 ;

[0057] Figure 3 A schematic diagram of drawing a rectangular patch in the prior art;

[0058] Figure 4 A Gaussian function diagram of the prior art Figure 1 ;

[0059] Figure 5 Schematic diagram of Gaussian function superposition in the prior art Figure 2 ;

[0060] Figure 6 Schematic diagram of Gaussian function superposition in the prior art Figure 3 ;

[0061] Figure 7 This is a linear function diagram of the prior art. Figure 1 ;

[0062] Figure 8 Schematic diagram of linear function superposition in the prior art Figure 2 ;

[0063] Figure 9 This is a flow chart of the WebGL-based large-scale heat map rendering method of the present invention;

[0064] Figure 10 This is a schematic diagram of the rendering pipeline process according to a specific embodiment of the present invention;

[0065] Figure 11 A schematic diagram of a point drawing mode for a specific embodiment of the present invention;

[0066] Figure 12 This is a schematic diagram of a smooth function equation curve according to an embodiment of the present invention;

[0067] Figure 13 This is a schematic diagram of the superimposed curves according to an embodiment of the present invention;

[0068] Figure 14 Schematic diagram of a grayscale overlay diagram according to an embodiment of the present invention;

[0069] Figure 15 This is a schematic diagram of an opaque method for rendering a terminal page according to an embodiment of the present invention;

[0070] Figure 16 This is a schematic diagram of a transparent terminal page rendering method according to an embodiment of the present invention;

[0071] Figure 17 This is a schematic diagram of controlling the transparency of a terminal page according to an embodiment of the present invention;

[0072] Figure 18 This is a schematic diagram of a gradient color band texture diagram according to an embodiment of the present invention;

[0073] Figure 19 This is a schematic diagram of an ultra-large screen display system according to an embodiment of the present invention;

[0074] Figure 20 This is a schematic diagram of the WebGL-based large-scale heat map rendering system of the present invention. DETAILED DESCRIPTION

[0075] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are part of the embodiments of the present invention, not all of them. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.

[0076] The present invention aims to provide a high-precision thermal map rendering method that meets the requirements of ultra-large size and large-screen systems, and at the same time designs a new smoothing function to make the superposition result smoother.

[0077] The technical solution of the present invention to solve the above technical problems is as follows: Figure 9 As shown, a large-scale heat map rendering method based on WebGL, the method comprising:

[0078] Thermal point smooth rendering step S10: constructing a model to be rendered and various resources required for the model to be rendered, rendering the model to be rendered in the heat map overlay rendering pipeline using point drawing mode, performing gradient smoothing on the thermal values ​​of the thermal points based on a preset smoothing function, and caching the smoothing results of the thermal points in a shared texture memory;

[0079] Heat point shading rendering step S20: constructing a gradient color band texture map, rendering the smooth result of the heat point based on the gradient color band texture map in the heat map shading rendering pipeline, and caching the shading result of the heat point in the shared texture memory;

[0080] User terminal rendering step S30: The coloring and superposition results of the heat points are transferred to the user terminal rendering pipeline in the form of textures for rendering processing, and the final heat map processing results are output to the user display page.

[0081] Preferably, the above-mentioned hot spot smooth rendering step S10 further includes:

[0082] Constructing smooth rendering steps: Prepare hotspot data, build the first scene, the first camera, the first geometry, the first rendering material, build the first rendering queue, and add the first camera and the first geometry to the first scene;

[0083] Smooth rendering parameter input step: pass the various parameters required for rendering the material into the shader in the form of uniforms, and pass the hot spot data as vertex data into the hot spot overlay rendering pipeline;

[0084] Smoothing step: Set the size of the drawn thermal point to a predetermined size, pass the thermal data through the vertex shader to the fragment shader after processing, use the preset smoothing function in the fragment shader to smooth the thermal value of the thermal point from the center of the circle to the surrounding radial gradient, and use the point drawing mode to complete the smooth rendering;

[0085] Output smooth result step: The fragment shader outputs the smooth processing result of the hot point to the frame buffer and then to the shared texture memory.

[0086] Preferably, the hot spot shading and rendering step S20 further includes:

[0087] Constructing the shader rendering step: constructing the second scene, the second camera, the second geometry, the second rendering material, constructing the second rendering queue, adding the second camera and the second geometry to the second scene, and constructing the gradient color band texture map;

[0088] Shading rendering parameter input step: pass the gradient color band texture map, the smoothing result of the heat point and various rendering parameters into the shader in the form of texture through uniforms;

[0089] Shading and rendering steps: The vertex coordinates of the hot point are transferred from the vertex shader to the fragment shader for processing, and the shading and rendering are completed using the triangle drawing mode;

[0090] Output shading result step: The fragment shader outputs the shading processing result of the hot point to the frame buffer and then to the shared texture memory.

[0091] Preferably, the user terminal rendering step S30 includes:

[0092] Construct terminal rendering steps: construct the third scene, the third camera, the third geometry, the third rendering material, and the third rendering queue;

[0093] Terminal rendering parameter input step: pass the shading processing results of the heat point into the shader in the form of texture through uniforms;

[0094] Terminal rendering step: Use triangle drawing mode to complete user terminal rendering;

[0095] Output terminal result step: The fragment shader outputs the user terminal processing result of the hot point to the user page.

[0096] Preferably, the preset smooth function is:

[0097]

[0098] Where a is the coordinate value of the center of the thermal point, and a is an arbitrary real number. Different thermal points correspond to different a values. f(x) is the longitudinal profile curve of the thermal point, x is the horizontal axis of the thermal point, and is the independent variable of the smooth function. For a certain thermal point, f(x) represents the smooth curve generated along the horizontal axis x.

[0099] The following describes in detail the specific embodiments of the present invention with reference to the accompanying drawings:

[0100] The embodiment of the present invention uses WebGL to directly construct heat points, and then smoothly overlays the heat values ​​of multiple heat points. The entire process is carried out in the heat point overlay rendering pipeline, and the output result is stored in the texture memory, which will be directly used by another rendering pipeline (user terminal rendering pipeline), eliminating the CPU to GPU transfer process mentioned above, greatly improving speed and efficiency. The shared texture memory and rendering pipeline flow chart is as follows Figure 10 From top to bottom, they are the heat point overlay rendering pipeline, the heat map shading rendering pipeline, and the user terminal rendering pipeline. The rendering pipelines are connected by shared texture memory.

[0101] 1. Thermal value superposition of thermal points

[0102] 1.1 Preparation of heat point data, organized in the form of [x,y,heatValue];

[0103] 1.2 Build a new scene 1, camera 1, geometry 1, rendering material 1, build rendering queue 1, and add camera 1 and geometry 1 to scene 1;

[0104] 1.3 Enter the hotspot overlay rendering pipeline from the graphics API (Application Programming Interface), such as Figure 10 , pass in the thermal point data as vertex data;

[0105] 1.4 Rendering material uses shader material, and passes the maximum transparency value (MaxOpacity), minimum transparency value (MinOpacity), circle radius value R, maximum heat value (MaxHeatValue), and minimum heat value (MinHeatValue) into the shader in the form of uniforms;

[0106] 1.5 In the rendering pipeline, both the vertex shader and the fragment shader are programmable shaders, which can be coded by programmers. The size of the drawing heat point is set to 2R, such as Figure 11 As shown;

[0107] 1.6 The data in the vertex shader is processed by hardware, assembled and rasterized before being passed to the fragment shader;

[0108] In the 1.7 fragment shader, the smoothing function constructed by the present invention is used to smooth the thermal value of the thermal point from the center of the circle to the surrounding radial gradient, and the result will be smoother after multi-point superposition;

[0109] 1.8 The drawing mode (drawMode) of this rendering process uses point drawing mode;

[0110] 1.9 Camera uses an orthographic camera, with the left, right, bottom, top, near, and far parameters set to -1, 1, -1, 1, 0.1, and 2 respectively; the camera position is placed directly above the geometry, with coordinates of (0, 1, 0);

[0111] 1.10 Set the render material's Color Blending mode to Overlay mode and its Transparent property to True;

[0112] The 1.11 fragment shader outputs the final processing result to the frame buffer and then to the texture memory in preparation for the next rendering pipeline.

[0113] 2. Coloring of hot spots

[0114] 2.1 Build new scene 2, camera 2, geometry 2, rendering material 2, build rendering queue 2, and add camera 2 and geometry 2 to scene 2;

[0115] 2.2 Construct a gradient color band texture map (colormap). The gradient color band texture map is a texture generated by canvas with a width of 256 and a height of 1. By inputting n (n=5 in this case) [0-1] values ​​and corresponding colors, and then using the canvas's createLinearGradient and addColorStop functions, the corresponding gradient texture map can be generated. The process is as follows: Figure 18 shown.

[0116] 2.3 Rendering material uses shader material, and passes the result (grayTexture) generated by the previous rendering pipeline and the gradient color band texture (colormap) in the form of textures through the uniforms global variable, and passes whether it is transparent (isOpacity) and the transparency value (opacityValue) in the shader in the form of values.

[0117] 2.4 The coordinates of the hot point and the corresponding coordinates of this point are passed to the shader in the form of attributes. The vertex coordinates are then passed from the vertex shader to the fragment shader in the form of varyings for use when sampling grayTexture and colormap.

[0118] 2.5 The drawing mode (drawMode) of this rendering process uses the triangle drawing mode (TRIANGLE_STRIP);

[0119] 2.6 Camera uses an orthographic camera, with the left, right, bottom, top, near, and far parameters set to -1, 1, -1, 1, 0.1, and 2 respectively; the camera position is placed directly above the geometry, with coordinates (0, 1, 0);

[0120] The 2.7 fragment shader outputs the final processing result to the frame buffer and then to the texture memory in preparation for the next rendering pipeline.

[0121] 3. User interface heat map display

[0122] 3.1 Build new scene 3, camera 3, geometry 3, rendering material 3, and build rendering queue 3;

[0123] 3.2 Rendering material uses shader material, and passes the result generated by the rendering pipeline in step 2 (heatTexture) into the shader in the form of a texture through the uniforms global variable.

[0124] 3.3 The drawing mode (drawMode) of this rendering process uses the triangle drawing mode (TRIANGLE_STRIP);

[0125] 3.4 Camera uses a perspective camera, the near clipping plane is 0.01, the far clipping plane is 10000, the far clipping plane viewport aspect ratio is the screen aspect ratio, and the viewing angle value is 30;

[0126] 3.5 The fragment shader outputs the final processing result to the user page.

[0127] The heat point rendering process is as follows: Construct the heat point overlay rendering pipeline as follows Figure 10 As shown, a new scene 1, camera 1, geometry 1, rendering material 1 are constructed, a rendering queue 1 is constructed, and the result is finally cached in the texture memory. The geometry uses points, and the drawing mode (drawMode) uses point drawing mode, such as Figure 11As shown, the point size is set to 2R, and gl_PointSize is set to 2R in the vertex shader; the camera uses an orthographic camera, and the left, right, bottom, top, near, and far parameters are set to -1, 1, -1, 1, 0.1, 2 respectively; the camera position is placed directly above the geometry, with coordinates (0, 1, 0); the rendering material uses a shader material, and the maximum transparency value (MaxOpacity), minimum transparency value (MinOpacity), circle radius value R, maximum heat value (MaxHeatValue), and minimum heat value (MinHeatValue) are passed to the shader in the form of uniforms. The heat point coordinates and the corresponding heat value of this point are passed to the shader in the form of attributes, and the heat value is then passed from the vertex shader to the fragment shader in the form of varyings. The rendering material blend mode is set to overlay mode, and its transparent property is set to true.

[0128] In the fragment shader, a circle is set to radiate from the center to the surroundings, and the thermal value is gradually changed. In this way, the multi-point superposition will be smoother. The present invention uses a new smooth function, the equation is shown in formula (1), the boundary point value is 0, and the equation curve is as follows Figure 12 As shown, both before and after superposition are smooth enough, and the curve after superposition is as follows Figure 13 As shown in the figure, the thick line is the cumulative value after superposition, and the thin line is the smooth function curve of a single thermal point. Figure 6 (Existing technology) compared, the present invention generates a grayscale overlay map, such as Figure 14 As shown, it is smoother.

[0129]

[0130] Where a is the coordinate value of the center of the thermal point, and a is an arbitrary real number. Different thermal points correspond to different a values. f(x) is the longitudinal profile curve of the thermal point, x is the horizontal axis of the thermal point, and is the independent variable of the smooth function. For a certain thermal point, f(x) represents the smooth curve generated along the horizontal axis x.

[0131] This invention uses point drawing mode. Instead of operating on these points individually, all point geometries are merged into a single geometry, rendering them as a single object. This significantly reduces the number of draw calls and significantly improves performance. For example, if there are 10,000 points, the ratio of draw calls before and after merging is 10,000:1, a significant improvement.

[0132] On the other hand, compared with the patch technology used in current technology, a square patch has 4 point coordinate data and 4 index data, compared with only 1 point coordinate data in the point drawing mode, the point drawing mode used in the present invention also has obvious advantages.

[0133] Furthermore, the superposition results of the previous rendering heat points are transmitted to the user terminal rendering pipeline in the form of texture, and the superimposed heat value is stored in the texture alpha channel.

[0134] The terminal page rendering process is as follows: Construct the terminal rendering pipeline as follows Figure 10 As shown in the following section, a new scene 3, camera 3, geometry 3, and rendering material 3 are constructed, and a rendering queue 3 is established, ultimately returning the result to the user display page (on the browser). The geometry uses triangles, and the draw mode (drawMode) uses the triangle drawing mode (TRIANGLE_STRIP), which is a series of triangles connected in a strip consisting of (v0, v1, v2), (v2, v1, v3), and (v2, v3, v4). Therefore, each subsequent triangle shares two vertices with the previous triangle; the camera uses a perspective camera, and the rendering material uses a shader material. The grayTexture generated by the previous rendering pipeline, the gradient colormap, transparency (isOpacity), and transparency value (opacityValue) are passed to the shader via uniforms. The hotspot coordinates and the corresponding coordinates of this point are passed to the shader via attributes. The coordinates are then passed from the vertex shader to the fragment shader via varyings. The rendering material blend mode is set to standard.

[0135] The variable isOpacity is used to control the display mode when the grayTexture result is 0. When isOpacity is true, it is displayed in a transparent manner, such as Figure 16 Otherwise, it is displayed in an opaque manner as shown Figure 15 As shown; opacityValue is used to control the transparency of the overall heat map. The value range is [0-1]. The smaller the value, the more transparent it is. The result is as follows Figure 17 shown.

[0136] The gradient colormap is a texture generated by canvas, with a width of 256 and a height of 1. It provides users with maximum flexibility by exposing the interface. Input n (n=5 in this case) [0-1] values ​​and corresponding colors, and then use the canvas's createLinearGradient and addColorStop functions to generate the corresponding gradient texture map. The process is as follows: Figure 18 shown.

[0137] The final rendering result is as follows Figure 15-17 As shown, this result is applicable to various scenarios, including pure web pages, digital parks, and three-dimensional earth, and is especially suitable for ultra-large-size large-screen display systems, such as Figure 19 As shown, it meets the requirements of high-definition and high-performance interactive operation heat map effects.

[0138] The present invention also provides a large-scale heat map rendering system based on WebGL, such as Figure 20 As shown, the system adopts the WebGL-based large-size heat map rendering method as described above, and includes:

[0139] Thermal point smooth rendering module 10: used to construct the model to be rendered and the various resources required for the model to be rendered, render the model to be rendered in the heat map overlay rendering pipeline using point drawing mode, perform gradient smoothing on the thermal values ​​of the thermal points based on a preset smoothing function, and cache the smoothing results of the thermal points in the shared texture memory;

[0140] Heat point shading rendering module 20: constructs a gradient color band texture map, renders the smooth results of the heat points based on the gradient color band texture map in the heat map shading rendering pipeline, and caches the shading results of the heat points in the shared texture memory;

[0141] User terminal rendering module 30: transfers the coloring and superposition results of the heat points in the form of textures to the user terminal rendering pipeline for rendering processing, and outputs the final heat map processing results to the user display page.

[0142] Preferably, the hot spot smooth rendering module 10 further includes:

[0143] Build a smooth rendering module: prepare the hotspot data, build the first scene, the first camera, the first geometry, the first rendering material, build the first rendering queue, and add the first camera and the first geometry to the first scene;

[0144] Smooth rendering parameter input module: passes various parameters required for rendering materials into the shader in the form of uniforms, and passes the hot spot data as vertex data into the hot spot overlay rendering pipeline;

[0145] Smoothing module: Sets the size of the drawn thermal point to a predetermined size, passes the thermal data through the vertex shader to the fragment shader after processing, uses the preset smoothing function in the fragment shader to smooth the thermal value of the thermal point from the center of the circle to the surrounding radial gradient, and uses the point drawing mode to complete the smooth rendering;

[0146] Output smooth result module: The fragment shader outputs the smooth processing results of the hot spot to the frame buffer and then to the shared texture memory.

[0147] Preferably, the above-mentioned hot spot shading and rendering module 20 further includes:

[0148] Constructing a shading rendering module: constructing a second scene, a second camera, a second geometry, a second rendering material, constructing a second rendering queue, adding the second camera and the second geometry to the second scene, and constructing a gradient color band texture map;

[0149] Shading rendering parameter input module: pass gradient color band texture map, hot spot smoothing results and various rendering parameters into the shader in texture form through uniforms;

[0150] Shading and rendering module: The vertex coordinates of the hot spot are transferred from the vertex shader to the fragment shader for processing, and the shading and rendering are completed using the triangle drawing mode;

[0151] Output shading result module: The fragment shader outputs the shading processing results of the hot spot to the frame buffer and then to the shared texture memory.

[0152] The present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the above-mentioned WebGL-based large-size heat map rendering method.

[0153] The present invention provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, the steps of the WebGL-based large-size heat map rendering method are implemented.

[0154] Compared with the prior art, the method of the present invention adopts:

[0155] 1. Point drawing mode, merge all points, greatly reduce the number of rendering draw calls, and greatly improve performance

[0156] 2. Originally use a new smoothing function to solve the problem of edge folding traces of superimposed thermal points and ensure the smoothness of the thermal map

[0157] 3. The combination of multiple technical optimizations enables the heat map established by the present invention to meet the requirements of large-screen ultra-large size, high definition, and high-performance interactive operation effects.

[0158] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant description of other embodiments.

[0159] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the present invention.

[0160] In the embodiments provided by the present invention, it should be understood that the disclosed systems / terminal devices and methods can be implemented in other ways. For example, the system / terminal device embodiments described above are merely illustrative. For example, the division of the modules or units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, and the indirect coupling or communication connection of the system or unit can be electrical, mechanical or other forms.

[0161] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0162] In addition, the functional units in the various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0163] If the integrated module / unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium.

[0164] Based on this understanding, the present invention implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium. When the computer program is executed by a processor, it can implement the steps of the above-mentioned various method embodiments. The computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may include: any entity or system that can carry the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium. It should be noted that the content contained in the computer-readable medium can be appropriately increased or decreased according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, computer-readable media do not include electric carrier signals and telecommunication signals.

[0165] The embodiments described above are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention, and should all be included in the scope of protection of the present invention.

[0166] The above are merely specific embodiments of the present invention, but the scope of protection of the present invention is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in the present invention, and such modifications or substitutions are intended to be within the scope of protection of the present invention. Therefore, the scope of protection of the present invention shall be subject to the scope of protection of the claims.

Claims

1. A large-scale heat map rendering method based on WebGL, characterized in that: The method comprises: The step of smooth rendering of heat points is as follows: constructing a model to be rendered and various resources required for the model to be rendered, rendering the model to be rendered in the heat map overlay rendering pipeline using point drawing mode, and performing gradual smoothing on the heat value of the heat point based on a preset smoothing function, and caching the smoothing result of the heat point in the shared texture memory. The preset smoothing function is: Where a is the coordinate value of the center of the thermal point, and a is an arbitrary real number. Different thermal points correspond to different a values. f(x) is the longitudinal profile curve of the thermal point, x is the horizontal axis of the thermal point, and is the independent variable of the smooth function. For a certain thermal point, f(x) represents the smooth curve generated along the horizontal axis x. Hot spot shading rendering step: constructing a gradient color band texture map, rendering the smooth result of the hot spot based on the gradient color band texture map in the heat map shading rendering pipeline, and caching the shading result of the hot spot in the shared texture memory; User terminal rendering step: the coloring overlay result of the heat point is transferred to the user terminal rendering pipeline in the form of texture for rendering processing, and the final heat map processing result is output to the user display page.

2. The WebGL-based large-scale heat map rendering method according to claim 1, characterized in that: The hot spot smooth rendering step also includes: Constructing smooth rendering steps: preparing hotspot data, constructing the first scene, the first camera, the first geometry, the first rendering material, constructing the first rendering queue, and adding the first camera and the first geometry to the first scene; Smooth rendering parameter input step: multiple parameters required for rendering materials are input into the shader in the form of uniforms, and the hot spot data is input into the hot spot overlay rendering pipeline as vertex data; Smoothing step: setting the size of the drawn thermal point to a predetermined size, passing the thermal data through the vertex shader and then processing it into the fragment shader, using the preset smoothing function in the fragment shader to smooth the thermal value of the thermal point from the center of the circle to the surrounding radial gradient, and using the point drawing mode to complete the smooth rendering; Outputting smooth results: The fragment shader outputs the smooth processing results of the hot spots to the frame buffer and then to the shared texture memory.

3. The WebGL-based large-scale heat map rendering method according to claim 1, characterized in that: The hot spot shading and rendering step further includes: Constructing a shader rendering step: constructing a second scene, a second camera, a second geometry, a second rendering material, constructing a second rendering queue, adding the second camera and the second geometry to the second scene, and constructing the gradient color band texture map; Shading rendering parameter input step: inputting the gradient color band texture map, the smoothing result of the hot spot and various rendering parameters into the shader in the form of texture through uniforms; Shading and rendering step: transferring the vertex coordinates of the thermal point from the vertex shader to the fragment shader for processing, and completing the shading and rendering using a triangle drawing mode; Outputting shading result step: The fragment shader outputs the shading processing result of the hot spot to the frame buffer, and then outputs it to the shared texture memory.

4. The WebGL-based large-scale heat map rendering method according to claim 1, characterized in that: The user terminal rendering step includes: Construct terminal rendering steps: construct the third scene, the third camera, the third geometry, the third rendering material, and the third rendering queue; Terminal rendering parameter input step: the shading processing result of the heat point is input into the shader in the form of texture through uniforms; Terminal rendering step: Use triangle drawing mode to complete user terminal rendering; Output terminal result step: The fragment shader outputs the user terminal processing result of the hot point to the user page.

5. A WebGL-based large-scale heat map rendering system, using the WebGL-based large-scale heat map rendering method according to any one of claims 1 to 4, characterized in that: The system comprises: Thermal point smooth rendering module: used to construct the model to be rendered and the various resources required for the model to be rendered, render the model to be rendered in the heat map overlay rendering pipeline using point drawing mode, perform gradient smoothing on the thermal value of the thermal point based on a preset smoothing function, and cache the smoothing result of the thermal point in the shared texture memory; A heat point shading rendering module constructs a gradient color band texture map, renders the smooth result of the heat point based on the gradient color band texture map in the heat map shading rendering pipeline, and caches the shading result of the heat point in the shared texture memory; User terminal rendering module: transfers the coloring and superposition results of the heat points in the form of textures to the user terminal rendering pipeline for rendering processing, and outputs the final heat map processing results to the user display page.

6. The WebGL-based large-scale heat map rendering system according to claim 5, characterized in that: The hot spot smooth rendering module also includes: Build a smooth rendering module: prepare hotspot data, build a first scene, a first camera, a first geometry, a first rendering material, build a first rendering queue, and add the first camera and the first geometry to the first scene; Smooth rendering parameter input module: multiple parameters required for rendering materials are input into the shader in the form of uniforms, and the hot spot data is input into the hot spot overlay rendering pipeline as vertex data; Smoothing module: setting the size of the drawn thermal point to a predetermined size, passing the thermal data through the vertex shader and then processing it into the fragment shader, using the preset smoothing function in the fragment shader to smooth the thermal value of the thermal point from the center of the circle to the surrounding radial gradient, and using the point drawing mode to complete the smooth rendering; Output smoothing result module: The fragment shader outputs the smoothing processing result of the hot spot to the frame buffer and then to the shared texture memory.

7. The WebGL-based large-scale heat map rendering system according to claim 5, characterized in that: The hot spot shading and rendering module also includes: Constructing a shading rendering module: constructing a second scene, a second camera, a second geometric body, a second rendering material, constructing a second rendering queue, adding the second camera and the second geometric body to the second scene, and constructing the gradient color band texture map; Shading rendering parameter input module: the gradient color band texture map, the smoothing result of the hot spot and various rendering parameters are input into the shader in the form of texture through uniforms; Shading and rendering module: transferring the vertex coordinates of the thermal point from the vertex shader to the fragment shader for processing, and completing shading and rendering using a triangle drawing mode; Output shading result module: The fragment shader outputs the shading processing result of the hot spot to the frame buffer and then outputs it to the shared texture memory.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the WebGL-based large-size heat map rendering method described in any one of claims 1 to 4 are implemented.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the WebGL-based large-size heat map rendering method are implemented as described in any one of claims 1 to 4.

Images