WebGL-based network graph processing methods, apparatus, and electronic devices

Abstract

A WebGL-based network graph processing method, apparatus, and electronic device are disclosed. The WebGL-based network graph processing method includes: creating an initial object based on WebGL, the initial object including multiple nodes and multiple edges connecting at least a portion of the multiple nodes; acquiring initial input data for the multiple nodes and initial input data for the multiple edges, the initial input data for the multiple nodes including the coordinates of the multiple nodes; iteratively updating the coordinates of each of the multiple nodes; and outputting the processed network graph based on the update result of the coordinates of each node. Thus, by combining WebGL technology with traditional graph layout algorithms, high-performance network graph layout on a web browser can be achieved.

Description

Technical Field

[0001] This application relates to the field of network graph processing, and more specifically, to a WebGL-based network graph processing method, apparatus, and electronic device. Background Technology

[0002] In recent years, with the continuous development of information technology, network diagrams have played an increasingly important role in real life. Real-world network diagrams are often characterized by their large scale and complex relationships. Correctly interpreting and understanding the complex information contained within a network often requires a process from acquiring information to extracting useful information. How to intuitively and efficiently analyze and study this extracted useful information and its complex data has become a pressing issue of concern.

[0003] Visualization of complex networks is a crucial tool in complex network research. With the advent of the Web 2.0 and big data era, the scale of complex networks as research objects is increasing, and there is a growing need to accurately represent and understand these massive datasets to further explore and extract valuable information. Traditional data representation methods are no longer sufficient. Therefore, visualizing complex network data has become a primary way to understand and study complex network data.

[0004] Graph layout is a crucial element in information visualization. Effective graph layout helps people understand the structure of network data more intuitively and clearly, while also aiding in problem identification and enabling further interactive exploration to uncover potential information. Graph layout algorithms are widely used in social networks, knowledge graphs, deep learning, and other fields.

[0005] However, the massive growth of complex network data presents new challenges to the layout effectiveness and computational speed of complex network visualization layout algorithms. Existing graph layout algorithms, limited by their time or space complexity, are increasingly unable to generate satisfactory layouts.

[0006] Therefore, it is desirable to provide an improved network graph processing method for generating network graphs to represent complex networks. Summary of the Invention

[0007] To address the aforementioned technical problems, this application is proposed. Embodiments of this application provide a WebGL-based network graph processing method, apparatus, and electronic device, which achieves high-performance network graph layout on a web browser by combining WebGL technology with traditional graph layout algorithms.

[0008] According to one aspect of this application, a WebGL-based network graph processing method is provided, comprising: creating an initial object based on WebGL, the initial object including multiple nodes and multiple edges connecting at least a portion of the multiple nodes; acquiring initial input data of the multiple nodes and initial input data of the multiple edges, the initial input data of the multiple nodes including the coordinates of the multiple nodes; iteratively updating the coordinates of each of the multiple nodes; and outputting the processed network graph based on the update result of the coordinates of each node.

[0009] In the above WebGL-based network graph processing method, creating an initial object based on WebGL includes: obtaining the canvas; obtaining the WebGL drawing context; initializing the shader; activating the shader; and creating the initial object.

[0010] In the WebGL-based network graph processing method described above, the shaders include vertex shaders and fragment shaders.

[0011] In the above WebGL-based network graph processing method, creating an initial object based on WebGL further includes: scene transformation; and scene rendering.

[0012] In the above WebGL-based network graph processing method, obtaining the initial input data of the multiple nodes and the initial input data of the multiple edges includes: constructing an input pixel array using the initial input data of the multiple nodes and the initial input data of the multiple edges, wherein the input pixel array contains: data for each pixel consisting of 4 32-bit floating-point data representing R, G, B, and A; data for each pixel representing the data of one node; edge data for each node stored sequentially with the node in the input pixel array; the node data including the X and Y coordinates of the node, the offset of the node's edge in the input pixel array, and the number of edges of the node; and the edge data including the ID of the target node.

[0013] In the WebGL-based network graph processing method described above, iteratively updating the coordinates of each of the plurality of nodes includes: for each node, applying a repulsive force from all nodes in the plurality of nodes to the node; reading the target node at the edge of the node and applying an attractive force from the node to the target node; and applying gravity to the node to obtain the new X and Y coordinates of the node.

