Optimization method, device and storage medium for large-scale graph data visualization rendering

Abstract

The present application relates to an optimization method, device and storage medium for large-scale graph data visualization rendering, which obtains graph data to be rendered, constructs an R-tree spatial index based on the graph data to be rendered, and constructs an adaptive sharding model based on the R-tree data structure; monitors user interaction data in real time, performs viewport prediction based on the interaction data, and determines the sub-graph to be loaded based on the prediction result and the adaptive sharding model; obtains system data of the client device, analyzes the performance of the client device based on the system data, and determines the rendering strategy based on the performance analysis result; performs off-screen rendering on the sub-graph to be loaded according to the rendering strategy, and displays the off-screen rendering result on the client device after detecting that the user has completed the corresponding operation. The present application dynamically adjusts the rendering granularity through an adaptive sharding model, balancing rendering quality and performance consumption; predicts user interaction intentions through a viewport prediction algorithm, and combines off-screen rendering to achieve smooth window switching.

Description

Technical Field

[0001] The present application relates to the field of graph data visualization technology, and in particular to an optimization method, device, and storage medium for large-scale graph data visualization rendering. Background Art

[0002] In recent years, the continuous development of technologies such as computer graphics, data visualization, and artificial intelligence has provided stronger technical support for graph data visualization rendering. For example, the emergence of graphics rendering technologies such as WebGL has made it possible to achieve 3D visualization of complex graph data in browsers. The widespread use of data visualization libraries such as D3.js has provided developers with a rich set of visualization components and tools, reducing the development difficulty of graph data visualization rendering. Furthermore, the application of machine learning algorithms in graph data layout and interaction has also improved the quality and efficiency of visualization effects.

[0003] However, with the booming development of the Internet of Things (IoT), social media, and other technologies, the scale and complexity of graph data continues to grow. Graph exploration platforms require that every node and edge be interactive, thus binding a large number of input and output listener events. This poses challenges for graph data visualization and rendering. For example, when rendering tens of thousands of nodes, current mainstream visualization tools (such as ECharts and D3.js) often experience frame rates below 15 frames per second (FPS) due to the inability of traditional Canvas / SVG rendering engines to handle high-density batch processing of primitives. Full data traversal results in drag and drop response times exceeding 300ms, leading to rendering lag and interaction delays. Therefore, optimizing rendering algorithms, reducing computing resource consumption, and increasing rendering speed to achieve real-time graph data visualization remains a key challenge. Summary of the Invention

[0004] The embodiments of the present application provide an optimization method, device, and storage medium for large-scale graph data visualization rendering, so as to at least solve the problems of rendering freeze and interaction delay in existing graph data visualization rendering methods in related technologies.

[0005] In a first aspect, an embodiment of the present application provides an optimization method for large-scale graph data visualization rendering, including:

[0006] Acquire the image data to be rendered, construct an R-tree spatial index based on the image data to be rendered, and construct an adaptive sharding model based on the R-tree data structure to dynamically adjust the granularity of the rendering area;

[0007] Monitor user interaction data in real time, perform viewport prediction based on the interaction data, and determine the subgraph to be loaded based on the prediction result and the adaptive sharding model;

[0008] Acquiring system data of a client device, analyzing performance of the client device based on the system data, and determining a rendering strategy based on the performance analysis results;

[0009] The sub-image to be loaded is rendered off-screen according to the rendering strategy, and after detecting that the user has completed the corresponding operation, the result of the off-screen rendering is displayed on the client device.

[0010] In one embodiment, the method further comprises:

[0011] The current viewing distance is obtained, and during the off-screen rendering process, visual rendering of the sub-image to be loaded is performed at different detail levels according to the current viewing distance.

[0012] In one embodiment, constructing an R-tree spatial index according to the image data to be rendered and constructing an adaptive sharding model based on the R-tree data structure includes:

[0013] Obtaining graph data to be rendered, and converting graph nodes and edges in the graph data to be rendered into minimum bounding rectangles;

[0014] Calculate the Hilbert values ​​of all minimum bounding rectangles and sort them to generate an ordered MBR list. Then divide the sorted MBR list into nodes of fixed size and construct a multi-layer R-tree spatial index from bottom to top.

[0015] Counting the number of MBRs per unit area within the viewport range according to the multi-layer R-tree spatial index to obtain the actual node density;

[0016] A reference shard size and a shard adjustment strategy are obtained, and the adaptive shard model is constructed according to the actual node density, the reference shard size, and the shard adjustment strategy.

[0017] In one embodiment, constructing the adaptive sharding model according to the actual node density, the reference shard size, and the sharding adjustment strategy includes:

[0018] Obtaining a standard node density, comparing the actual node density with the standard node density, and outputting a comparison result;

[0019] Selecting a slice scaling factor according to the comparison result and the slice adjustment strategy, and calculating an actual slice size according to the reference slice size and the slice scaling factor;

[0020] The division granularity of the rendering area is dynamically adjusted according to the actual tile size.

[0021] In one embodiment, the shard adjustment strategy includes:

[0022] When the actual node density is greater than the standard node density, obtaining a first shard scaling factor, wherein the first shard scaling factor is less than 1;

[0023] When the actual node density is less than the standard node density, obtaining a second shard scaling factor, wherein the second shard scaling factor is greater than 1;

[0024] When the actual node density is equal to the standard node density, a third shard scaling factor is obtained, wherein the first shard scaling factor is equal to 1.

[0025] In one embodiment, performing viewport prediction based on the interaction data and determining the sub-graph to be loaded based on the prediction result and the adaptive sharding model includes:

[0026] Identifying an interactive operation performed by the user on the graph data based on the interactive data, and estimating a predicted viewport range based on the interactive operation and the interactive data;

[0027] Pre-rendered image data is determined according to the predicted viewport range and the R-tree spatial index, and the partitioning granularity of the pre-rendered image data within the predicted viewport range is adjusted by the adaptive sharding model to obtain the sub-image to be loaded.

[0028] In one embodiment, when the interaction operation is viewport translation, identifying the interaction operation performed by the user on the graph data based on the interaction data, and estimating the predicted viewport range based on the interaction operation and the interaction data, includes:

[0029] Obtaining the predicted time, the speed and acceleration of the cursor movement, and calculating the movement distance of the cursor within the predicted time according to the speed and the acceleration;

[0030] Obtaining the current coordinates of the cursor, and calculating the predicted coordinates of the cursor after the predicted time based on the current coordinates and the movement distance;

[0031] Obtaining a preset viewport width, and taking the predicted coordinates as the center and the viewport width as the side length as the predicted viewport range;

[0032] Pre-rendered image data is determined according to the predicted viewport range and the R-tree spatial index, and the partitioning granularity of the pre-rendered image data within the predicted viewport range is adjusted by the adaptive sharding model to obtain the sub-image to be loaded.

[0033] In one embodiment, the system data includes a current video memory occupancy rate, and analyzing the performance of the client device according to the system data and determining the rendering strategy according to the performance analysis result includes:

[0034] Obtaining a video memory warning occupancy rate, and determining whether the current video memory occupancy rate is greater than the video memory warning occupancy rate;

[0035] If the judgment result is no, the WebGL full-precision rendering mode is selected; if the judgment result is yes, the WebGL+Canvas mixed rendering mode is selected;

[0036] Among them, in the WebGL+Canvas hybrid rendering mode, the static data layer is rendered through Canvas, and the dynamic data layer and special effect layer are rendered through WebGL.

[0037] In one embodiment, the system data includes a current video memory occupancy rate, a current frame rate, and a rendering engine compatible version, and analyzing the performance of the client device based on the system data and determining a rendering strategy based on the performance analysis results include:

[0038] Detecting the WebGL version supported by the client device, and if it supports WebGL 2.0, entering high-precision rendering mode; if it only supports WebGL 1.0, entering basic WebGL rendering mode; if it does not support WebGL, entering Canvas rendering mode;

[0039] In high-precision rendering mode, the current frame rate is monitored in real time. If the current frame rate is ≥ N, the current rendering mode is maintained; if M ≤ current frame rate < N, a simple degradation rendering mode is selected, wherein the simple degradation rendering mode includes reducing the rendering resolution, disabling SSAO / shadows, and simplifying the particle system; if the current frame rate is < M, a deep degradation rendering mode is selected, wherein the deep degradation rendering mode includes switching to low-poly LOD, disabling post-processing, and enabling dynamic batching; wherein M < N;

[0040] In the basic WebGL rendering mode, obtain the video memory warning occupancy rate, and monitor the current video memory occupancy rate in real time to determine whether the current video memory occupancy rate is greater than the video memory warning occupancy rate; if the judgment result is no, maintain the current rendering mode; if the judgment result is yes, select the WebGL+Canvas hybrid rendering mode;

[0041] In Canvas rendering mode, the current frame rate of the Canvas is monitored in real time. If the current frame rate is ≥ K, vector drawing is retained; if the current frame rate is < K, rasterization caching is enabled.

[0042] In one embodiment, performing visual rendering of the sub-image to be loaded at different levels of detail according to the current viewing distance includes:

[0043] When the current viewing distance is a far viewing distance, simplifying the nodes and edges of the subgraph to be loaded into nodes with preset pixels and edges with preset transparency;

[0044] When the current viewing distance is a medium viewing distance, displaying the first letter of the label and the edge type icon of the sub-graph to be loaded;

[0045] When the current viewing distance is near viewing distance, full-precision rendering and shadow effects are enabled.

[0046] In a second aspect, an embodiment of the present application provides a computer device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the optimization method for large-scale graph data visualization rendering as described in the first aspect above is implemented.

[0047] In a third aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the optimization method for large-scale graph data visualization rendering as described in the first aspect above.

[0048] The optimization method, device, and storage medium for large-scale graph data visualization rendering provided by the embodiments of the present application have at least the following technical effects:

[0049] This application dynamically adjusts the rendering granularity through an adaptive fragmentation model, automatically refines fragments in data-dense areas to improve accuracy, and intelligently merges fragments in sparse areas to save resources, balancing rendering quality and performance consumption; it predicts user interaction intentions through a viewport prediction algorithm, combined with off-screen rendering, to achieve smooth window switching.

