Visual rendering engine optimization method and system

Abstract

The invention relates to the technical field of visual rendering, and provides a visual rendering engine optimization method and system. The method comprises the following steps: acquiring to-be-processed data, performing data partitioning, and constructing a spatial index for the partitioned data; monitoring scrolling, zooming and translation events of the canvas; when it is monitored that the view change meets a preset condition, calculating a latest view state, packaging the latest view state into a message object, and configuring a priority identifier for the message object; according to the message object transmitted by the main thread and received by the Worker, querying a spatial index of a Worker memory, positioning all data blocks intersected with or contained in the current view, and sampling and aggregating to obtain a vertex data array; and after the main thread receives the vertex data array sent back by the Worker, the vertex data array is transmitted into a WebGL buffer area for rendering.

Description

Technical Field

[0001] This invention relates to the field of visualization rendering technology, and in particular to a visualization rendering engine optimization method and system. Background Technology

[0002] The statements in this section are merely background information related to the present invention and do not necessarily constitute prior art.

[0003] In current scenarios such as financial transaction analysis and IoT sensing monitoring, web front-ends need to render tens of millions to trillions of data points in real time, and require millisecond-level updates and precise interactions. Traditional solutions have significant shortcomings: SVG / VML rendering: Based on the DOM tree, each data point corresponds to a DOM element. Although it is easy to implement interaction, the DOM elements are heavyweight. When the number of data points exceeds tens of thousands, it will cause a surge in memory and rendering lag, which cannot meet the needs of massive data. Pure Canvas 2D rendering: drawing through APIs such as fillRect and arc, which has better performance than SVG, but has the following problems: (1) weak interaction, making it difficult to identify individual data points; (2) Draw Call bottleneck, drawing hundreds of thousands of elements leads to a decrease in frame rate; (3) large memory copy overhead, and low efficiency of full redraw; (4) difficult dynamic updates, and local updates require complex dirty rectangle detection. Existing mainstream tools such as ECharts and D3.js (Canvas version) are all optimized based on the above solution. However, when dealing with real-time high-frequency updates of ultra-large-scale data, they still generally suffer from problems such as rendering stuttering, high interaction latency, large memory consumption, and continuous high CPU load, which cannot meet the needs of actual applications. Summary of the Invention To address the challenges of real-time visualization rendering and interaction with trillions of data points in the aforementioned background technologies, this invention provides a visualization rendering engine optimization method and system. This invention employs WebGL+GPU parallelism to improve rendering performance; adopts a layered architecture to reduce interaction latency; and utilizes infinite data chunking and LOD sampling to process trillions of data points, thereby increasing data processing capacity while reducing memory usage.

[0004] To achieve the above objectives, the present invention adopts the following technical solution: The first aspect of the present invention provides a method for optimizing a visualization rendering engine.

[0005] A visualization rendering engine optimization method includes: Obtain the data to be processed, divide the data into blocks, and build a spatial index for the block data; Listen for canvas scrolling, zooming, and panning events; When a view change is detected that meets a preset condition, the latest view state is calculated, encapsulated into a message object, and a priority identifier is configured for the message object. Based on the message object received by the Worker from the main thread, the space index of the Worker's memory is queried to locate all data blocks that intersect with or contain the current view, and then sampled and aggregated to obtain a vertex data array. After the main thread receives the vertex data array returned by the Worker, it passes it to the WebGL buffer for rendering.

[0006] Furthermore, the method for acquiring the data to be processed, dividing the data into blocks, and constructing a spatial index for the block-based data includes: For non-spatial but sequential data, the data is divided into consecutive data blocks according to the order of data generation or time window, and metadata is generated for each data block. The metadata of each data block is inserted into the index tree as a leaf node. Each non-leaf node in the tree records the merge boundary of its child nodes. The completed index tree is serialized and stored in the browser's storage.