[0014] In the above WebGL-based network graph processing method, outputting the processed network graph based on the update results of the coordinates of each node includes: generating an updated texture image based on the update results of the coordinates of each node as the output of the processed network graph.

[0015] In the above WebGL-based network graph processing method, generating an updated texture image based on the update result of the coordinates of each node as the processed network graph output includes: after each iteration, the WebGL-based shader takes the output calculated in the previous iteration corresponding to the node as input, and generates output pixels based on the update result of the coordinates of each node; and generates a texture image after each iteration based on the output pixels of the plurality of nodes.

[0016] According to another aspect of this application, a WebGL-based network graph processing apparatus is provided, comprising: an object creation unit for creating an initial object based on WebGL, the initial object including a plurality of nodes and a plurality of edges connecting at least a portion of the plurality of nodes; a data acquisition unit for acquiring initial input data of the plurality of nodes and initial input data of the plurality of edges, the initial input data of the plurality of nodes including the coordinates of the plurality of nodes; an iterative update unit for iteratively updating the coordinates of each of the plurality of nodes; and a network graph output unit for outputting a processed network graph based on the update result of the coordinates of each node.

[0017] According to another aspect of this application, an electronic device is provided, comprising: a processor; and a memory storing computer program instructions, which, when executed by the processor, cause the processor to perform the WebGL-based network graph processing method as described above.

[0018] According to another aspect of this application, a computer-readable medium is provided having computer program instructions stored thereon, which, when executed by a processor, cause the processor to perform the WebGL-based network graph processing method as described above.

[0019] The WebGL-based network graph processing method, network graph processing device, and electronic device of this application achieve high-performance network graph layout on a web browser by combining WebGL technology with traditional graph layout algorithms. Attached Figure Description

[0020] The above and other objects, features, and advantages of this application will become more apparent from the more detailed description of the embodiments of this application in conjunction with the accompanying drawings. The drawings are provided to further illustrate the embodiments of this application and form part of the specification. They are used together with the embodiments of this application to explain this application and do not constitute a limitation thereof. In the drawings, the same reference numerals generally represent the same components or steps.

[0021] Figure 1The illustration shows a flowchart of a WebGL-based network graph processing method according to an embodiment of this application.

[0022] Figure 2 The illustration shows a schematic diagram of the object rendering process in a WebGL-based network graph processing method according to an embodiment of this application.

[0023] Figure 3 The illustration shows a schematic diagram of the memory distribution in a WebGL-based network graph processing method according to an embodiment of this application.

[0024] Figure 4 The illustration shows a schematic diagram of the basic principle of the network graph layout algorithm in the WebGL-based network graph processing method according to an embodiment of this application.

[0025] Figure 5 The illustration shows a schematic diagram of the input and output of a shader in a WebGL-based network graph processing method according to an embodiment of this application.

[0026] Figure 6 The illustration shows the speedup ratio of the WebGL-based network graph processing method and the conventional method under different edge conditions according to embodiments of this application.

[0027] Figure 7 The illustration shows the speedup ratio of the WebGL-based network graph processing method and the conventional method at different iteration numbers according to embodiments of this application.

[0028] Figure 8 The illustrations show network graph layouts with different numbers of edges in 100 iterations of the WebGL-based network graph processing method according to embodiments of this application, as well as network graph layouts with different iteration counts under fixed node and edge count conditions.

[0029] Figure 9 The illustration shows a block diagram of a WebGL-based network graph processing apparatus according to an embodiment of the present application.

[0030] Figure 10 A block diagram of an electronic device according to an embodiment of this application is illustrated. Detailed Implementation

[0031] Hereinafter, exemplary embodiments according to this application will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are merely some embodiments of this application, and not all embodiments of this application. It should be understood that this application is not limited to the exemplary embodiments described herein.

[0032] Exemplary methods

[0033] Figure 1The illustration shows a flowchart of a WebGL-based network graph processing method according to an embodiment of this application.

[0034] like Figure 1 As shown, the WebGL-based network graph processing method according to an embodiment of this application includes the following steps.