[0050] The details of one or more embodiments of the present application are set forth in the following drawings and description to make other features, objects, and advantages of the present application more readily apparent. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0052] Figure 1 This is a flowchart of an optimization method for large-scale graph data visualization rendering in one embodiment of the present application;

[0053] Figure 2 This is a schematic diagram of the structure of the R-tree in one embodiment of the present application;

[0054] Figure 3 This is a flowchart for determining a rendering strategy in one embodiment of the present application;

[0055] Figure 4 It is a structural block diagram of an electronic device in one embodiment of the present application. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solutions and advantages of this application more clearly understood, the present application is described and illustrated below in conjunction with the accompanying drawings and examples. It should be understood that the specific embodiments described herein are merely used to explain this application and are not intended to limit this application. Based on the embodiments provided in this application, all other embodiments obtained by those of ordinary skill in the art without making any creative efforts are within the scope of protection of this application.

[0057] Obviously, the drawings described below are merely examples or embodiments of the present application. Those skilled in the art can, without inventive effort, apply the present application to other similar scenarios based on these drawings. Furthermore, it is also understood that, although the effort involved in such a development process may be complex and lengthy, for those skilled in the art related to the content disclosed in this application, changes in design, manufacturing, or production based on the technical content disclosed in this application are merely conventional technical means and should not be construed as an insufficiency of the content disclosed in this application.

[0058] References to "embodiments" in this application mean that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the application. The appearance of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor does it refer to independent or alternative embodiments that are mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described in this application may be combined with other embodiments unless there is a conflict.

[0059] Unless otherwise defined, technical or scientific terms used herein shall have the ordinary meaning as understood by persons of ordinary skill in the art to which this application belongs. The terms "a," "an," "an," "the," and similar expressions used herein do not denote quantitative limitations and may refer to either the singular or the plural. The terms "comprise," "include," "have," and any variations thereof, used herein, are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or apparatus comprising a series of steps or modules (units) is not limited to the listed steps or units but may also include steps or units not listed, or may include other steps or units inherent to the process, method, product, or apparatus. The terms "connected," "connected," "coupled," and similar expressions used herein are not limited to physical or mechanical connections but may include electrical connections, whether direct or indirect. As used herein, "plurality" means two or more. "And / or" describes an association between associated objects, indicating that three possible relationships exist. For example, "A and / or B" may mean: A exists alone; A and B exist simultaneously; or B exists alone. The character " / " generally indicates that the objects before and after are in an "or" relationship. The terms "first", "second", "third", etc. involved in this application are only used to distinguish similar objects and do not represent a specific order for the objects.

[0060] Graph data has its own characteristics and must be displayed in a clustered structure consisting of points and edges. Existing graph data visualization rendering technologies have the following problems: first, the static sharding strategy, because the fixed shard size cannot adapt to differences in node density, leads to waste of resources in sparse areas; second, the frequent switching of rendering contexts, and the independent rendering of WebGL and Canvas lead to redundant GPU instruction sets.

[0061] Based on the above situation, the embodiments of the present application provide an optimization method, device and storage medium for large-scale graph data visualization rendering, which is suitable for scenarios such as social network analysis, knowledge graph display, industrial Internet of Things topology, etc. This application can, based on the structural characteristics of graph data, perform targeted rendering performance optimization for this type of data.

[0062] In a first aspect, the present invention provides an optimization method for large-scale graph data visualization rendering. Figure 1 is a flow chart of the optimization method. The optimization method of this embodiment is as follows Figure 1 As shown, it is mainly achieved by the following steps.

[0063] Step S1: Acquire image data to be rendered, construct an R-tree spatial index based on the image data to be rendered, and construct an adaptive sharding model based on the R-tree data structure to dynamically adjust the partitioning granularity of the rendering area.

[0064] R-tree and dynamic sharding reference Figure 2 Specifically, obtain the graph data to be rendered, convert the graph nodes and edges in the graph data to be rendered into minimum bounding rectangles; calculate the Hilbert values ​​of all minimum bounding rectangles and sort them to generate an ordered minimum bounding matrix (MBR) list, and divide the sorted MBR list into nodes of fixed size, and build a multi-layer R-tree spatial index from bottom to top; count the number of MBRs per unit area within the viewport range according to the multi-layer R-tree spatial index to obtain the actual node density; obtain the benchmark shard size and shard adjustment strategy, and build the adaptive shard model according to the actual node density, the benchmark shard size and the shard adjustment strategy. Figure 2 In the example, the box containing all the graph nodes is the root node, and the root includes R 10 、R 11 and R 12 These three nodes, then R 10 Divided into R1, R2 and R3, R 11 Divided into R4, R5 and R6, R 12 Divided into R7, R8 and R9, R1~R9 contain multiple graph nodes of varying numbers.

