WebGPU-based signature grouping task collaborative graphic rendering method

Abstract

According to the technical scheme, the CPU-GPU rendering synchronization enhancer based on communication between the WebGPU and the CPU-GPU is achieved. The method comprises the following steps that (10) necessary information is extracted, specifically, necessary objects and context information are extracted; (20) calculating a signature: distributing a unique signature for each object by an object analyzer according to the information of each object, so as to support subsequent grouping; (30) the objects are grouped by the object classifier according to the signatures: the objects are grouped according to the object signatures, and the objects in the same group are allowed to be drawn by using the shared pipeline; (40) configuring a rendering pipeline: distributing other necessary data such as a shader, a static buffer area, a dynamic buffer area and the like necessary for the pipeline to a special presentation pipeline divided according to a signature and a grouping result; and (50) GPU drive rendering: displaying a rendered result on the page. The method is suitable for graph rendering and has the advantages of being better in rendering effect, minimum in communication overhead redundancy and good in view effect.

Description

Technical Field

[0001] The invention belongs to the field of computer application and is a web graphics rendering method with better rendering effect, minimum communication overhead redundancy and good viewing effect. Background Art

[0002] We are in the modern Internet era. Graphics rendering plays a vital role in the development of web applications and digital twins. WebGL and WebGPU are two front-end graphics technologies that play a key role in processing graphics and computing-intensive tasks. WebGL is a JavaScript API specifically designed for 2D and 3D graphics rendering in web browsers. It is based on the OpenGL ES standard and allows developers to create high-performance interactive graphics applications in browsers. It is the current cutting-edge technology for 2D and 3D graphics rendering. WebGPU is the next-generation graphics API designed to directly utilize the performance and parallel capabilities of modern multi-core GPUs to achieve higher performance and richer features. Compared with WebGL, WebGPU significantly improves the utilization of the parallel performance of modern GPUs, so WebGPU has powerful parallel computing capabilities. It not only inherits the functions of WebGL, but also introduces a series of new features, such as higher texture processing, custom shader functions, and more complex blending modes.

[0003] At present, the research on WebGPU-based image rendering technology has the following shortcomings:

[0004] 1. Currently, frameworks created based on WebGPU are far less popular than those based on WebGL.

[0005] 2. Existing WebGPU-based frameworks have not fully utilized the performance advantages of WebGPU. The rendering performance of some frameworks even lags behind that of WebGL-based frameworks. This difference contradicts the performance potential of WebGPU itself. Summary of the invention

[0006] In view of the problems existing in the prior art, the purpose of the present invention is to maximize the integration of graphics rendering and minimize redundant communication overhead to maximize the effect of graphics rendering.

[0007] The present invention implements a signature grouping task collaboration algorithm based on WebGPU through the following technical scheme, including the following steps:

[0008] (10) Extract necessary information: Extract necessary objects and context information;

[0009] (20) Calculate signature: The object analyzer assigns a unique signature to each object based on the information of each object to facilitate subsequent grouping;

[0010] (30) Object classifier groups objects based on signatures: Objects are grouped based on their signatures, allowing objects in the same group to be drawn using a shared pipeline;

[0011] (40) Configuring the rendering pipeline: Allocating necessary shaders, static buffers, dynamic buffers and other necessary data of the pipeline to the dedicated rendering pipeline divided according to the signature and grouping results;

[0012] (50) GPU-driven rendering: The page presents the rendered results.

[0013] Compared with the prior art, the present invention has the following significant advantages:

[0014] Extracting necessary information helps to focus on key content and improve the efficiency and accuracy of information processing; ensuring that each object has a unique identifier is convenient for subsequent object identification, search and grouping, enhancing data management and analysis efficiency, and improving the overall performance of the system; grouping according to object signatures can use shared pipelines to effectively process and draw objects in batches, thereby improving the efficiency and performance of graphics rendering; configuring rendering pipelines improves the rendering efficiency and performance of graphics, and draws each object group through a dedicated pipeline, reducing unnecessary calculations and resource waste; finally, using GPU to present the rendering results can provide a faster, more vivid, more energy-efficient and more user-interactive experience; the present invention reduces communication redundancy, thereby significantly improving performance. This optimization not only helps to reduce latency and improve rendering speed, but also effectively utilizes the parallel processing capabilities of modern GPUs, making graphics rendering more efficient and smoother in the WebGPU environment. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 The steps of the method of the present invention are shown in FIG.