[0035] Step S110: Create an initial object based on WebGL. The initial object includes multiple nodes and multiple edges connecting at least a portion of the multiple nodes.

[0036] Here, WebGL (Web Graphics Library) relies on a shader-based drawing mechanism. Shaders provide flexible and powerful methods for drawing 2D or 3D graphics and various rendering effects, such as the impact of lighting and viewpoint changes on the scene. Shaders mainly include vertex shaders and fragment shaders. Vertex shaders describe vertex characteristics such as position and color; a vertex is a point in 2D or 3D space. Fragment shaders perform fragment-by-fragment processing, such as lighting and viewpoint adjustments. In the implementation, shaders are embedded as strings in a JavaScript file. JavaScript reads the shader information and stores it in the WebGL system for later use.

[0037] Therefore, WebGL is a renderer library. In this embodiment, the WebGL library interface is used to perform general calculations on network graph layout. For example, the renderer library can be based on WebGL's Sigma.js and refer to GPGPUtility.js. Of course, the original WebGL framework cannot solve the calculation problem of network graph layout very well, and the library needs to be modified to adapt to graph layout algorithms, and for example, to further adapt to the operation of graph layout algorithms on GPUs.

[0038] Graph layout algorithms take a set of node coordinates and edges as input and iteratively update the position of each node. Typically, these algorithms perform several iterations or until convergence. Correspondingly, WebGL works by taking an input pixel array, performing calculations, and writing the result to an output pixel array in each iteration. Therefore, to complete the computation of graph layout algorithms, it is necessary to design appropriate data structures and workflows within this WebGL computational framework.

[0039] In this embodiment, to create an initial object comprising multiple nodes and edges using WebGL, the WebGL program execution flow is as follows: First, the Canvas is acquired, then the WebGL context is acquired, and the WebGL core functions are accessed through the context object. Here, the context object refers to the elements required for drawing, such as the data of nodes and connections in the network graph, the canvas size, etc. These contexts are used as input to the WebGL core functions to execute them, thereby obtaining the content to be rendered. Next, the shaders are initialized. That is, after preparing the shader model, the content of each node can be obtained, and the shaders can be initialized. In specific implementation, the shaders are written in the OpenGLES shading language. The shader portion of each node needs to be compiled and returned to the caller, and then linked to the overall shader to activate the overall shader. After preparing the shaders, objects can be created. Any object is composed of points and lines, i.e., nodes and edges connecting nodes. When creating objects, vertex arrays and index arrays are created for each node and edge, and they are stored in a specific format. In addition, after the object is created, you can also set up a camera and other functions to transform the scene and render the scene.

[0040] Therefore, in the WebGL-based network graph processing method according to the embodiments of this application, creating an initial object based on WebGL includes: acquiring a canvas; acquiring a WebGL drawing context; initializing a shader; activating the shader; and creating an initial object.

[0041] Furthermore, in the aforementioned WebGL-based network graph processing method, the shaders include vertex shaders and fragment shaders.

[0042] Furthermore, in the aforementioned WebGL-based network graph processing method, the creation of the initial object based on WebGL further includes: scene transformation; and scene rendering.

[0043] therefore, Figure 2 The illustration shows a schematic diagram of the object rendering process in a WebGL-based network graph processing method according to an embodiment of this application. For example... Figure 2 As shown, the object rendering process according to the embodiments of this application includes: S210, obtaining a canvas; S220, obtaining a WebGL drawing context; S230, initializing a shader; S240, activating a shader; S250, creating an initial object; S260, scene transformation; and S270, scene rendering.

[0044] Step S120: Obtain the initial input data of the plurality of nodes and the initial input data of the plurality of edges, wherein the initial input data of the plurality of nodes includes the coordinates of the plurality of nodes.

[0045] As mentioned above, in order to complete the computation of the graph layout algorithm, it is necessary to design a suitable data structure based on the WebGL computing framework. For example, it is necessary to adapt the graph layout algorithm to run on the GPU.

[0046] Therefore, in the embodiments of this application, according to as follows Figure 3 The memory layout shown is used to construct the input pixel array for the shader. Here, Figure 3 The illustration shows a schematic diagram of the memory distribution in a WebGL-based network graph processing method according to an embodiment of this application.