[0065] For example, if the graph data to be rendered is a knowledge graph containing 100,000 static nodes, rendering optimization begins by preprocessing the input node data into [{id: 1, x: 100, y: 200, radius: 5}, ...], where id is the node's unique identifier, x and y are its coordinates, and radius is its radius. The Hilbert values ​​of all nodes are then calculated and sorted to generate an ordered MBR list. The MBR list is then partitioned into 100 nodes per node, constructing a multi-layer R-tree (leaf node → intermediate node...intermediate node → root node). Once the R-tree is constructed, the adaptive sharding model is constructed based on the actual node density, the baseline sharding size, and the sharding adjustment strategy.

[0066] Specifically, the standard node density is obtained, the actual node density is compared with the standard node density, and the comparison result is output; the slice scaling factor is selected according to the comparison result and the slice adjustment strategy, and the actual slice size is calculated according to the baseline slice size and the slice scaling factor; the division granularity of the rendering area is dynamically adjusted according to the actual slice size.

[0067] More specifically, the shard adjustment strategy includes: when the actual node density is greater than the standard node density, obtaining a first shard scaling factor, wherein the first shard scaling factor is less than 1; when the actual node density is less than the standard node density, obtaining a second shard scaling factor, wherein the second shard scaling factor is greater than 1; when the actual node density is equal to the standard node density, obtaining a third shard scaling factor, wherein the first shard scaling factor is equal to 1.

[0068] This embodiment constructs an adaptive sharding model based on an R-tree spatial index and a shard size calculation formula. Specifically, the shard size calculation formula is: S = K / ρ . S is the shard size, which is the final rendering area division granularity (unit: pixels / tiles) required for calculation, i.e., the dynamically determined minimum unit size of the rendering area. K is the base size, which is typically a preset basic sharding unit based on hardware performance (such as GPU memory and canvas resolution). ρ is the node density, which is the number of spatial objects per unit area as counted by the R-tree (a dynamic value, ρ ∈ [0, 1]).

[0069] According to the formula for calculating shard size, when node density is high, the shard size is small; when density is low, the shard size is large. This application uses dynamic sharding to achieve finer sharding in dense areas, improving rendering efficiency and reducing load, while reducing the number of shards in sparse areas to avoid unnecessary calculations.

[0070] Specifically, assuming the baseline node density is ρ0 (nodes / unit area), the real-time calculation of K / ρ may involve floating-point operations, which is slow. It is more efficient to directly multiply by a fixed coefficient (such as 1 / 4). When the density ρ exceeds a certain threshold (such as 10 3 ), it is considered that the slices need to be significantly reduced to avoid frequent fine-tuning; in addition, the slice size usually needs to be a power of 2 (such as 64px, 256px), and direct scaling is easier to align with the GPU texture. For example, let K=256px, ρ0=10 3 , if ρ=1200>10 3 , then S=256 / 4=64px (directly reduced to 1 / 4); if ρ=50<10 3 , then S = 256 × 4 = 1024px (directly expanded to 4 times). This embodiment directly uses a fixed coefficient to limit the shard size in dense areas (ρ>103 nodes / unit area) to 1 / 4, and to expand it to 4 times in sparse areas (ρ<103 nodes / unit area).

[0071] Step S2: Monitor the user's interaction data in real time, perform viewport prediction based on the interaction data, and determine the sub-image to be loaded based on the prediction result and the adaptive sharding model. If the user moves the viewport, the mouse speed and acceleration are obtained from the interaction data, and then the predicted time is obtained. The cursor's movement distance within the predicted time is calculated based on the speed and acceleration; the current coordinates of the cursor are obtained, and the predicted coordinates of the cursor after the predicted time are calculated based on the current coordinates and the movement distance; the preset viewport width is obtained, and the area with the predicted coordinates as the center and the viewport width as the side length is used as the predicted viewport range; the pre-rendered image data is determined based on the predicted viewport range and the R-tree spatial index, and the partitioning granularity of the pre-rendered image data within the predicted viewport range is adjusted by the adaptive sharding model to obtain the sub-image to be loaded.

[0072] For example, based on the user's mouse speed v and acceleration a, the viewport displacement at a certain moment in the future (such as t = 200ms) is calculated. The prediction algorithm formula is as follows:

[0073]

[0074] Among them, Δx is the displacement in the x-axis direction, Δy is the displacement in the y-axis direction, and v x is the initial velocity on the x-axis, v y is the initial velocity on the y-axis, a x is the x-axis acceleration, a y is the y-axis acceleration and t is the motion time.

[0075] Then, based on the predicted displacements Δx and Δy, the coordinates of the center point of the preload area are calculated. The specific calculation formula is as follows:

[0076]

[0077] Get the side length of the preloaded area, then preload the graph data of the area centered at (x+Δx, y+Δy) with a side length of 1.5W (W is the current viewport width, the specific value can be set by the user), and analyze the node density of these graph data through the adaptive sharding model. According to the analysis results, adjust the division granularity of the graph data within the predicted viewport range to obtain the subgraph to be loaded.

[0078] In another preferred embodiment, zoom viewport prediction can also be performed. Specifically, the user's zoom speed is calculated in real time, and the calculation formula is: zoom speed = Δzoom ratio * Δt, where Δzoom ratio is the change in zoom ratio and Δt is the time interval.