[0016] Figure 2 Detailed flow chart of the method of the present invention

[0017] Figure 3 This is a comparison diagram before and after the GPU-CPU merging process proposed by the present invention

[0018] Figure 4 Algorithm flow chart for grouping based on signatures proposed by the present invention

[0019] Figure 5 Flow chart of the specific steps of configuring the rendering pipeline proposed by the present invention

[0020] Figure 6 This is the rendering result of the present invention Specific implementation methods

[0021] The present invention implements a CPU-GPU rendering synchronization enhancer based on communication between WebGPU and CPU-GPU through the following technical scheme, as shown in the attached Figure 1 As shown (see the flowchart in the attached Figure 2 ), including the following steps:

[0022] (10) Extract necessary information: Extract necessary objects and context information.

[0023] The steps for extracting necessary information in (10) above are specifically as follows:

[0024] (11) Determine the object type. If it is a 3D rendered model, extract its model, texture, material, etc.; if it is a 2D rendered model, process its image, text, etc. information;

[0025] (12) Determine the extraction tools and techniques based on the object type. If it is a three-dimensional model and texture, use professional 3D modeling software to export the model data, or use a texture editor to extract texture information.

[0026] (13) Structured storage and data preparation: structuring the extracted object information, that is, processing the data into a format that is convenient for subsequent use.

[0027] (14) Determine the contextual information required in the current rendering or processing process, such as rendering scene, lighting conditions, viewpoint position, time, etc.

[0028] (15) Obtain information such as viewpoint position and lighting conditions based on user interaction or set fixed parameters, sensor data, or computer vision algorithms.

[0029] (16) The integrated context information and object information are associated or integrated, and a suitable data structure is used for rendering description to facilitate transmission to the GPU for real-time rendering integration.

[0030] (20) Calculate signature: The object analyzer assigns a unique signature to each object based on the information of each object to facilitate subsequent grouping.

[0031] The signature calculation steps of (20) above are specifically as follows:

[0032] (21) Call the signature generation function generateSignature, which receives an object as a parameter.

[0033] (22) Convert the incoming object to a JSON string.

[0034] (23) Use TextEncoder to encode the string into Uint8Array format.

[0035] (24) Call the crypto.subtle.digest function and pass the encoded Uint8Array as a parameter. The function returns a Promise that resolves to an ArrayBuffer containing the hash value.

[0036] (25) Convert the ArrayBuffer to a byte array and convert it to a hexadecimal string byte by byte. This can be achieved using the Array.from and map methods.

[0037] (26) The final generated hexadecimal string is returned as the signature output.

[0038] (30) Object classifier groups objects according to signatures: Objects are grouped according to their signatures, allowing objects in the same group to be drawn using a shared pipeline. The comparison of the processing before and after merging is shown in the attached figure. Figure 3 , the specific process steps according to the signature grouping are as follows Figure 4 .

[0039] The object classifier of (30) above groups objects according to the signatures in the following steps:

[0040] (31) Define an object named signatureMap to store all signatures and their corresponding object lists. This map uses the signature (hash value) as the key and the corresponding value is an array that stores all objects that share the signature.

[0041] (32) Traverse all objects and call the generateSignature function for each object to generate a signature.

[0042] (33) Check if the current signature (hash value) already exists in signatureMap. If not, create a new entry in signatureMap with the signature as the key and initialize an array containing the current object as the value. If it exists, add the current object to the object list of the corresponding signature.

[0043] (40) Configure the rendering pipeline: distribute the necessary shaders, static buffers, dynamic buffers and other necessary data of the pipeline to the dedicated rendering pipeline divided according to the signature and grouping results. The specific flow chart is as shown in the attached figure. Figure 5 :

[0044] The steps for configuring the rendering pipeline in (40) above are specifically as follows:

[0045] (41) To describe the rendering pipeline configuration of an object, the following must be specified in the signature: Attributes, i.e., the vertex shader stage, have certain expectations about the arrangement and format of static data in memory. This expectation ensures that the vertex shader can effectively access and process this data, thereby correctly rendering objects in the 3D scene; Shaders, i.e., programs that perform specific tasks in the graphics rendering pipeline; Fragment targets, i.e., in the graphics rendering pipeline, are used to define the color state of the fragment shader output; Primitives, i.e., the basic shapes that make up the graphics, such as points, lines, triangles, etc.; Depth-stencil buffer, i.e., the key component in the graphics rendering pipeline for processing depth and stencil testing; Multisampling is a technology used to improve anti-aliasing effects and image quality in graphics rendering;

[0046] (42) Create and configure the pipeline. This process is completed through a signature. The signature contains the information required to create the pipeline. The static properties of the pipeline are created according to the attributes in the signature. Vertex and fragment shaders are dynamically combined and generated according to the shader type and lighting conditions. Other states are appropriately placed in the pipeline descriptor.

[0047] (43) Build a dynamic buffer, which is used to store data that needs to be updated for each frame, such as camera perspective, scene angle, and object position, scale, rotation, color, transparency and other graphic attributes. For multiple objects, according to the dynamic data of a single object, the information of each object is combined into a structure array and passed to the shader for parsing and processing. The binding group defines the layout of the dynamic attributes and clarifies how these resources are used in each stage of the shader.

[0048] (44) Build a static buffer containing data that remains almost unchanged during the rendering process, usually corresponding to a data set for each vertex of the graphics, including vertex attributes such as position, normal, and UV coordinates. In merged rendering, static data from different graphics are concatenated and the offset of each graphics data in the large array is recorded;

[0049] (45) Rendering is performed at the vertex stage and the fragment stage. The static attributes of each vertex of the graphic (such as position, normal, UV coordinates, etc.) are passed directly to the main function of the vertex shader as parameters. WebGPU supports reading data from the specified offset of the static buffer. By passing the vertex count and static offset in the draw function, we can retrieve the corresponding static data required for each graphic. In addition, the index of the graphic is also passed through the draw function, allowing us to obtain the required structure from the merged dynamic data to locate specific information. In the vertex stage, these indices can be obtained using the built-in functions of WebGPU. They can be used as part of the vertex stage output and then passed to the fragment stage to complete the entire index transfer process.

[0050] (50) GPU-driven rendering: The page displays the rendered result, as shown in the attached Figure 6 shown.

[0051] Finally, it should be noted that the present invention is not limited to the above-mentioned embodiments, and anyone who knows that any technical solution identical or similar to the present invention made under the inspiration of the present invention shall fall within the protection scope of the present invention.

Claims