[0047] like Figure 3 As shown, each box in the array is a pixel containing four 32-bit floating-point numbers representing r, g, b, and a. The node data structure is packed and stored at the beginning of the input array, with each pixel storing the data for one node. Edges follow the nodes in the array; the edges of each node are stored together and placed in the array in the same order as the corresponding nodes. Each pixel of a node stores its X and Y coordinates, the offset of the node's edge in the array, and the number of edges. Each edge only needs to store the id of the target node, which is a 32-bit value.

[0048] That is, in the WebGL-based network graph processing method according to the embodiments of this application, obtaining the initial input data of the plurality of nodes and the initial input data of the plurality of edges includes: constructing an input pixel array with the initial input data of the plurality of nodes and the initial input data of the plurality of edges, wherein: the input pixel array contains data for each pixel as 4 32-bit floating-point data representing R, G, B and A; each pixel stores data for one node; the edge data of each node is stored sequentially with the node in the input pixel array; the node data includes the X and Y coordinates of the node, the offset of the edge of the node in the input pixel array and the number of edges of the node; and the edge data includes the ID of the target node.

[0049] This memory layout offers several advantages. First, most memory accesses are sequential reads, with virtually no divergent execution. This is because when calculating the repulsion between different nodes, the data structures of all other nodes can be accessed in the same order. When calculating the attraction of a node, the edge array of adjacent nodes is stored in an array, where sequential reads are performed most of the time; random reads are performed when adjacent coordinates need to be accessed, but this is much less frequent than sequential reads. Since computation is memory-constrained, the design leverages data locality, thus ensuring fairly good execution efficiency.

[0050] In other words, since the computation between nodes is independent in each iteration of the graph layout algorithm, most memory reads can be sequential by optimizing the memory layout. This makes the WebGL-based network graph processing method according to the embodiments of this application well-suited for SPMD programs running on GPUs. Here, SPMD is a technique for achieving parallelism, where tasks are independent and run simultaneously on multiple processors to obtain results faster with different inputs. Those skilled in the art will understand that SPMD is a common parallel programming style.

[0051] Step S130: Iteratively update the coordinates of each of the plurality of nodes. In this embodiment, a general graph layout algorithm is used, such as... Figure 3 As shown. Specifically, in each iteration, three forces—repulsive, attractive, and gravitational—are applied to each node, and then the X and Y coordinates are updated accordingly. Repulsive forces are applied to each pair of nodes to prevent them from getting too close, attractive forces are applied to each edge to pull the source and target nodes towards each other, and gravity pulls each node towards the origin, thus preventing clusters from becoming too far apart. This computation is memory-constrained because the most time-consuming computation is applying the repulsive force to each node, performing 10 floating-point arithmetic operations on 4 32-bit reads per node. Here, Figure 4 The illustration shows a schematic diagram of the basic principle of the network graph layout algorithm in the WebGL-based network graph processing method according to an embodiment of this application.

[0052] In this embodiment, the shader first applies repulsive forces from all other nodes to a given node by iterating through the input pixel array. Then, it reads the destination of the node's edge, i.e., the target node, and applies attractive forces from that node to the target node. Gravity is then applied to the node, and new X and Y coordinates are calculated.

[0053] Therefore, in the WebGL-based network graph processing method according to the embodiments of this application, iteratively updating the coordinates of each of the plurality of nodes includes: for each node, applying a repulsive force from all nodes in the plurality of nodes to the node; reading the target node at the edge of the node and applying an attractive force from the node to the target node; and applying gravity to the node to obtain new X and Y coordinates of the node.

[0054] Step S140: Output the processed network graph based on the updated coordinates of each node. As described above, when creating the initial object, the object includes nodes and edges, thus the shader draws the input texture based on the data of the initial object. After updating the X and Y coordinates of each node, the shader draws the output texture based on the updated data, such as... Figure 5 As shown. Here, Figure 5The illustration shows a schematic diagram of the input and output of a shader in a WebGL-based network graph processing method according to an embodiment of this application.

[0055] Therefore, in the WebGL-based network graph processing method according to the embodiments of this application, outputting the processed network graph based on the update result of the coordinates of each node includes: generating an updated texture image based on the update result of the coordinates of each node as the output of the processed network graph.