[0079] Then, based on the zoom speed, predict the zoom ratio at a certain time in the future (e.g., t = 200ms). This can be calculated using the following formula: predicted zoom ratio = current zoom ratio + zoom speed * t.

[0080] Then, based on the predicted scaling ratio, adjust the size of the preload area, which can be calculated using the following formula:

[0081] Preload area width = current viewport width * predicted zoom ratio * 1.5.

[0082] In another preferred embodiment, drag operation prediction is also performed. Specifically, the user's drag speed is calculated in real time using the formula: drag speed = ΔxΔt, where Δx is the change in drag displacement and Δt is the time interval. Based on the drag speed, the drag displacement at a certain point in the future (e.g., t = 200ms) is predicted using the formula: drag displacement = drag speed * t. The position of the preload area is adjusted based on the predicted drag displacement, as well as the user's real-time drag operation, dynamically adjusting the position and size of the preload area to ensure that the preload area always covers the area where the user is likely to operate.

[0083] Step S3: Acquire system data from the client device, analyze the performance of the client device based on the system data, and determine a rendering strategy based on the performance analysis results. For example, when the collected system data is the current video memory occupancy rate, the steps for determining the rendering strategy are as follows: obtain the video memory warning occupancy rate, and determine whether the current video memory occupancy rate is greater than the video memory warning occupancy rate; if the judgment result is no, select the WebGL full-precision rendering mode; if the judgment result is yes, select the WebGL+Canvas hybrid rendering mode; wherein, in the WebGL+Canvas hybrid rendering mode, the static data layer is rendered using Canvas, and the dynamic data layer and special effects layer are rendered using WebGL.

[0084] More specifically, during the hybrid rendering process, this embodiment uses Canvas to draw static data layers, such as backgrounds, text, and simple graphics; uses WebGL to batch render dynamic data layers, such as large-scale scattered points and geometric objects; and uses WebGL shaders to render special effects layers, such as lighting and particle effects. This application uses Canvas to render simple static graphics such as text, simple graphics, and icons, fully leveraging the rendering performance of the CPU rendering pipeline. When users expand, query, and display graph calculation data effects, since the geometry at this time is more complex and the data volume is also larger, this part is rendered using WebGL's GPU pipeline, leveraging the rendering advantages of the GPU.

[0085] In this application's WebGL+Canvas hybrid rendering mode, functions for drawing graphic paths in Canvas (such as APIs like lineTo and arc) are superior to WebGL's point-by-point rasterization when drawing smooth curves (curves drawn in WebGL require manual anti-aliasing or the use of SDF technology). WebGL uses instanced drawing to achieve batch rendering of tens of thousands of elements, while Canvas is more suitable for processing a small number of dynamically updated independent elements. Canvas's ImageData can directly manipulate pixels, making it suitable for intermediate steps in image processing. WebGL's FBO is more suitable for chaining complex post-processing effects. In summary, this application utilizes the WebGL+Canvas hybrid rendering engine, leveraging its strengths to offset its weaknesses and maximize rendering performance.

[0086] In another preferred embodiment, it is necessary to comprehensively consider the different performance of the devices used by users, the different rendering client devices, and the different GPU memory levels and graphics card performance in their rendering environments. In order to be compatible with more devices and user environments, it is necessary to design a degradation plan to allow as many user environments as possible to obtain good rendering performance.

[0087] refer to Figure 3 , the specific rendering degradation scheme is as follows:

[0088] Get the current video memory usage, current frame rate and rendering engine compatible version from system data;

[0089] First, detect the WebGL version supported by the client device. If it supports WebGL 2.0, enter the high-precision rendering mode; if it only supports WebGL 1.0, enter the basic WebGL rendering mode; if it does not support WebGL, enter the Canvas rendering mode;

[0090] In high-precision rendering mode, the current frame rate is monitored in real time. If the current frame rate is ≥ N, the current rendering mode is maintained; if M ≤ current frame rate < N, a simple degradation rendering mode is selected, wherein the simple degradation rendering mode includes reducing the rendering resolution, disabling SSAO / shadows, and simplifying the particle system; if the current frame rate is < M, a deep degradation rendering mode is selected, wherein the deep degradation rendering mode includes switching to low-poly LOD, disabling post-processing, and enabling dynamic batching; wherein M < N, for example, M = 45, N = 60;

[0091] In the basic WebGL rendering mode, obtain the video memory warning occupancy rate (assuming it is 70%), and monitor the current video memory occupancy rate in real time to determine whether the current video memory occupancy rate is greater than the video memory warning occupancy rate; if the judgment result is no, maintain the current rendering mode; if the judgment result is yes, select the WebGL+Canvas hybrid rendering mode;

[0092] In Canvas rendering mode, the current frame rate of the Canvas is monitored in real time. If the current frame rate is ≥ K (such as K=30), vector drawing is retained; if the current frame rate is < K, rasterization caching is enabled.