1. A CPU-GPU rendering synchronization enhancer based on communication between WebGPU and CPU-GPU, characterized in that: The steps of the method are as follows: (10) Extract necessary information: Extract necessary objects and context information. The steps for extracting necessary information in (10) above are specifically as follows: (11) Determine the object type. If it is a 3D rendered model, extract its model, texture, material, etc.; if it is a 2D rendered model, process its image, text, etc. information; (12) Determine the extraction tools and techniques based on the object type. If it is a three-dimensional model and texture, use professional 3D modeling software to export the model data, or use a texture editor to extract texture information. (13) Structured storage and data preparation: structuring the extracted object information, that is, processing the data into a format that is convenient for subsequent use. (14) Determine the contextual information required in the current rendering or processing process, such as rendering scene, lighting conditions, viewpoint position, time, etc. (15) Obtain information such as viewpoint position and lighting conditions based on user interaction or set fixed parameters, sensor data, or computer vision algorithms. (16) The integrated context information and object information are associated or integrated, and a suitable data structure is used for rendering description to facilitate transmission to the GPU for real-time rendering integration. (20) Calculate signature: The object analyzer assigns a unique signature to each object based on the information of each object to facilitate subsequent grouping. The signature calculation steps of (20) above are specifically as follows: (21) Call the signature generation function generateSignature, which receives an object as a parameter. (22) Convert the incoming object to a JSON string. (23) Use TextEncoder to encode the string into Uint8Array format. (24) Call the crypto.subtle.digest function and pass the encoded Uint8Array as a parameter. The function returns a Promise that resolves to an ArrayBuffer containing the hash value. (25) Convert the ArrayBuffer to a byte array and convert it to a hexadecimal string byte by byte. This can be achieved using the Array.from and map methods. (26) The final generated hexadecimal string is returned as the signature output. (30) Object classifier groups objects according to signatures: Objects are grouped according to their signatures, allowing objects in the same group to be drawn using a shared pipeline. The processing comparison diagram before and after the merge is shown in Figure 3, and the specific process steps for grouping according to signatures are shown in Figure 4. The object classifier of (30) above groups objects according to the signatures in the following steps: (31) Define an object named signatureMap to store all signatures and their corresponding object lists. This map uses the signature (hash value) as the key and the corresponding value is an array that stores all objects that share the signature. (32) Traverse all objects and call the generateSignature function for each object to generate a signature. (33) Check if the current signature (hash value) already exists in signatureMap. If not, create a new entry in signatureMap with the signature as the key and initialize an array containing the current object as the value. If it exists, add the current object to the object list of the corresponding signature. (40) Configuring the rendering pipeline: Allocating the necessary shaders, static buffers, dynamic buffers and other necessary data of the pipeline to the dedicated rendering pipeline divided according to the signature and grouping results. The specific flow chart is shown in Figure 5; The steps for configuring the rendering pipeline in (40) above are specifically as follows: (41) To describe the rendering pipeline configuration of an object, the following must be specified in the signature: Attributes, i.e., the vertex shader stage, have certain expectations about the arrangement and format of static data in memory. This expectation ensures that the vertex shader can effectively access and process this data, thereby correctly rendering objects in the 3D scene; Shaders, i.e., programs that perform specific tasks in the graphics rendering pipeline; Fragment targets, i.e., in the graphics rendering pipeline, are used to define the color state of the fragment shader output; Primitives, i.e., the basic shapes that make up the graphics, such as points, lines, triangles, etc.; Depth-stencil buffer, i.e., the key component in the graphics rendering pipeline for processing depth and stencil testing; Multisampling is a technology used to improve anti-aliasing effects and image quality in graphics rendering; (42) Create and configure the pipeline. This process is completed through a signature. The signature contains the information required to create the pipeline. The static properties of the pipeline are created according to the attributes in the signature. Vertex and fragment shaders are dynamically combined and generated according to the shader type and lighting conditions. Other states are appropriately placed in the pipeline descriptor. (43) Build a dynamic buffer, which is used to store data that needs to be updated for each frame, such as camera perspective, scene angle, and object position, scale, rotation, color, transparency and other graphic attributes. For multiple objects, according to the dynamic data of a single object, the information of each object is combined into a structure array and passed to the shader for parsing and processing. The binding group defines the layout of the dynamic attributes and clarifies how these resources are used in each stage of the shader. (44) Build a static buffer containing data that remains almost unchanged during the rendering process, usually corresponding to a data set for each vertex of the graphics, including vertex attributes such as position, normal, and UV coordinates. In merged rendering, static data from different graphics are concatenated and the offset of each graphics data in the large array is recorded; (45) Rendering is performed at the vertex stage and the fragment stage. The static attributes of each vertex of the graphic (such as position, normal, UV coordinates, etc.) are passed directly to the main function of the vertex shader as parameters. WebGPU supports reading data from the specified offset of the static buffer. By passing the vertex count and static offset in the draw function, we can retrieve the corresponding static data required for each graphic. In addition, the index of the graphic is also passed through the draw function, allowing us to obtain the required structure from the merged dynamic data to locate specific information. In the vertex stage, these indices can be obtained using the built-in functions of WebGPU. They can be used as part of the vertex stage output and then passed to the fragment stage to complete the entire index transfer process. (50) GPU driven rendering: The page presents the rendered result, as shown in Figure 6.

Images