[0056] Furthermore, in the above-mentioned WebGL-based network graph processing method, generating an updated texture image based on the update result of the coordinates of each node as the processed network graph output includes: after each iteration, the WebGL-based shader takes the output calculated in the previous iteration corresponding to the node as input and generates output pixels based on the update result of the coordinates of each node; and generates a texture image after each iteration based on the output pixels of the plurality of nodes.

[0057] Thus, by using the WebGL-based network graph processing method according to the embodiments of this application, high-performance network layout can be achieved on a web browser by combining WebGL technology with traditional graph layout algorithms.

[0058] Furthermore, the WebGL-based network graph processing method according to the embodiments of this application realizes the visualization processing of complex networks, that is, the layout of complex network graphs. For example, the WebGL-based network graph processing method according to the embodiments of this application can be implemented as a JavaScript framework for calculating the layout of large-scale complex network graphs on the Web platform. Moreover, a force-directed graph layout algorithm is computed using GLSL on WebGL. Here, GLSL (OpenGL Shading Language) is a language used for shading programming in OpenGL, a high-level procedural language with C / C++ style. In the entire image processing, image distribution, and shading rendering, the image layout part uses a general algorithm of force-directed graphs (force-directed graphs are a relatively common network graph layout method), and the shading part uses OpenGL.

[0059] Effect verification

[0060] The effectiveness verification of the WebGL-based network graph processing method according to the embodiments of this application is performed relative to Sigma.js, a popular JavaScript library specifically designed for graphics visualization. Unlike Sigma.js, which does not use the GPU to compute layouts, the same graph layout algorithm and configuration are used for comparison during the verification.

[0061] By changing the layout configuration, the graph data is sent as a Sigma object sigInst, and the iteration count is configured in the configuration file. Example code is as follows:

[0062]

[0063] Start layout algorithm:

[0064]

[0065]

[0066] The dataset used for validation is the arXiv author collaboration network, which is sampled onto graphs with different numbers of edges for testing.

[0067] The verification was conducted on a laptop with a dual-core 1.6GHz CPU and an Intel 6000 graphics processor. The browser used was Google Chrome (64-bit), and each experiment was run five times, with the average value taken.

[0068] First, test the speedup ratio on graphs with different numbers of edges to see if it can be extended to larger graphs. The results are as follows... Figure 6 As shown, the results are generated after 100 iterations. The graphs show that, according to embodiments of this application, medium grayscale lines take less time than dark grayscale lines, especially when the graph is large. For a graph with 1000 edges, 100 iterations of the method according to embodiments of this application take only 106 milliseconds, equivalent to 1.1 milliseconds / frame. For a larger graph with 23000 edges, 100 iterations take 1 second, or 12 ms / frame. Light grayscale lines represent the speedup of the method according to embodiments of this application relative to the baseline. The speedup increases as the graph becomes larger because it can utilize more concurrency on large graphs. On a graph with 10000 edges, it can achieve a speedup of 489 times.

[0069] In addition, the speedup was tested at different numbers of iterations, and the results are as follows: Figure 7 As shown, the main difference lies in the higher the number of iterations, the greater the speedup ratio for segmentation. This is primarily because, within a segment, the overhead of initialization before each iteration is significant compared to the workload of each iteration. During initialization, the first texture is constructed using the graphics data, and the data is sent from the CPU to the GPU. The layouts generated by these tests are as follows: Figure 8 As shown.

[0070] here, Figure 6 The illustration shows the speedup ratio of the WebGL-based network graph processing method and the conventional method under different edge conditions according to embodiments of this application. Figure 7The illustration shows the speedup ratio of the WebGL-based network graph processing method and the conventional method at different iteration numbers according to embodiments of this application. Figure 8 The illustrations show network graph layouts with different numbers of edges in 100 iterations of the WebGL-based network graph processing method according to embodiments of this application, as well as network graph layouts with different iteration counts under fixed node and edge count conditions.