[0093] Step S4 performs off-screen rendering of the sub-graph to be loaded according to the rendering strategy. This means predicting the user's mouse movements and rendering data not in the viewport off-screen in a worker. Specifically, after off-screen rendering is triggered, the viewport position at a certain point in the future is predicted when the user drags the viewport. Background rendering then occurs, and in the worker thread, the graph data within the predicted viewport is rendered using an off-screen Canvas. This smooth switching allows the pre-rendered result to be directly displayed when the user actually moves to the predicted position, achieving a lag-free experience through viewport prediction and off-screen rendering.

[0094] In one specific embodiment, the off-screen rendering process first creates an off-screen buffer. The buffer size is typically equal to or larger than the viewport (e.g., a power of 2: 512x512), and the color / depth format must match the rendering requirements (e.g., RGBA8, DEPTH_COMPONENT16). A render target is then bound, redirecting GPU drawing commands to the off-screen buffer instead of the default on-screen framebuffer. Off-screen rendering then occurs. The drawing logic is identical to normal rendering (e.g., drawing the scene first and then applying post-processing effects), but the output is to the off-screen buffer, and redundant drawing is avoided, such as updating only dynamic components (moving nodes) and using lower-detail models. The data is then transferred to the main screen. During the data transfer process, the off-screen buffer's texture is directly bound to the main screen renderer, pixel data is read, and the data is drawn to the main Canvas using ImageBitmap or Canvas2D, with the data transferred using a worker thread. Finally, compositing is performed. During compositing, multiple off-screen rendering layers can be overlaid (e.g., UI layer + scene layer), or only the off-screen content in the visible area can be composited. In addition, for frequently changing content (due to users frequently operating on image data), the off-screen buffer can be rebuilt for each frame, and then resources such as Shader programs can be reused.

[0095] In a preferred embodiment, it is also necessary to obtain the current viewing distance based on the user's interactive data, such as detecting the zoom operation of the screen. During the off-screen rendering process, the sub-graph to be loaded is visually rendered at different levels of detail according to the current viewing distance. Specifically, when the current viewing distance is a long viewing distance, the nodes and edges in the sub-graph to be loaded are simplified to preset pixel nodes and edges of preset transparency; when the current viewing distance is a medium viewing distance, the first letters of the labels and edge type icons in the sub-graph to be loaded are displayed; when the current viewing distance is a near viewing distance, full-precision rendering and shadow effects are enabled. Among them, the LOD level settings and corresponding effects of this application refer to Table 1.

[0096] Table 1:

[0097]

[0098] In a preferred embodiment, pre-calculation can also be performed on the server side, that is, LOD (level of detail) data of each sub-graph is generated on the server. The LOD data contains full-precision geometry, simplified point cloud, and topological relationship metadata. When the server side obtains data information, the density of points and edges is calculated in real time, thereby performing data pre-processing.

[0099] Specifically, the server preprocesses the full graph data into logical subgraphs, generating full-precision, simplified point clouds, and topological metadata for each subgraph. Density calculation services (such as REST APIs) can also be established. When the client runs the graph data, it uploads the current viewport information to the server. The server obtains the density and recommended LOD of the corresponding graph data based on the viewport information and loads the corresponding LOD data according to the recommended LOD. The LOD data is then allocated and rendered off-screen using an adaptive dynamic sharding model. Once rendered, it is sent to the client device, which displays the corresponding graph data.

[0100] In summary, the optimization method for large-scale graph data visualization rendering provided by the embodiment of the present application dynamically adjusts the rendering granularity through an adaptive sharding model, automatically refines shards in data-dense areas to improve accuracy, and intelligently merges shards in sparse areas to save resources, thereby balancing rendering quality and performance consumption; predicts user interaction intentions through a viewport prediction algorithm, and achieves smooth window switching with multi-level LOD detail levels and off-screen rendering technology; transfers heavy-loaded tasks to the background through off-screen rendering and pre-calculation technology to ensure zero blocking of main thread interactions. The optimization method provided by the embodiment of the present application constructs a highly responsive, low-latency, and widely compatible graph data visualization rendering optimization solution, providing a smooth experience for scenarios such as social network analysis, industrial Internet of Things monitoring, and knowledge graph exploration.

[0101] In a second aspect, an embodiment of the present application provides an electronic device, Figure 4 FIG is a block diagram of an electronic device according to an exemplary embodiment. Figure 4 As shown, the electronic device may include a processor 11 and a memory 12 storing computer program instructions.

[0102] Specifically, the processor 11 may include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.

[0103] The memory 12 may include a large-capacity memory for data or instructions. By way of example, and not limitation, the memory 12 may include a hard disk drive (HDD), a floppy disk drive, a solid-state drive (SSD), flash memory, an optical disk, a magneto-optical disk, a magnetic tape, or a Universal Serial Bus (USB) drive, or a combination of two or more of these. Where appropriate, the memory 12 may include removable or non-removable (or fixed) media. Where appropriate, the memory 12 may be internal or external to the data processing device. In certain embodiments, the memory 12 is non-volatile memory. In certain embodiments, the memory 12 includes read-only memory (ROM) and random access memory (RAM). Where appropriate, the ROM may be a mask-programmed ROM, a programmable ROM (PROM), an erasable PROM (EPROM), an electrically erasable PROM (EEPROM), an electrically alterable ROM (EAROM) or a flash memory (FLASH), or a combination of two or more of these. Under appropriate circumstances, the RAM can be a static random access memory (SRAM) or a dynamic random access memory (DRAM), where the DRAM can be a fast page mode dynamic random access memory (FPMDRAM), an extended data out dynamic random access memory (EDODRAM), a synchronous dynamic random access memory (SDRAM), etc.