[0007] Furthermore, the method for monitoring the scrolling, zooming, and panning events of the canvas includes: Bind event listeners for scaling, panning, and window resizing to the canvas container that contains the Canvas; Maintain a view state object, with the viewport boundary defined by the data coordinate range corresponding to the current Canvas viewport; The requestAnimationFrame is used to throttle view changes. When the original event is received, it is not processed immediately. Before the next browser repaint, the latest view state is calculated. By comparing the old and new view states, it is determined whether the change is significant. When the view change meets the preset conditions, the subsequent sampling process is triggered.

[0008] Further, the sampling and aggregation are performed to obtain a vertex data array; the method includes: The sampling strategy is dynamically selected based on the current scaling level; if the scaling level is high, the original data points are loaded directly from the hit data blocks; if the scaling level is low, random sampling is performed and the data is aggregated. The sampled data is processed to obtain a vertex data array.

[0009] Furthermore, the method of passing the data into the WebGL buffer for rendering includes: Write the vertex data array to be rendered in the current frame into the WebGL buffer; Pass the view transformation matrix and resolution of the current canvas to the shader; Execute the drawing command; Drawing complete.

[0010] Furthermore, after rendering is complete, mouse events are bound to the interaction layer Canvas. When an event is triggered, the interaction target is determined by querying the spatial index.

[0011] A second aspect of the present invention provides a visualization rendering engine optimization system.

[0012] A visualization rendering engine optimization system, comprising: The index data module is configured to: acquire data to be processed, divide the data into blocks, and build a spatial index for the block data; The view change listener module is configured to listen for canvas scrolling, zooming, and panning events. The sampling calculation module is triggered and configured to: when a view change is detected that meets a preset condition, calculate the latest view state, encapsulate it into a message object, and configure a priority identifier for the message object; The sampling and aggregation module is configured to: based on the message object received by the Worker from the main thread, query the spatial index of the Worker's memory, locate all data blocks that intersect with or contain the current view, and perform sampling and aggregation to obtain a vertex data array; The WebGL rendering module is configured to: after the main thread receives the vertex data array returned by the Worker, pass it to the WebGL buffer for rendering.

[0013] A third aspect of the present invention provides a computer device comprising: A processor, adapted to execute computer programs; A computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps in the visualization rendering engine optimization method described in the first aspect above.

[0014] A fourth aspect of the present invention provides a computer-readable storage medium storing a computer program adapted to be loaded by a processor and to execute the steps of the visualization rendering engine optimization method described in the first aspect above.

[0015] The fifth aspect of the present invention provides a computer program product or computer program.

[0016] This invention provides a computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the steps in the visualization rendering engine optimization method described in the first aspect above.

[0017] Compared with the prior art, the beneficial effects of the present invention are: To address the issues of stuttering in SVG / VML with tens of thousands of data points and frame rate drops in pure Canvas 2D with hundreds of thousands of elements, this invention overcomes the bottleneck of Draw Call and CPU load problems by using WebGL single-call rendering and GPU parallel computing: it can stably achieve 60 frames per second rendering of millions of data points in normal scenes, which is dozens of times faster than traditional Canvas 2D. To address the issues of SVG / VML memory spikes and the strong correlation between memory usage and total data volume in traditional solutions, this invention employs a data chunking and view sampling mechanism. This ensures that only necessary data within the visible area is loaded and rendered, decoupling memory usage from the total data volume and making it only related to screen resolution, thus significantly reducing memory consumption. To address the issues of weak interaction in pure Canvas 2D and high latency in traditional solutions, this invention adopts a layered architecture that confines costly redrawing to the dynamic layer, while interactive feedback is lightweightly completed at the top layer, resulting in mouse movement and hover response latency of less than 50ms.