[0071] In addition, several other optimizations were attempted during development, but none were helpful. The applicant had previously suggested that sorting the data by the number of edges at each vertex before copying it to the input array would reduce the chance of execution when applying the same number of divergent forces on the same boundaries. However, this proved to be slower. The conclusion was that the reasons were twofold. The first reason was that GPU-side execution time was primarily spent applying repulsive forces, so reducing divergent execution during the attraction process did not produce a significant speedup, reflecting Amdahl's Law. The second reason was that the overhead of sorting and maintaining the additional mapping between CPU-side and GPU-side node IDs slowed down the JavaScript code.

[0072] Exemplary device

[0073] Figure 9 The illustration shows a block diagram of a WebGL-based network graph processing apparatus according to an embodiment of the present application.

[0074] like Figure 9 As shown, a WebGL-based network graph processing apparatus 300 according to an embodiment of this application includes: an object creation unit 310, configured to create an initial object based on WebGL, the initial object including multiple nodes and multiple edges connecting at least a portion of the multiple nodes; a data acquisition unit 320, configured to acquire initial input data of the multiple nodes and initial input data of the multiple edges, the initial input data of the multiple nodes including the coordinates of the multiple nodes; an iterative update unit 330, configured to iteratively update the coordinates of each of the multiple nodes; and a network graph output unit 340, configured to output the processed network graph based on the update result of the coordinates of each node.

[0075] In one example, in the WebGL-based network graph processing apparatus 300 described above, the object creation unit 310 is used to: acquire a canvas; acquire a WebGL drawing context; initialize a shader; activate a shader; and create an initial object.

[0076] In one example, in the WebGL-based network graph processing apparatus 300 described above, the shaders include vertex shaders and fragment shaders.

[0077] In one example, in the WebGL-based network graph processing apparatus 300 described above, the object creation unit 310 is further used for: scene transformation; and scene rendering.

[0078] In one example, in the WebGL-based network graph processing device 300 described above, the data acquisition unit 320 is configured to: construct an input pixel array using the initial input data of the plurality of nodes and the initial input data of the plurality of edges, wherein the input pixel array contains: data for each pixel consisting of four 32-bit floating-point data representing R, G, B, and A; data for each pixel representing data for one node; edge data for each node stored sequentially with the node in the input pixel array; the node data including the X and Y coordinates of the node, the offset of the node's edge in the input pixel array, and the number of edges of the node; and the edge data including the ID of the target node.

[0079] In one example, in the WebGL-based network graph processing apparatus 300 described above, the iterative update unit 330 is configured to: for each node, apply a repulsive force from all nodes in the plurality of nodes to the node; read the target node at the edge of the node and apply an attractive force from the node to the target node; and apply gravity to the node to obtain new X and Y coordinates of the node.

[0080] In one example, in the WebGL-based network graph processing apparatus 300 described above, the network graph output unit 340 is used to generate an updated texture image based on the updated coordinates of each node as the processed network graph output.

[0081] In one example, in the WebGL-based network graph processing apparatus 300 described above, the network graph output unit 340 is configured to: after each iteration, use the output of the previous iteration calculated for the node as input by the WebGL-based shader, generate output pixels based on the updated coordinates of each node; and generate a texture image after each iteration based on the output pixels of the plurality of nodes.

[0082] Here, those skilled in the art will understand that the specific functions and operations of each unit and module in the WebGL-based network graph processing device 300 described above have been referenced above. Figures 1 to 8 The WebGL-based network graph processing method is described in detail here, and therefore, its repeated description will be omitted.

[0083] As described above, the WebGL-based network graph processing apparatus 300 according to the embodiments of this application can be implemented in various terminal devices, such as servers for processing network graphs. In one example, the WebGL-based network graph processing apparatus 300 according to the embodiments of this application can be integrated into a terminal device as a software module and / or a hardware module. For example, the WebGL-based network graph processing apparatus 300 can be a software module in the operating system of the terminal device, or it can be an application developed for the terminal device; of course, the WebGL-based network graph processing apparatus 300 can also be one of many hardware modules of the terminal device.

[0084] Alternatively, in another example, the WebGL-based network graph processing device 300 and the terminal device can also be separate devices, and the WebGL-based network graph processing device 300 can be connected to the terminal device via wired and / or wireless networks, and transmit interactive information in accordance with an agreed data format.