[0104] The memory 12 may be used to store or cache various data files that need to be processed and / or used for communication, as well as possible computer program instructions executed by the processor 11 .

[0105] The processor 11 reads and executes computer program instructions stored in the memory 12 to implement any one of the optimization methods for large-scale graph data visualization rendering in the above embodiments.

[0106] In one embodiment, the electronic device may further include a communication interface 13 and a bus 10. Figure 4 As shown, the processor 11 , the memory 12 , and the communication interface 13 are connected via a bus 10 and communicate with each other.

[0107] The communication interface 13 is used to enable communication between the various modules, devices, units, and / or devices in the embodiments of the present application. The communication port 13 can also enable data communication with other components such as external devices, image / data acquisition devices, databases, external storage, and image / data processing workstations.

[0108] The bus 10 includes hardware, software, or both, and couples the components of the electronic device to each other. The bus 10 includes, but is not limited to, at least one of the following: a data bus, an address bus, a control bus, an expansion bus, and a local bus. By way of example and not limitation, bus 10 may include an Accelerated Graphics Port (AGP) or other graphics bus, an Extended Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a Hyper Transport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an InfiniBand interconnect, a Low Pin Count (LPC) bus, a memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local Bus (VLB) bus, or other suitable buses, or a combination of two or more of these. Bus 10 may include one or more buses, where appropriate. Although embodiments herein describe and illustrate a particular bus, this application contemplates any suitable bus or interconnect.

[0109] In a third aspect, an embodiment of the present application provides a computer-readable storage medium having a program stored thereon. When the program is executed by a processor, the optimization method for large-scale graph data visualization rendering provided in the first aspect is implemented.

[0110] The readable storage medium may include, but is not limited to, a portable disk, a hard disk, a random access memory, a read-only memory, an erasable programmable read-only memory, an optical storage device, a magnetic storage device, or any suitable combination thereof.

[0111] In a possible embodiment, the present invention can also be implemented in the form of a program product, which includes program code. When the program product is run on a terminal device, the program code is used to enable the terminal device to execute the steps of the optimization method for large-scale graph data visualization rendering provided by the first aspect.

[0112] The program code for executing the present invention may be written in any combination of one or more programming languages, and may be executed entirely on the user device, partially on the user device, as an independent software package, partially on the user device and partially on a remote device, or entirely on the remote device.

[0113] The technical features of the above-mentioned embodiments can be combined arbitrarily. In order to make the description concise, not all possible combinations of the technical features in the above-mentioned embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0114] The above-described embodiments merely represent several implementation methods of the present application. While the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the present invention. It should be noted that a person skilled in the art could make various modifications and improvements without departing from the spirit of the present application, all of which fall within the scope of protection of the present application. Therefore, the scope of protection of the present patent application shall be determined by the appended claims.

Claims

1. An optimization method for large-scale graph data visualization rendering, characterized in that: include: Acquire the image data to be rendered, construct an R-tree spatial index based on the image data to be rendered, and construct an adaptive sharding model based on the R-tree data structure to dynamically adjust the granularity of the rendering area; Monitor user interaction data in real time, perform viewport prediction based on the interaction data, and determine the subgraph to be loaded based on the prediction result and the adaptive sharding model; Acquiring system data of a client device, analyzing performance of the client device based on the system data, and determining a rendering strategy based on the performance analysis results; Performing off-screen rendering on the sub-image to be loaded according to the rendering strategy, and displaying the off-screen rendering result on the client device after detecting that the user has completed the corresponding operation; The step of performing viewport prediction based on the interaction data and determining a sub-graph to be loaded based on the prediction result and the adaptive sharding model includes: Identifying an interactive operation performed by the user on the graph data based on the interactive data, and estimating a predicted viewport range based on the interactive operation and the interactive data; Pre-rendered image data is determined according to the predicted viewport range and the R-tree spatial index, and the partitioning granularity of the pre-rendered image data within the predicted viewport range is adjusted by the adaptive sharding model to obtain the sub-image to be loaded.

2. The optimization method according to claim 1, characterized in that The method further comprises: The current viewing distance is obtained, and during the off-screen rendering process, visual rendering of the sub-image to be loaded is performed at different detail levels according to the current viewing distance.

