CN114357340A

CN114357340A - WebGL-based network graph processing method and device and electronic equipment

Info

Publication number: CN114357340A
Application number: CN202011205213.XA
Authority: CN
Inventors: 张晓军; 许晨飞
Original assignee: Sino Credit Information Technology Beijing Co ltd
Current assignee: Sino Credit Information Technology Beijing Co ltd
Priority date: 2020-11-02
Filing date: 2020-11-02
Publication date: 2022-04-15

Abstract

A WebGL-based network graph processing method, device and electronic equipment are disclosed. The WebGL-based network graph processing method comprises the following steps: creating an initial object based on WebGL, the initial object comprising a plurality of nodes and a plurality of edges connecting at least a portion of the plurality of nodes; acquiring 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 comprises coordinates of the plurality of nodes; iteratively updating coordinates of each of the plurality of nodes; and outputting the processed network graph based on the updating result of the coordinates of each node. Therefore, the high-performance network diagram layout on the Web browser can be realized by combining the WebGL technology on the basis of the traditional diagram layout algorithm.

Description

WebGL-based network graph processing method and device and electronic equipment

Technical Field

The present application relates to the field of web graph processing, and more particularly, to a web graph processing method, apparatus and electronic device based on WebGL.

Background

In recent years, with the development of informatization, network graphics play an increasingly important role in real life. Network diagrams in real life are often characterized by large scale, complex relationships and the like. To correctly interpret and understand the complex information contained in the network, it is often necessary to go through the processes from acquiring information to extracting useful information. How to intuitively and efficiently analyze and research the complex data for the useful information obtained by extraction becomes a problem of great attention.

Complex network visualization is an important tool in complex network research. With the advent of the web2.0 era and the big data era, the complex networks as research objects are becoming larger and larger, and people are also increasingly required to accurately express and understand the large-scale data and further explore and mine effective information from the large-scale data. The traditional data expression mode can no longer meet the requirements of people. Therefore, visualizing complex network data is one of the main ways for people to understand and study complex network data.

The graph layout is one of important contents in the field of information visualization, and the effective graph layout can assist people to know the structure of network data more intuitively and clearly and help people to find problems, so that people can further and interactively mine potential information in the graph layout. The graph layout algorithm is widely applied to the fields of social networks, knowledge graphs, deep learning and the like.

However, with the massive increase of complex network data, new challenges are provided for the layout effect and the operation speed of a complex network visualization layout algorithm. Existing graph layout algorithms are limited in their temporal or spatial complexity, making it increasingly difficult to generate satisfactory layouts.

It is therefore desirable to provide an improved network graph processing method for generating a network graph representing a complex network.

Disclosure of Invention

The present application is proposed to solve the above-mentioned technical problems. Embodiments of the present application provide a WebGL-based network graph processing method, apparatus, and electronic device, which combine WebGL technology on the basis of a traditional graph layout algorithm to realize high-performance network graph layout on a Web browser.

According to an aspect of the present application, there is provided a WebGL-based web graph processing method, including: creating an initial object based on WebGL, the initial object comprising a plurality of nodes and a plurality of edges connecting at least a portion of the plurality of nodes; acquiring 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 comprises coordinates of the plurality of nodes; iteratively updating coordinates of each of the plurality of nodes; and outputting the processed network graph based on the updating result of the coordinates of each node.

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

In the WebGL-based network graph processing method, the shader includes a vertex shader and a fragment shader.

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

In the above WebGL-based network graph processing method, acquiring the initial input data of the plurality of nodes and the initial input data of the plurality of edges includes: forming an input pixel array by using the initial input data of the plurality of nodes and the initial input data of the plurality of edges, wherein in the input pixel array: the data of each pixel contained in the input pixel array is 4 32-bit floating point data representing R, G, B and A; the data of each pixel stores data of one node; storing the edge data of each node and the node sequence in the input pixel array; the data of the node comprises X and Y coordinates of the node, an offset of an edge of the node in the input pixel array and the number of the edges of the node; and the data of the edge comprises the ID of the target node.

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