[0085] Exemplary electronic devices

[0086] Below, for reference Figure 10 This describes an electronic device according to embodiments of the present application.

[0087] Figure 10 A block diagram of an electronic device according to an embodiment of this application is illustrated.

[0088] like Figure 10 As shown, the electronic device 10 includes one or more processors 11 and memory 12.

[0089] The processor 11 may be a central processing unit (CPU) or other form of processing unit with data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device 10 to perform desired functions.

[0090] The memory 12 may include one or more computer program products, which may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, random access memory (RAM) and / or cache memory. The non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium, and the processor 11 may execute the program instructions to implement the WebGL-based network graph processing methods of the various embodiments of this application described above, and / or other desired functions. Various content such as node data and edge data may also be stored in the computer-readable storage medium.

[0091] In one example, the electronic device 10 may also include an input device 13 and an output device 14, which are interconnected via a bus system and / or other forms of connection mechanism (not shown).

[0092] The input device 13 may include, for example, a keyboard, a mouse, etc.

[0093] The output device 14 can output various information to the outside, including generated and rendered network diagrams. The output device 14 may include, for example, a display, a speaker, a printer, and a communication network and its connected remote output devices.

[0094] Of course, for the sake of simplicity, Figure 10 Only some of the components of the electronic device 10 relevant to this application are shown in this illustration; components such as buses, input / output interfaces, etc., are omitted. In addition, the electronic device 10 may include any other suitable components depending on the specific application.

[0095] Exemplary computer program products and computer-readable storage media

[0096] In addition to the methods and devices described above, embodiments of this application may also be computer program products, which include computer program instructions that, when executed by a processor, cause the processor to perform the steps in the WebGL-based network graph processing methods according to various embodiments of this application as described in the "Exemplary Methods" section of this specification.

[0097] The computer program product can be written in any combination of one or more programming languages ​​to perform the operations of the embodiments of this application. The programming languages ​​include object-oriented programming languages ​​such as Java and C++, as well as conventional procedural programming languages ​​such as C or similar languages. The program code can be executed entirely on the user's computing device, partially on the user's computing device, as a standalone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0098] Furthermore, embodiments of this application may also be computer-readable storage media storing computer program instructions thereon, which, when executed by a processor, cause the processor to perform the steps in the WebGL-based network graph processing methods according to various embodiments of this application as described in the "Exemplary Methods" section above.

[0099] The computer-readable storage medium may be any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may, for example, include, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatuses, or devices, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: electrical connections having one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0100] The basic principles of this application have been described above with reference to specific embodiments. However, it should be noted that the advantages, benefits, and effects mentioned in this application are merely examples and not limitations, and should not be considered as essential features of each embodiment of this application. Furthermore, the specific details disclosed above are for illustrative and facilitative purposes only, and are not limitations. These details do not limit the application to the necessity of employing the aforementioned specific details for implementation.

[0101] The block diagrams of devices, apparatuses, devices, and systems involved in this application are merely illustrative examples and are not intended to require or imply that they must be connected, arranged, or configured in the manner shown in the block diagrams. As those skilled in the art will recognize, these devices, apparatuses, devices, and systems can be connected, arranged, and configured in any manner. Words such as “comprising,” “including,” “having,” etc., are open-ended terms meaning “including but not limited to,” and are used interchangeably with them. The terms “or” and “and” as used herein refer to the terms “and / or,” and are used interchangeably with them unless the context clearly indicates otherwise. The term “such as” as used herein refers to the phrase “such as but not limited to,” and is used interchangeably with it.

[0102] It should also be noted that in the apparatus, equipment, and methods of this application, the components or steps can be disassembled and / or recombined. These disassemblies and / or recombinations should be considered as equivalent solutions of this application.

[0103] The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use this application. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of this application. Therefore, this application is not intended to be limited to the aspects shown herein, but rather to be accorded the widest scope consistent with the principles and novel features disclosed herein.

[0104] The above description has been given for purposes of illustration and description. Furthermore, this description is not intended to limit the embodiments of this application to the forms disclosed herein. Although numerous exemplary aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, alterations, additions, and sub-combinations thereof.

Claims