[0018] To address the challenge of handling data exceeding tens of millions of records, such as ECharts, this system employs infinite data partitioning and dynamic LOD sampling, enabling it to process trillions of records in practice. For the Internet of Things (IoT), it can render data from tens of millions of sensors worldwide in real time. At low scaling levels, 1% of the data is sampled to preserve distribution characteristics, while at high scaling levels, the original data is loaded to maintain accuracy. To address the issue of fixed visualization formats in traditional solutions, this invention allows for easy implementation of custom color mapping, shapes, and animation effects by modifying GLSL shaders. It is not limited to drawing points but can also be extended to lines, heatmaps, etc. It is compatible with Vue and React, and the API allows for rapid configuration, reducing development costs. Attached Figure Description

[0019] The accompanying drawings, which form part of this invention, are used to provide a further understanding of the invention. The illustrative embodiments of the invention and their descriptions are used to explain the invention and do not constitute an improper limitation of the invention.

[0020] Figure 1 This is a flowchart illustrating the visualization rendering engine optimization method in an embodiment of the present invention; Figure 2This is a flowchart of another embodiment of the visualization rendering engine optimization method shown in the embodiments of the present invention; Figure 3 This is a flowchart illustrating the data processing and rendering of the WebGL rendering module in an embodiment of the present invention; Figure 4 This is a structural diagram of the visualization rendering engine optimization system shown in an embodiment of the present invention; Figure 5 This is a structural diagram of a computer device shown in an embodiment of the present invention. Detailed Implementation

[0021] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0022] It should be noted that the following detailed description is illustrative and intended to provide further explanation of the invention. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention pertains.

[0023] It should be noted that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the scope of exemplary embodiments according to the invention. As used herein, the singular form is intended to include the plural form as well, unless the context clearly indicates otherwise. Furthermore, it should be understood that when the terms "comprising" and / or "including" are used in this specification, they indicate the presence of features, steps, operations, devices, components, and / or combinations thereof.

[0024] To facilitate understanding of the technical solutions of this invention, some technical terms involved in this invention will be introduced below.

[0025] WebGL Canvas is an HTML5 Canvas element that combines WebGL technology. It can use graphics hardware acceleration to draw 3D and 2D graphics on web pages, providing high-performance visualization support for web pages.

[0026] Figure 1 This is a flowchart illustrating a visualization rendering engine optimization method according to an embodiment of the present invention; see reference. Figure 1 The method includes: Obtain the data to be processed, divide the data into blocks, and build a spatial index for the block data; Listen for canvas scrolling, zooming, and panning events; When a view change is detected that meets a preset condition, the latest view state is calculated, encapsulated into a message object, and a priority identifier is configured for the message object. Based on the message object received by the Worker from the main thread, the space index of the Worker's memory is queried to locate all data blocks that intersect with or contain the current view, and then sampled and aggregated to obtain a vertex data array. After the main thread receives the vertex data array returned by the Worker, it passes it to the WebGL buffer for rendering.

[0027] This invention provides a visualization rendering engine optimization method that uses WebGL single-call and GPU parallelism to overcome lag, rendering millions of data points at 60 frames per second in typical scenes, which is tens of times faster than Canvas 2D. By using data chunking and view sampling, it decouples memory from the total amount of data, significantly reducing memory usage. Through a layered architecture, it keeps the interaction latency below 50ms. Relying on infinite chunking and dynamic LOD sampling, it can handle trillions of data points. Custom effects are achieved through GLSL shaders, ensuring compatibility with mainstream frameworks and reducing development costs.

[0028] Figure 2 This is a flowchart of another embodiment of the visualization rendering engine optimization method shown in the embodiments of the present invention; see also Figure 2 The visualization rendering engine optimization method includes the following steps: Step 1 Initialize the engine: Create layered Canvases, including: static background Canvas, WebGL Canvas, and interactive layer Canvas, and initialize the WebGL context.

[0029] Step 2 Loading and Indexing Data: Receive or load data, and perform data chunking and spatial indexing in the Web Worker.