In the above WebGL-based network graph processing method, outputting the processed network graph based on the update result of the coordinate of each node includes: and generating an updated texture image based on the updating result of the coordinates of each node to be output as the processed network graph.

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 to output as a processed network graph includes: after each iteration, using the output of the previous iteration calculation corresponding to the node as input by a WebGL-based shader, and generating an output pixel based on the updating result of the coordinate of each node; and generating a texture image after each iteration based on the output pixels of the plurality of nodes.

According to another aspect of the present application, there is provided a WebGL-based web graph processing apparatus including: an object creating unit configured to create an initial object based on WebGL, the initial object including a plurality of nodes and a plurality of edges connecting at least a part of the plurality of nodes; a data acquisition unit configured to acquire 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 coordinates of the plurality of nodes; an iterative update unit configured to iteratively update coordinates of each of the plurality of nodes; and a network graph output unit for outputting the processed network graph based on the update result of the coordinates of each node.

According to still another aspect of the present application, there is provided an electronic apparatus including: a processor; and a memory in which computer program instructions are stored, which, when executed by the processor, cause the processor to perform the WebGL-based web graph processing method as described above.

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

The WebGL-based network graph processing method, the WebGL-based network graph processing device and the electronic equipment realize high-performance network graph layout on a Web browser by combining a WebGL technology on the basis of a traditional graph layout algorithm.

Drawings

The above and other objects, features and advantages of the present application will become more apparent by describing in more detail embodiments of the present application with reference to the attached drawings. The accompanying drawings are included to provide a further understanding of the embodiments of the application and are incorporated in and constitute a part of this specification, illustrate embodiments of the application and together with the description serve to explain the principles of the application. In the drawings, like reference numbers generally represent like parts or steps.

Fig. 1 illustrates a flowchart of a WebGL-based network graph processing method according to an embodiment of the present application.

Fig. 2 is a schematic diagram illustrating an object rendering process in a WebGL-based web graph processing method according to an embodiment of the present application.

Fig. 3 is a schematic diagram illustrating memory distribution in a WebGL-based network graph processing method according to an embodiment of the present application.

Fig. 4 is a schematic diagram illustrating a basic principle of a web graph layout algorithm in a WebGL-based web graph processing method according to an embodiment of the present application.

Fig. 5 is a schematic diagram illustrating input and output of a shader in a WebGL-based network graph processing method according to an embodiment of the present application.

Fig. 6 illustrates acceleration ratio diagrams of the WebGL-based network graph processing method and the conventional method in case of different sides according to an embodiment of the present application.

Fig. 7 illustrates acceleration ratio diagrams of the WebGL-based network graph processing method and the conventional method at different iteration numbers according to an embodiment of the present application.

Fig. 8 illustrates a network graph layout diagram of different numbers of edges iterated for 100 times in a WebGL-based network graph processing method according to an embodiment of the present application, and a network graph layout diagram of different numbers of iterations in a case of a fixed node and number of edges.

Fig. 9 illustrates a block diagram of a WebGL-based network graph processing apparatus according to an embodiment of the present application.

FIG. 10 illustrates a block diagram of an electronic device in accordance with an embodiment of the present application.

Detailed Description

Hereinafter, example embodiments according to the present application will be described in detail with reference to the accompanying drawings. It should be understood that the described embodiments are only some embodiments of the present application and not all embodiments of the present application, and that the present application is not limited by the example embodiments described herein.

Exemplary method

As shown in fig. 1, a WebGL-based web graph processing method according to an embodiment of the present application includes the following steps.

Step S110, 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.

Here, the WebGL (Web Graphics Library) relies on a shader drawing mechanism, and provides a flexible and powerful method for drawing a two-dimensional or three-dimensional graphic and various rendering effects through a shader, such as the effect of illumination and a change in a view angle on a scene. The shader mainly comprises a vertex shader and a fragment shader. Vertex shaders are used to describe vertex properties such as position, color, etc., where a vertex is a point in two or three dimensional space. The fragment shader performs fragment-by-fragment processing procedures, such as lighting, view angle, and the like. In a specific implementation, the shader is embedded in the JavaScript file in a string manner, and related information of the shader is read by the JavaScript file and then stored in the WebGL system for calling.

Thus, WebGL is a renderer library, and in the embodiment of the present application, the web graph layout is generally calculated through an interface of the WebGL library, for example, the renderer library may be based on sigma. Of course, the original framework of WebGL does not solve the computation problem of the web graph layout well, and the library needs to be modified to adapt the graph layout algorithm, and for example, to further adapt the running of the graph layout algorithm on the GPU.