1. A WebGL-based network graph processing method, comprising: An initial object is created based on WebGL, the initial object comprising multiple nodes and multiple edges connecting at least a portion of the multiple nodes; Obtain initial input data for the plurality of nodes and initial input data for the plurality of edges, wherein the initial input data for the plurality of nodes includes the coordinates of the plurality of nodes; Iteratively update the coordinates of each of the multiple nodes; as well as The updated network graph is output based on the coordinates of each node. The creation of the initial object based on WebGL includes: Get the canvas; get the WebGL drawing context; access WebGL core functions through the context object to initialize the shader; activate the shader; and create the initial object; Specifically, the initial input data of the plurality of nodes and the initial input data of the plurality of edges are obtained; An input pixel array is constructed using the initial input data of the plurality of nodes and the initial input data of the plurality of edges. Wherein, the input pixel array contains: The input pixel array contains data for each pixel consisting of four 32-bit floating-point numbers representing R, G, B, and A. Each pixel stores the data of one node; The edge data of each node is stored sequentially with the node in the input pixel array; The node data includes the node's X and Y coordinates, the offset of the node's edges in the input pixel array, and the number of edges of the node; and The edge data includes the ID of the target node; The iterative update of the coordinates of each of the plurality of nodes includes: For each of the nodes, a repulsive force is applied from all nodes in the plurality of nodes toward the node; Read the target node at the edge of the node, and apply an attraction from the node to the target node; and Gravity is applied to the node to obtain its new X and Y coordinates; The processed network graph, output based on the update results of the coordinates of each node, includes: The process includes generating an updated texture image based on the updated coordinates of each node as the output of the processed network graph; this includes, after each iteration, using a WebGL-based shader as input, taking the output of the previous iteration corresponding to the node as input, generating output pixels based on the updated coordinates of each node; and generating the texture image after each iteration based on the output pixels of the plurality of nodes.

2. The WebGL-based network graph processing method as described in claim 1, wherein, The shaders include vertex shaders and fragment shaders.

3. The WebGL-based network graph processing method as described in claim 1, wherein, Creating an initial object based on WebGL further includes: Scene transformation; and Scene rendering.

4. A WebGL-based network graph processing apparatus, comprising: An object creation unit is used to create an initial object based on WebGL, the initial object including multiple nodes and multiple edges connecting at least a portion of the multiple nodes; A data acquisition unit is used to acquire initial input data of the plurality of nodes and initial input data of the plurality of edges, wherein the initial input data of the plurality of nodes includes the coordinates of the plurality of nodes; An iterative update unit is used to iteratively update the coordinates of each of the plurality of nodes; as well as The network graph output unit is used to output the processed network graph based on the update result of the coordinates of each node; The creation of the initial object based on WebGL includes: Get the canvas; get the WebGL drawing context; access WebGL core functions through the context object to initialize the shader; activate the shader; and create the initial object; The data acquisition unit is further configured to: construct an input pixel array using the initial input data of the plurality of nodes and the initial input data of the plurality of edges, wherein the input pixel array contains: data for each pixel consisting of four 32-bit floating-point data representing R, G, B, and A; data for each pixel representing data for one node; edge data for each node stored sequentially with the node in the input pixel array; the node data including the X and Y coordinates of the node, the offset of the node's edge in the input pixel array, and the number of edges of the node; and the edge data including the ID of the target node; The iterative update of the coordinates of each of the plurality of nodes includes: For each of the nodes, a repulsive force is applied from all nodes in the plurality of nodes toward the node; Read the target node at the edge of the node, and apply an attraction from the node to the target node; and Gravity is applied to the node to obtain its new X and Y coordinates; The processed network graph, output based on the update results of the coordinates of each node, includes: The process includes generating an updated texture image based on the updated coordinates of each node as the output of the processed network graph; this includes, after each iteration, using a WebGL-based shader as input, taking the output of the previous iteration corresponding to the node as input, generating output pixels based on the updated coordinates of each node; and generating the texture image after each iteration based on the output pixels of the plurality of nodes.

5. An electronic device, comprising: processor; as well as A memory storing computer program instructions that, when executed by the processor, cause the processor to perform the WebGL-based network graph processing method as described in any one of claims 1-3.

Images