[0030] Step 2.1 Data Chunking Strategy: For non-spatial but sequential data (such as time series), the data is divided into continuous data chunks according to the order of data generation or time window. Metadata Recording: Generate metadata for each data chunk, recording its spatial boundaries (such as minimum / maximum latitude and longitude), data volume, data chunk ID, and location pointer stored in IndexedDB or on the server.

[0031] Step 2.2 Spatial Index Construction: The index structure is selected in a Web Worker outside the main thread. Based on the data blocks described above, a global spatial index is constructed. For two-dimensional spatial data, a quadtree is preferred; for higher-dimensional data, a KD-tree can be used. During the index construction process, the metadata (mainly spatial boundaries) of each data block is inserted into the index tree as leaf nodes. Each non-leaf node in the tree records the merge boundaries of its child nodes. Index Serialization and Persistence: The completed index tree will be serialized (e.g., in JSON format) and stored in the browser's storage. When the application loads the same dataset again, it can directly deserialize the index from IndexedDB, avoiding repeated construction and achieving fast startup.

[0032] Step 3 Listen for view changes: Listen for scrolling, zooming, and panning events on the canvas.

[0033] Step 3.1 Event Binding: Bind event listeners such as wheel (zoom), mousemove / touchmove (pan), and resize (window size change) to the canvas container containing the Canvas.

[0034] Step 3.2 View State Management: Maintain a view state object, where the viewport boundary is the data coordinate range corresponding to the current Canvas viewport; the transformation matrix comprehensively represents the current translation and scaling state, and the device pixel ratio is used for high-definition rendering on high-resolution screens.

[0035] Step 3.3 Change Detection and Throttling: Use requestAnimationFrame to throttle view changes. When a raw event is received, it is not processed immediately. Instead, the latest view state is calculated uniformly before the next browser repaint. By comparing the old and new view states, it is determined whether the change is significant (such as a change in scaling level exceeding a threshold or a translation distance exceeding a certain number of pixels). Subsequent sampling processes are only triggered when the change is significant, avoiding unnecessary calculations.

[0036] Step 4: Trigger sampling calculation.

[0037] Step 4.1 Parameter Encapsulation: Encapsulate the latest view state (especially viewport boundaries and zoom level) calculated in Step 3 into a message object.

[0038] Step 4.2 Cross-thread communication: Send the message object from the main thread to the Web Worker (i.e., the sampling computation module) dedicated to computation via the postMessage API.

[0039] Step 4.3 Priority Scheduling: Attach a priority identifier to the message. For example, view changes triggered by user-initiated dragging are set to high priority to ensure smooth following; changes triggered by animation or inertial scrolling are set to normal priority. Workers can adjust the calculation order based on priority.

[0040] Data chunking and view sampling mechanisms ensure that only necessary data within the visible area is loaded and rendered. Memory usage is decoupled from the total amount of data and is only related to the screen resolution, which can significantly reduce memory usage.

[0041] Step 5: Sampling and Aggregation.

[0042] Step 5.1 Spatial Range Query: After receiving the viewport boundary from the main thread, the Worker constructs and loads the spatial index (quadtree / KD-tree) into the Worker's memory for a fast range query. The index traversal algorithm quickly locates all data blocks that intersect with or contain the current viewport.

[0043] Step 5.2 Level of Detail (LOD) and Sampling Strategy: Based on the current zoom level, a sampling strategy is dynamically selected. At high zoom levels (zoom-in state), there are fewer data points within the viewport, so the original data points are directly loaded from the hit data blocks to ensure complete detail. At low zoom levels (zoom-out state), the viewport may contain millions of points, requiring aggregate sampling. Random sampling is suitable for scenarios with relatively uniform data distribution. This method randomly extracts a fixed proportion of data points from each relevant data block, effectively maintaining the overall distribution characteristics of the dataset while reducing the amount of data.