The graph layout algorithm takes the coordinates and edges of a series of nodes as input, and iteratively updates the position of each node. Typically, these algorithms perform some iterations or until convergence. Accordingly, the operating principle of WebGL is: in each iteration, the shader acquires an input pixel array, performs computations, and writes to an output pixel array. Therefore, in order to complete the computation of the graph layout algorithm, a proper data structure and workflow need to be designed under the computation framework of the WebGL.

In the embodiment of the present application, in order to create an initial object including a plurality of nodes and a plurality of edges through WebGL, a program execution flow of WebGL is as follows: firstly, obtaining a Canvas, then obtaining a WebGL context, and accessing a WebGL core function through a context object. Here, the context object refers to elements required for drawing, such as data of nodes and connecting lines of a network graph, data of a canvas size, and the like, and the content to be rendered is obtained by executing the WebGL core function through the context as an input of the WebGL core function. The shader is then initialized, i.e., after the shader model is ready, the contents of each node can be obtained and the shader is initialized. In a specific implementation, the shader is written in an OpenGLES shading language, and a part of the shader of each node needs to be compiled, and the compiled part of the shader of each node is returned to a caller, and then the part is linked to the whole shader, so that the whole shader is activated. After the shader is ready, objects can be created, any object consisting of points and lines, i.e., nodes and edges connecting the nodes. When creating an object, a vertex array and an index array are created for each node and edge and stored in a particular format. In addition, after the object is created, a camera or the like may be provided to transform a scene, render a scene, or the like.

Therefore, in the WebGL-based web graph processing method according to the embodiment of the present application, creating the initial object based on the WebGL includes: obtaining a canvas; acquiring a WebGL drawing context; initializing a shader; activating the shader; and, creating an initial object.

Furthermore, in the above WebGL-based network graph processing method, creating an initial object based on WebGL further includes: changing scenes; and rendering the scene.

Therefore, fig. 2 illustrates a schematic diagram of an object rendering process in a WebGL-based web graph processing method according to an embodiment of the present application. As shown in fig. 2, an object rendering process according to an embodiment of the present application includes: s210, obtaining a canvas; s220, acquiring a WebGL drawing context; s230, initializing a shader; s240, activating a shader; s250, creating an initial object; s260, scene change; and S270, rendering the scene.

Step S120, acquiring initial input data of the plurality of nodes and initial input data of the plurality of edges, where the initial input data of the plurality of nodes includes coordinates of the plurality of nodes.

As described above, in order to complete the computation of the graph layout algorithm, a suitable data structure needs to be designed under the computation framework based on WebGL, for example, the running of the graph layout algorithm on the GPU needs to be adapted.

Therefore, in the embodiment of the present application, the input pixel array of the shader is constructed according to the memory distribution as shown in fig. 3. Here, fig. 3 illustrates a schematic diagram of memory distribution in a WebGL-based network graph processing method according to an embodiment of the present application.

As shown in FIG. 3, each box in the array is a pixel containing four 32-bit floating points representing r, g, b, and a. The data structure of the node is packed and stored at the beginning of the input array, with each pixel storing the data of one node. The 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 node and each pixel of the node stores X, Y coordinates, the offset of the node 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.

That is, in the WebGL-based network graph processing method according to the embodiment of the present application, acquiring the initial input data of the plurality of nodes and the initial input data of the plurality of edges includes: forming an input pixel array by using the initial input data of the plurality of nodes and the initial input data of the plurality of edges, wherein in the input pixel array: the data of each pixel contained in the input pixel array is 4 32-bit floating point data representing R, G, B and A; the data of each pixel stores data of one node; storing the edge data of each node and the node sequence in the input pixel array; the data of the node comprises X and Y coordinates of the node, an offset of an edge of the node in the input pixel array and the number of the edges of the node; and the data of the edge comprises the ID of the target node.

Such a memory layout may have the following advantages. First, most memory accesses are sequential reads with little divergent execution. Since the data structures of all other nodes can be accessed in the same order when calculating the repulsive force of different nodes. When calculating the attraction of a node, the edge array of the adjacent node is stored in the array, where the sequential reading is mostly performed; random read-only occurs when adjacent coordinates need to be accessed, but this is less likely than sequential reading. Since the computation is memory-constrained, the design takes advantage of data locality, thereby ensuring reasonably good execution efficiency.