3. The optimization method according to claim 1, characterized in that The step of constructing an R-tree spatial index according to the image data to be rendered and constructing an adaptive sharding model based on the R-tree data structure includes: Obtaining graph data to be rendered, and converting graph nodes and edges in the graph data to be rendered into minimum bounding rectangles; Calculate the Hilbert values ​​of all minimum bounding rectangles and sort them to generate an ordered MBR list. Then divide the sorted MBR list into nodes of fixed size and construct a multi-layer R-tree spatial index from bottom to top. Counting the number of MBRs per unit area within the viewport range according to the multi-layer R-tree spatial index to obtain the actual node density; A reference shard size and a shard adjustment strategy are obtained, and the adaptive shard model is constructed according to the actual node density, the reference shard size, and the shard adjustment strategy.

4. The optimization method according to claim 3, characterized in that The constructing the adaptive sharding model according to the actual node density, the reference sharding size, and the sharding adjustment strategy includes: Obtaining a standard node density, comparing the actual node density with the standard node density, and outputting a comparison result; Selecting a slice scaling factor according to the comparison result and the slice adjustment strategy, and calculating an actual slice size according to the reference slice size and the slice scaling factor; The division granularity of the rendering area is dynamically adjusted according to the actual tile size.

5. The optimization method according to claim 4, characterized in that: The shard adjustment strategy includes: When the actual node density is greater than the standard node density, obtaining a first shard scaling factor, wherein the first shard scaling factor is less than 1; When the actual node density is less than the standard node density, obtaining a second shard scaling factor, wherein the second shard scaling factor is greater than 1; When the actual node density is equal to the standard node density, a third shard scaling factor is obtained, wherein the first shard scaling factor is equal to 1.

6. The optimization method according to claim 1, characterized in that: When the interactive operation is viewport translation, identifying the interactive operation performed by the user on the graph data according to the interactive data, and estimating the predicted viewport range according to the interactive operation and the interactive data, includes: Obtaining the predicted time, the speed and acceleration of the cursor movement, and calculating the movement distance of the cursor within the predicted time according to the speed and the acceleration; Obtaining the current coordinates of the cursor, and calculating the predicted coordinates of the cursor after the predicted time based on the current coordinates and the movement distance; Obtaining a preset viewport width, and taking the predicted coordinates as the center and the viewport width as the side length as the predicted viewport range; Pre-rendered image data is determined according to the predicted viewport range and the R-tree spatial index, and the partitioning granularity of the pre-rendered image data within the predicted viewport range is adjusted by the adaptive sharding model to obtain the sub-image to be loaded.

7. The optimization method according to claim 1, characterized in that: The system data includes a current video memory occupancy rate, and the analyzing the performance of the client device according to the system data and determining the rendering strategy according to the performance analysis result include: Obtaining a video memory warning occupancy rate, and determining whether the current video memory occupancy rate is greater than the video memory warning occupancy rate; If the judgment result is no, the WebGL full-precision rendering mode is selected; if the judgment result is yes, the WebGL+Canvas mixed rendering mode is selected; Among them, in the WebGL+Canvas hybrid rendering mode, the static data layer is rendered through Canvas, and the dynamic data layer and special effect layer are rendered through WebGL.

8. The optimization method according to claim 1, characterized in that: The system data includes a current video memory occupancy rate, a current frame rate, and a rendering engine compatible version. The analyzing the performance of the client device according to the system data and determining the rendering strategy according to the performance analysis result include: Detecting the WebGL version supported by the client device, and if it supports WebGL 2.0, entering high-precision rendering mode; if it only supports WebGL 1.0, entering basic WebGL rendering mode; if it does not support WebGL, entering Canvas rendering mode; In high-precision rendering mode, the current frame rate is monitored in real time. If the current frame rate is ≥ N, the current rendering mode is maintained; if M ≤ current frame rate < N, a simple degradation rendering mode is selected, wherein the simple degradation rendering mode includes reducing the rendering resolution, disabling SSAO / shadows, and simplifying the particle system; if the current frame rate is < M, a deep degradation rendering mode is selected, wherein the deep degradation rendering mode includes switching to low-poly LOD, disabling post-processing, and enabling dynamic batching; wherein M < N; In the basic WebGL rendering mode, obtain the video memory warning occupancy rate, and monitor the current video memory occupancy rate in real time to determine whether the current video memory occupancy rate is greater than the video memory warning occupancy rate; if the judgment result is no, maintain the current rendering mode; if the judgment result is yes, select the WebGL+Canvas hybrid rendering mode; In Canvas rendering mode, the current frame rate of the Canvas is monitored in real time. If the current frame rate is ≥ K, vector drawing is retained; if the current frame rate is < K, rasterization caching is enabled.

9. The optimization method according to claim 2, characterized in that: The step of performing visual rendering of the sub-image to be loaded at different levels of detail according to the current viewing distance includes: When the current viewing distance is a far viewing distance, simplifying the nodes and edges of the subgraph to be loaded into nodes with preset pixels and edges with preset transparency; When the current viewing distance is a medium viewing distance, displaying the first letter of the label and the edge type icon of the sub-graph to be loaded; When the current viewing distance is near viewing distance, full-precision rendering and shadow effects are enabled.

10. An electronic device, characterized in that: The invention comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the optimization method for large-scale graph data visualization rendering as described in any one of claims 1 to 9 is implemented.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the optimization method for large-scale graph data visualization rendering according to any one of claims 1 to 9 is implemented.

Images