[0044] Step 5.3 Data Extraction and Lightweighting: Based on the query and sampling results, lightweighting is performed on the sampled / aggregated data by loading the required data blocks from persistent storage or on-demand over the network. For example, floating-point precision is reduced to meet the current view resolution, and unnecessary attribute fields are removed to minimize the amount of data transmitted.

[0045] Step 5.4 Result Return: Return the processed, lightweight vertex data array (containing position, color, size, etc.) to the main thread via postMessage.

[0046] Step 6: WebGL Rendering: After receiving the sampled data from the Worker, the main thread passes it all to the WebGL buffer and calls a single-draw command to complete the rendering of the entire frame. Because the data has been sampled and aggregated, its quantity is controllable, ensuring high-performance rendering.

[0047] The specific process is as follows: Initialize the WebGL context and compile and link the shader program; create and bind the vertex buffer, and pass the sampled data to the GPU all at once; use uniforms to pass the view transformation matrix (scaling, translation); call gl.drawArrays(gl.POINTS, 0, pointCount) to draw all points at once; when the view changes (scrolling, scaling) or the data is updated, only the buffer data needs to be updated and the process of calling gl.drawArrays(gl.POINTS, 0, pointCount) to draw all points at once needs to be re-executed, without redrawing the static layer; the update is complete.

[0048] This invention achieves rendering of millions of data points at 60 frames per second through WebGL single-call rendering and GPU parallel computing, which is dozens of times faster than traditional Canvas 2D.

[0049] Step 7: Bind interactive events: Bind mouse events to the interaction layer Canvas. When an event is triggered, the interaction target is determined by querying the spatial index, and the interaction layer Canvas is updated.

[0050] The layered architecture confines costly redrawing to dynamic layers, while interactive feedback is handled lightweightly at the top layer, resulting in mouse movement and hover response latency of less than 50ms and a smoother interactive experience.

[0051] Figure 3 This is a flowchart illustrating the data processing and rendering of the WebGL rendering module in an embodiment of the present invention; see reference. Figure 3 The data processing and rendering process of the WebGL rendering module includes: Get sampling data: Obtain the vertex data array to be rendered in the current frame from the sampling module; Bind buffer: Write the vertex data (position, color, size, etc.) into the WebGL buffer; Set shader Uniforms: Pass the view transformation matrix, resolution, etc. of the current canvas into the shader; Execute drawing commands; Drawing complete.

[0052] This invention allows for easy implementation of custom color mapping, shapes, and animation effects by modifying the GLSL shader. It is not limited to drawing points but can also be extended to lines, heatmaps, etc., offering high flexibility.

[0053] The above combination Figure 1 The visualization rendering engine optimization method provided in the embodiments of the present invention has been described in detail. Next, the visualization rendering engine optimization system provided in the embodiments of the present invention will be described in conjunction with the accompanying drawings.

[0054] Figure 4This is a schematic diagram of the structure of the visualization rendering engine optimization system shown in an embodiment of the present invention, with reference to... Figure 4 The system described in this invention includes: The index data module is configured to: acquire data to be processed, divide the data into blocks, and build a spatial index for the block data; The view change listener module is configured to listen for canvas scrolling, zooming, and panning events. The sampling calculation module is triggered and configured to: when a view change is detected that meets a preset condition, calculate the latest view state, encapsulate it into a message object, and configure a priority identifier for the message object; The sampling and aggregation module is configured to: based on the message object received by the Worker from the main thread, query the spatial index of the Worker's memory, locate all data blocks that intersect with or contain the current view, and perform sampling and aggregation to obtain a vertex data array; The WebGL rendering module is configured to: after the main thread receives the vertex data array returned by the Worker, pass it to the WebGL buffer for rendering.

[0055] In some embodiments, the steps of acquiring the data to be processed, dividing the data into blocks, and building a spatial index for the block-based data include: for non-spatial but sequential data, dividing the data into consecutive data blocks according to the order of data generation or time window, and generating metadata for each data block; inserting the metadata of each data block as a leaf node into the index tree, with each non-leaf node in the tree recording the merging boundary of its child nodes; and serializing and persisting the index tree, which is then serialized and stored in the browser's storage.