That is, since in the graph layout algorithm, the computation between nodes is independent in each iteration, most of the memory reading can be sequentially read by optimizing the memory layout, which makes the WebGL-based network graph processing method according to the embodiment of the present application well suited for the SPMD program running on the GPU. Here, the SPMD program is a technology that implements parallelism, tasks are independent and run on multiple processors simultaneously, and results are obtained faster with different inputs. Those skilled in the art will appreciate that SPMD is a common parallel programming style.

Step S130, iteratively updating coordinates of each node of the plurality of nodes. In the embodiment of the present application, a general graph layout algorithm is employed, as shown in fig. 3. Specifically, in each iteration, three forces of repulsion, attraction and gravity are applied to each node, and then X, Y coordinates are updated separately. Where repulsive forces are applied to each pair of nodes to prevent them from coming too close, attractive forces are applied on each side to pull the source and target nodes toward each other, and gravity pulls each node toward the origin, thereby preventing the clusters from being too far apart. This calculation is memory-constrained because the most time consuming calculation is to apply a repulsive force to each node, which performs 10 floating point arithmetic operations on 4 32-bit reads. Here, fig. 4 illustrates a schematic diagram of a basic principle of a web map layout algorithm in the WebGL-based web map processing method according to an embodiment of the present application.

In the present embodiment, the shader first applies a repulsive force to a node in the pixel array from all other nodes by iterating through the nodes. The destination of the edge of the node, i.e., the target node, is then read and an attractive force is applied from the node to the target node. Gravity is then applied to the node and new X, Y coordinates are calculated.

Therefore, in the WebGL-based network graph processing method according to the embodiment of the present application, iteratively updating the coordinates of each of the plurality of nodes includes: for said each node, applying a repulsive force to said node from all of said plurality of nodes; reading a destination node of an edge of the node and applying an attractive force from the node to the destination node; and applying gravity to the node to obtain new X and Y coordinates of the node.

Step S140, outputting the processed network map based on the update result of the coordinates of each node. As described above, when an initial object is created, the object includes nodes and edges, so that an input texture is drawn by a shader based on data of the initial object. After updating the X and Y coordinates of each node, the shader draws an output texture based on the updated data, as shown in FIG. 5. Here, fig. 5 illustrates a schematic diagram of input and output of a shader in the WebGL-based network graph processing method according to an embodiment of the present application.

Therefore, in the WebGL-based network graph processing method according to the embodiment of the present application, outputting the processed network graph based on the update result of the coordinate of each node includes: and generating an updated texture image based on the updating result of the coordinates of each node to be output as the processed network graph.

Further, 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 to output as a processed network graph includes: after each iteration, using the output of the previous iteration calculation corresponding to the node as input by a WebGL-based shader, and generating an output pixel based on the updating result of the coordinate of each node; and generating a texture image after each iteration based on the output pixels of the plurality of nodes.

Therefore, by the WebGL-based network graph processing method, high-performance network layout can be realized on a Web browser by combining the WebGL technology on the basis of the traditional graph layout algorithm.

In addition, the WebGL-based network graph processing method according to the embodiment of the application realizes visualization processing of a complex network, namely layout of a network graph of the complex network. For example, the WebGL-based Web graph processing method according to the embodiment of the present application can be implemented as a JavaScript framework for calculating the layout of a large-scale complex Web graph on a Web platform. And, a general calculation is performed on a force directed graph layout algorithm using GLSL on WebGL. Here, GLSL (OpenGL Shading Language) is a Language for Shading programming in OpenGL, and is a high-level procedural Language having a C/C + + style. In the whole image processing, the image distribution and the coloring rendering, the image layout part uses a general algorithm of a force directed graph (the force directed graph is a relatively common network graph layout mode), and the coloring part uses OpenGL.

Effect verification

The effect verification of the WebGL-based network graph processing method according to the embodiment of the application is performed in comparison with sigma. Js does not use the GPU to compute the layout, and in verification, the same graph layout algorithm and configuration are used for comparison.

By changing the configuration of the layout, sending the data of the graph as a Sigma object sigInst, and configuring the number of iterations in a configuration file, example codes are as follows:

starting the layout algorithm:

the data set used for validation was an arXiv author collaboration network, which was sampled into graphs with different numbers of edges for testing.

The test was performed on a notebook with a dual core 1.6GHz GPU Intel 6000 graphics processor as the CPU. The browser was a Google Chrome (64 bits) and each experiment was run five times and averaged.

The acceleration ratio is first tested on graphs with different numbers of edges to see if it can be extended to large graphs. The results are shown in fig. 6, which results were generated after 100 iterations. The graphs show that medium gray lines according to embodiments of the present application take less time than dark gray lines, especially when the graph is large. For a graph with 1000 edges, 100 iterations of the method according to an embodiment of the present application only require 106 milliseconds, corresponding to 1.1 milliseconds/frame. Whereas for a larger pattern with 23000 sides, 100 iterations require 1 second, 12 ms/frame. The lines in light gray represent the acceleration of the method according to an embodiment of the application relative to the baseline. As the map becomes larger, the acceleration ratio will increase because it can take advantage of more concurrency on a larger map. On a graph with 10000 sides, it can achieve 489 times acceleration.

In addition, acceleration under different iteration times is also tested, and the result is shown in fig. 7, which mainly shows that the larger the iteration times is, the larger the subsection acceleration ratio is. This is mainly because, in paragraphs, the overhead of pre-iteration initialization is significant compared to the workload per iteration. During initialization, a first texture is constructed using the data of the graphics and the data is sent from the CPU to the GPU. The layout generated by these tests is shown in fig. 8.

Here, fig. 6 illustrates an acceleration ratio diagram of the WebGL-based network map processing method and the conventional method in the case of different sides according to an embodiment of the present application. Fig. 7 illustrates acceleration ratio diagrams of the WebGL-based network graph processing method and the conventional method at different iteration numbers according to an embodiment of the present application. Fig. 8 illustrates a network graph layout diagram of different numbers of edges iterated for 100 times in a WebGL-based network graph processing method according to an embodiment of the present application, and a network graph layout diagram of different numbers of iterations in a case of a fixed node and number of edges.

In addition, some other optimizations were attempted during the development process, but none of the results helped. Applicants have recognized that it is preferable to sort the data by the number of edges of the vertices before copying it to the input array. Thus, the chance of execution is better reduced when the same amount of divergent force is applied on the same boundary. But has proven to be slow. The reason was concluded to be twofold. The first reason is that the execution time on the GPU side is mainly spent on applying repulsive force, so reducing divergent execution in applying attractive force does not produce significant acceleration, which reflects Amdahl's law. Another reason is that the Javascript code is slowed down by the overhead of ordering and maintaining additional mappings between CPU end node ids and GPU end node ids.

Exemplary devices

As shown in fig. 9, the WebGL-based network map processing apparatus 300 according to an embodiment of the present application includes: an object creating unit 310 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 part of the plurality of nodes; a data obtaining unit 320 configured to obtain 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 coordinates of the plurality of nodes; an iterative updating unit 330 for iteratively updating coordinates of each of the plurality of nodes; and a network map output unit 340 for outputting the processed network map based on the updated result of the coordinates of each node.

In an example, in the WebGL-based network graph processing apparatus 300, the object creating unit 310 is configured to: obtaining a canvas; acquiring a WebGL drawing context; initializing a shader; activating the shader; and, creating an initial object.

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

In an example, in the WebGL-based network graph processing apparatus 300, the object creating unit 310 is further configured to: changing scenes; and rendering the scene.

In an example, in the WebGL-based network graph processing apparatus 300, the data obtaining unit 320 is configured to: forming an input pixel array by using the initial input data of the plurality of nodes and the initial input data of the plurality of edges, wherein in the input pixel array: the data of each pixel contained in the input pixel array is 4 32-bit floating point data representing R, G, B and A; the data of each pixel stores data of one node; storing the edge data of each node and the node sequence in the input pixel array; the data of the node comprises X and Y coordinates of the node, an offset of an edge of the node in the input pixel array and the number of the edges of the node; and the data of the edge comprises the ID of the target node.