[0056] In some embodiments, listening to the scrolling, scaling, and panning events of the canvas includes: binding event listeners for scaling, panning, and window size changes to the canvas container containing the Canvas; maintaining a view state object, with the viewport boundary defined by the data coordinate range corresponding to the current Canvas viewport; throttling view changes using requestAnimationFrame, whereby, upon receiving the original event, it is not processed immediately, but the latest view state is calculated before the next browser redraw; by comparing the old and new view states, it is determined whether the change is significant; and when the view change meets preset conditions, the subsequent sampling process is triggered.

[0057] In some embodiments, the sampling and aggregation to obtain a vertex data array includes: dynamically selecting a sampling strategy based on the current scaling level; if the scaling level is high, directly loading the original data points from the hit data blocks; if the scaling level is low, performing random sampling and aggregation; and performing lightweight processing on the sampled data to obtain a vertex data array.

[0058] In some embodiments, the step of passing the data to the WebGL buffer for rendering includes: writing the vertex data array to be rendered in the current frame into the WebGL buffer; passing the view transformation matrix and resolution of the current canvas to the shader; executing the drawing command; and completing the drawing.

[0059] In some embodiments, after rendering is complete, mouse events are bound to the interaction layer Canvas. When an event is triggered, the interaction target is determined by querying the spatial index.

[0060] According to embodiments of the present invention, the visualization rendering engine optimization system can correspond to the execution of the methods described in the embodiments of the present invention, and the above and other operations and / or functions of each module of the visualization rendering engine optimization system are respectively for implementing Figure 1 For the sake of brevity, the corresponding processes of each method in the code will not be elaborated here.

[0061] See Figure 5 The diagram shows the structure of a computer device, which includes a processor, a communication interface, and a computer-readable storage medium. The processor, communication interface, and computer-readable storage medium are connected via a bus or other means. The communication interface is used to receive and send data. The computer-readable storage medium can be stored in the computer device's memory. The computer-readable storage medium stores computer programs, including program instructions, and the processor executes the program instructions stored in the computer-readable storage medium. The processor (or CPU (Central Processing Unit)) is the computing and control core of the computer device, adapted to implement one or more instructions, specifically adapted to load and execute one or more instructions to implement the corresponding steps in the visualization rendering engine optimization method embodiment.

[0062] This embodiment provides a computer-readable storage medium (Memory), which is a memory device in a computer device used to store programs and data. It is understood that the computer-readable storage medium here can include both the built-in storage medium in the computer device and extended storage media supported by the computer device. The computer-readable storage medium provides storage space that stores the processing system of the computer device. Furthermore, this storage space also contains one or more instructions suitable for loading and execution by the processor. These instructions can be one or more computer programs (including program code). It should be noted that the computer-readable storage medium here can be high-speed RAM memory or non-volatile memory, such as at least one disk storage device; optionally, it can also be at least one computer-readable storage medium located remotely from the aforementioned processor.

[0063] In one embodiment, the computer-readable storage medium stores one or more instructions; the processor loads and executes one or more instructions stored in the computer-readable storage medium to implement the corresponding steps in the above-described visualization rendering engine optimization method embodiment.

[0064] This embodiment provides a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the corresponding steps in the above-described visualization rendering engine optimization method embodiment.

[0065] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of hardware embodiments, software embodiments, or embodiments combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage and optical storage) containing computer-usable program code.

[0066] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0067] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0068] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0069] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. The storage medium can be a magnetic disk, optical disk, read-only memory (ROM), or random access memory (RAM), etc.