In an example, in the WebGL-based network graph processing apparatus 300, the iterative updating unit 330 is configured to: for said each node, applying a repulsive force to said node from all of said plurality of nodes; reading a destination node of an edge of the node and applying an attractive force from the node to the destination node; and applying gravity to the node to obtain new X and Y coordinates of the node.

In an example, in the WebGL-based network graph processing apparatus 300, the network graph output unit 340 is configured to: and generating an updated texture image based on the updating result of the coordinates of each node to be output as the processed network graph.

In an example, in the WebGL-based network graph processing apparatus 300, the network graph output unit 340 is configured to: after each iteration, using the output of the previous iteration calculation corresponding to the node as input by a WebGL-based shader, and generating an output pixel based on the updating result of the coordinate of each node; and generating a texture image after each iteration based on the output pixels of the plurality of nodes.

Here, it can be understood by those skilled in the art that the specific functions and operations of the respective units and modules in the above-described WebGL-based network map processing apparatus 300 have been described in detail in the above description of the WebGL-based network map processing method with reference to fig. 1 to 8, and thus, a repetitive description thereof will be omitted.

As described above, the WebGL-based network graph processing apparatus 300 according to the embodiment of the present application may be implemented in various terminal devices, such as a server for processing a network graph, and the like. In one example, the WebGL-based network graph processing apparatus 300 according to the embodiment of the present application may be integrated into a terminal device as one software module and/or hardware module. For example, the WebGL-based network map processing apparatus 300 may be a software module in an operating system of the terminal device, or may be an application developed for the terminal device; of course, the WebGL-based network graph processing apparatus 300 can also be one of numerous hardware modules of the terminal device.

Alternatively, in another example, the WebGL-based network graph processing apparatus 300 and the terminal device may be separate devices, and the WebGL-based network graph processing apparatus 300 may be connected to the terminal device through a wired and/or wireless network and transmit the interaction information according to the agreed data format.

Exemplary electronic device

Next, an electronic apparatus according to an embodiment of the present application is described with reference to fig. 10.

As shown in fig. 10, the electronic device 10 includes one or more processors 11 and memory 12.

The processor 11 may be a Central Processing Unit (CPU) or other form of processing unit having data processing capabilities and/or instruction execution capabilities, and may control other components in the electronic device 10 to perform desired functions.

Memory 12 may include one or more computer program products that 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), cache memory (cache), and/or the like. 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 executed by the processor 11 to implement the WebGL-based web graph processing method of the various embodiments of the present application described above and/or other desired functions. Various contents such as node data, edge data, etc. may also be stored in the computer-readable storage medium.

In one example, the electronic device 10 may further include: an input device 13 and an output device 14, which are interconnected by a bus system and/or other form of connection mechanism (not shown).

The input device 13 may include, for example, a keyboard, a mouse, and the like.

The output device 14 may output various information including a generated and rendered network map and the like to the outside. The output devices 14 may include, for example, a display, speakers, a printer, and a communication network and its connected remote output devices, among others.

Of course, for simplicity, only some of the components of the electronic device 10 relevant to the present application are shown in fig. 10, and components such as buses, input/output interfaces, and the like are omitted. In addition, the electronic device 10 may include any other suitable components depending on the particular application.

Exemplary computer program product and computer-readable storage Medium

In addition to the methods and apparatus described above, embodiments of the present application may also be a computer program product comprising computer program instructions that, when executed by a processor, cause the processor to perform the steps in the WebGL-based web graph processing method according to various embodiments of the present application described in the "exemplary methods" section above of this specification.

The computer program product may be written with program code for performing the operations of embodiments of the present application in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server.

Furthermore, embodiments of the present application may also be a computer-readable storage medium having stored thereon computer program instructions that, when executed by a processor, cause the processor to perform the steps in the WebGL-based network graph processing method according to various embodiments of the present application described in the "exemplary methods" section above in this specification.

The computer-readable storage medium may take any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may include, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The foregoing describes the general principles of the present application in conjunction with specific embodiments, however, it is noted that the advantages, effects, etc. mentioned in the present application are merely examples and are not limiting, and they should not be considered essential to the various embodiments of the present application. Furthermore, the foregoing disclosure of specific details is for the purpose of illustration and description and is not intended to be limiting, since the foregoing disclosure is not intended to be exhaustive or to limit the disclosure to the precise details disclosed.

The block diagrams of devices, apparatuses, systems referred to in this application are only given as illustrative examples and are not intended to require or imply that the connections, arrangements, configurations, etc. must be made in the manner shown in the block diagrams. These devices, apparatuses, devices, systems may be connected, arranged, configured in any manner, as will be appreciated by those skilled in the art. Words such as "including," "comprising," "having," and the like are open-ended words that mean "including, but not limited to," and are used interchangeably therewith. The words "or" and "as used herein mean, and are used interchangeably with, the word" and/or, "unless the context clearly dictates otherwise. The word "such as" is used herein to mean, and is used interchangeably with, the phrase "such as but not limited to".

It should also be noted that in the devices, apparatuses, and methods of the present application, the components or steps may be decomposed and/or recombined. These decompositions and/or recombinations are to be considered as equivalents of the present application.

The previous description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present application. Various modifications to these aspects will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other aspects without departing from the scope of the application. Thus, the present application is not intended to be limited to the aspects shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

The foregoing description has been presented for purposes of illustration and description. Furthermore, the description is not intended to limit embodiments of the application to the form disclosed herein. While a number of example aspects and embodiments have been discussed above, those of skill in the art will recognize certain variations, modifications, alterations, additions and sub-combinations thereof.

Claims

1. A web graph processing method based on WebGL comprises the following steps:

creating an initial object based on WebGL, the initial object comprising a plurality of nodes and a plurality of edges connecting at least a portion of the plurality of nodes;

acquiring 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 comprises coordinates of the plurality of nodes;

iteratively updating coordinates of each of the plurality of nodes; and

and outputting the processed network graph based on the updating result of the coordinates of each node.

2. The WebGL-based web graph processing method of claim 1, wherein creating the initial object based on the WebGL comprises:

obtaining a canvas;

acquiring a WebGL drawing context;

initializing a shader;

activating the shader; and

an initial object is created.

3. The WebGL-based web graph processing method of claim 2, wherein the shader comprises a vertex shader and a fragment shader.

4. The WebGL-based web graph processing method of claim 2, wherein creating the initial object based on the WebGL further comprises:

changing scenes; and

and rendering the scene.

5. The WebGL-based network graph processing method of claim 1, wherein obtaining initial input data of the plurality of nodes and initial input data of the plurality of edges comprises:

forming 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, in the input pixel array:

the data of each pixel contained in the input pixel array is 4 32-bit floating point data representing R, G, B and A;

the data of each pixel stores data of one node;

storing the edge data of each node and the node sequence in the input pixel array;

the data of the node comprises X and Y coordinates of the node, an offset of an edge of the node in the input pixel array and the number of the edges of the node; and

the data of the edge includes the ID of the target node.

6. The WebGL-based web graph processing method of claim 1, wherein iteratively updating the coordinates of each of the plurality of nodes comprises:

for said each node, applying a repulsive force to said node from all of said plurality of nodes;

reading a destination node of an edge of the node and applying an attractive force from the node to the destination node; and

gravity is applied to the node to obtain new X and Y coordinates of the node.

7. The WebGL-based web graph processing method of claim 1, wherein outputting the processed web graph based on the update result of the coordinates of each node comprises:

and generating an updated texture image based on the updating result of the coordinates of each node to be output as the processed network graph.

8. The WebGL-based web graph processing method of claim 7, wherein generating an updated texture image based on the update result of the coordinates of each node to be output as the processed web graph comprises:

after each iteration, using the output of the previous iteration calculation corresponding to the node as input by a WebGL-based shader, and generating an output pixel based on the updating result of the coordinate of each node; and

generating a texture image after each iteration based on output pixels of the plurality of nodes.

9. A WebGL-based network graph processing apparatus, comprising:

an object creating unit configured to create an initial object based on WebGL, the initial object including a plurality of nodes and a plurality of edges connecting at least a part of the plurality of nodes;

a data acquisition unit configured to acquire 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 coordinates of the plurality of nodes;

an iterative update unit configured to iteratively update coordinates of each of the plurality of nodes; and

and the network graph output unit is used for outputting the processed network graph based on the updating result of the coordinates of each node.

10. An electronic device, comprising:

a processor; and

a memory having stored therein computer program instructions that, when executed by the processor, cause the processor to perform the WebGL-based web graph processing method of any one of claims 1-8.