[0070] The above description is merely a preferred embodiment of the present invention and is not intended to limit the invention. Various modifications and variations can be made to the present invention by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for optimizing a visualization rendering engine, characterized in that, include: Obtain the data to be processed, divide the data into blocks, and build a spatial index for the block data; Listen for canvas scrolling, zooming, and panning events; When a view change is detected that meets a preset condition, the latest view state is calculated, encapsulated into a message object, and a priority identifier is configured for the message object. Based on the message object received by the Worker from the main thread, the space index of the Worker's memory is queried to locate all data blocks that intersect with or contain the current view, and then sampled and aggregated to obtain a vertex data array. After the main thread receives the vertex data array returned by the Worker, it passes it to the WebGL buffer for rendering.

2. The visualization rendering engine optimization method according to claim 1, characterized in that, The method for acquiring data to be processed, dividing the data into blocks, and constructing a spatial index for the block-based data includes: For non-spatial but sequential data, the data is divided into consecutive data blocks according to the order of data generation or time window, and metadata is generated for each data block. The metadata of each data block is inserted into the index tree as a leaf node. Each non-leaf node in the tree records the merge boundary of its child nodes. The index tree, which is built by index serialization and persistence, will be serialized and stored in the browser's storage.

3. The visualization rendering engine optimization method according to claim 1, characterized in that, The method for monitoring the scrolling, zooming, and panning events of the canvas includes: Bind event listeners for scaling, panning, and window resizing to the canvas container that contains the Canvas; Maintain a view state object, with the viewport boundary defined by the data coordinate range corresponding to the current Canvas viewport; The requestAnimationFrame is used to throttle view changes. When the original event is received, it is not processed immediately. Before the next browser repaint, the latest view state is calculated. By comparing the old and new view states, it is determined whether the change is significant. When the view change meets the preset conditions, the subsequent sampling process is triggered.

4. The visualization rendering engine optimization method according to claim 1, characterized in that, The method involves sampling and aggregation to obtain a vertex data array; the method includes: The sampling strategy is dynamically selected based on the current scaling level; if the scaling level is high, the original data points are loaded directly from the hit data blocks; if the scaling level is low, random sampling is performed and the data is aggregated. The sampled data is processed to obtain a vertex data array.

5. The visualization rendering engine optimization method according to claim 1, characterized in that, The method for rendering is as follows: The input to the WebGL buffer is used. Write the vertex data array to be rendered in the current frame into the WebGL buffer; Pass the view transformation matrix and resolution of the current canvas to the shader; Execute the drawing command; Drawing complete.

6. The visualization rendering engine optimization method according to claim 1, characterized in that, After rendering is complete, mouse events are bound to the Canvas of the interaction layer. When an event is triggered, the interaction target is determined by querying the spatial index.

7. A visualization rendering engine optimization system, characterized in that, include: The index data module is configured to: acquire data to be processed, divide the data into blocks, and build a spatial index for the block data; The view change listener module is configured to listen for canvas scrolling, zooming, and panning events. The sampling calculation module is triggered and configured to: when a view change is detected that meets a preset condition, calculate the latest view state, encapsulate it into a message object, and configure a priority identifier for the message object; The sampling and aggregation module is configured to: based on the message object received by the Worker from the main thread, query the spatial index of the Worker's memory, locate all data blocks that intersect with or contain the current view, and perform sampling and aggregation to obtain a vertex data array; The WebGL rendering module is configured to: after the main thread receives the vertex data array returned by the Worker, pass it to the WebGL buffer for rendering.

8. A computer device, characterized in that, A processor, adapted to execute computer programs; A computer-readable storage medium storing a computer program, which, when executed by the processor, implements the steps of the visualization rendering engine optimization method as described in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program adapted to be loaded by a processor and to execute the steps of the visualization rendering engine optimization method as described in any one of claims 1-6.

10. A computer program product, characterized in that, The computer program product includes a computer program that, when executed by a processor, implements the steps in the visualization rendering engine optimization method as described in any one of claims 1-6.

Images