A method for generating a WebGPU real-time rendering pipeline

Abstract

The present invention relates to a method for generating a WebGPU real-time rendering pipeline, comprising: obtaining a camera viewing cone of a 3D object to be tested, transferring it to an octree container object, performing step-by-step traversal and category distinction, obtaining rendering objects and storing them in a rendering queue; obtaining global data and an MVP matrix of each rendering object and uploading them to a GPU at one time; traversing each rendering object, obtaining its corresponding material, determining specific rendering parameters, material names, material state values, texture maps and macro definition values ​​of the rendering object according to the material, and uploading the specific rendering parameters to the GPU; judging whether a rendering pipeline has been created according to a Cache, if a Cache exists, the creation is completed, and the rendering pipeline is directly called for rendering, if a Cache does not exist, a rendering pipeline is created and rendered; the method of the present invention solves the technical problems of low rendering efficiency and low resource reuse rate in the prior art.

Description

Technical Field

[0001] The present invention relates to the field of computer graphics technology, and in particular to a method for generating a WebGPU real-time rendering pipeline. Background Art

[0002] In the existing technology, there are very few WebGPU engines. Most of them pre-define the data binding slots and rendering pipelines of a certain material, and call the underlying API provided by the browser to produce different data binding logics (BindGroup) and rendering pipelines (RenderPipe). For different rendering situations, more rendering logics are encapsulated, and the flexibility is very poor. In multi-batch rendering of the scene, the rendering pipeline will be switched continuously, resulting in low rendering efficiency.

[0003] Therefore, there is an urgent need for a method for generating a WebGPU real-time rendering pipeline. Summary of the invention

[0004] 1. Technical issues to be resolved

[0005] In view of the above-mentioned shortcomings and deficiencies of the prior art, the present invention provides a method for generating a WebGPU real-time rendering pipeline, which solves the technical problems of low rendering efficiency and low resource reuse rate in the prior art.

[0006] (II) Technical solution

[0007] In order to achieve the above object, the main technical solutions adopted by the present invention include:

[0008] An embodiment of the present invention provides a method for generating a WebGPU real-time rendering pipeline, comprising:

[0009] S100, obtaining a camera viewing frustum of a 3D object to be tested, and transferring the camera viewing frustum to an octree container object, performing step-by-step traversal and category differentiation, obtaining a transparent rendering object and an opaque rendering object, and storing the transparent rendering object and the opaque rendering object in a rendering queue;

[0010] The camera viewing frustum is obtained through viewpoint information provided by the camera;

[0011] S200, obtaining the global data of the rendering queue and the model matrix of each rendering object in the rendering queue, and obtaining the MVP matrix of each rendering object according to the global data of the rendering queue and the model matrix of each rendering object; uploading the global data and the MVP matrix of each rendering object to the GPU at one time;

[0012] S300, traversing each object in the rendering queue, obtaining its corresponding material, determining specific rendering parameters, material name, material state value, texture map and macro definition value of the rendering object according to the material, and uploading the specific rendering parameters of the rendering object to the GPU at one time;

[0013] S400, judging whether the rendering pipeline has been created according to the Cache, if the Cache exists, the creation is completed, and the rendering pipeline is directly called for rendering; if the Cache does not exist, the rendering pipeline is created, and the rendering pipeline is called to render each rendering object in the rendering queue, and a 2D image corresponding to the 3D object to be tested is obtained;

[0014] The Cache is set when creating the rendering pipeline.

[0015] Optionally, the S100 includes:

[0016] S110, traversing the octree container object step by step, starting from the root node, and checking layer by layer whether the bounding box of the octree container object node intersects with the camera viewing frustum;

[0017] S120, if they intersect, check whether the bounding box of the three-dimensional object in the node intersects with the camera viewing frustum; if they intersect, mark the rendering object and continue traversing; if they do not intersect, continue traversing downward;

[0018] S130: If the bounding box of the octree container object node does not intersect with the camera viewing frustum, directly skip the node and continue traversing downward.

[0019] Optionally, the S100 further includes:

[0020] S140, according to the renderOrder attribute of each rendering object in the rendering queue, classify the rendering object into an opaque rendering object and a transparent rendering object;

[0021] The renderOrder attribute of the transparent rendering object is greater than a set value, and the renderOrder attribute of the opaque rendering object is less than the set value.

[0022] Optionally, in S200, the global data specifically includes:

[0023] The camera's projection matrix, the camera's view matrix, the plane resolution, the mouse position, the timestamp, and the exposure.

[0024] Optionally, in S200, obtaining the MVP matrix of each rendering object according to the global data of the rendering queue and the model matrix of each rendering object includes:

[0025] Input the projection matrix, view matrix and model matrix of the rendering object in the global data into the following formula to obtain the MVP matrix:

[0026] MVP matrix = projection matrix × view matrix × model matrix.

[0027] Optionally, in S400, creating a rendering pipeline includes:

[0028] S410, obtaining Shader Module cache;

[0029] S420, constructing the texture slot information parameters of the sampler required by BindGroupLayout according to the Shader code, and generating BindGroupLayout;

[0030] S430, generate a Cache Key according to the material state value, macro definition value, and material name, and obtain whether there is a reusable pipeline; if not, call the WebGPU underlying interface to create a rendering pipeline, pass the created BindGroupLayout, the rendering state contained in the material, and the Shader Module, and output the rendering pipeline.

[0031] Optionally, the S400 further includes:

[0032] S440, sorting the rendering queue according to a pre-set sorting algorithm, obtaining the sorted rendering queue, and rendering the rendering object according to the sorting;

[0033] The pre-set sorting algorithm includes:

[0034] Render the opaque render objects first, then the transparent render objects;

[0035] For transparent rendering objects, the larger the renderOrder attribute, the earlier they are rendered. By default, if the value is 0, they are sorted according to the order in which they are added to the rendering queue.

[0036] For opaque rendering objects, contrary to transparent rendering objects, larger values ​​are rendered in the front, and smaller values ​​are rendered in the back.

[0037] Optionally, the S410 specifically includes:

[0038] Generate Shader ModuleCache Key according to the name of Shader code, macro variables and specific Shader code, check whether there is a compiled Shader Module, if not, create Shader Module.

[0039] Optionally, before S100, the step further includes:

[0040] S000, initializing the engine; obtaining a 3D object to be tested, performing octree division on the 3D object to be tested, and obtaining an octree container object;

[0041] Initializing the engine specifically includes:

[0042] Initialize the WebGPU context, initialize the Shader system, initialize the global binding system, initialize the global Render Target, initialize the resource manager, and initialize the input system.

[0043] Optionally, the method further comprises:

[0044] When the rendering state of a certain three-dimensional object changes, and no other rendering object is in use in the current rendering pipeline, the current rendering pipeline is destroyed in asynchronous mode;

[0045] The asynchronous mode is to schedule and destroy in fixed batches frame by frame.

[0046] (III) Beneficial effects

[0047] The beneficial effects of the present invention are as follows: a WebGPU real-time rendering pipeline generation method of the present invention avoids repeated calculation and repeated rendering by adopting the octree level-by-level traversal and intersection judgment optimization; at the same time, a one-time transmission of batch data is adopted to reduce the number of uploads and improve the efficiency of data interaction; in addition, by setting different Cache Keys, resource reuse is allowed, which increases resource utilization while ensuring the minimum occupation of resources. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 A schematic diagram of a method for generating a WebGPU real-time rendering pipeline according to an embodiment of the present invention;

[0049] Figure 2 This is a flowchart of a method for generating a WebGPU real-time rendering pipeline in Embodiment 2 of the present invention;

[0050] Figure 3 This is a flowchart of initializing a rendering pipeline in Embodiment 2 of the present invention;

[0051] Figure 4 A block diagram of the rendering process of the entire engine in Embodiment 2 of the present invention;

[0052] Figure 5 Schematic diagram of an octree structure in an embodiment of the present invention;

[0053] Figure 6is a schematic structural diagram of a camera viewing cone in an embodiment of the present invention;

[0054] Figure 7 This is a schematic diagram of a scene view in Example 3 of the present invention. DETAILED DESCRIPTION

[0055] In order to better explain the present invention and facilitate understanding, the present invention is described in detail below through specific implementation modes in conjunction with the accompanying drawings.

[0056] View frustum: View frustum is a core concept in computer graphics, especially in 3D rendering and geometric culling techniques. The view frustum vividly describes the 3D space area that can be seen from the observer (such as the camera or the player's perspective). The shape of this area is similar to an incomplete cuboid, with its ends gradually shrinking, similar to the top of a four-sided pyramid being truncated, such as Figure 6 shown.

[0057] Octree: Figure 5 As shown in Figure 1, an octree is a tree-shaped data structure used to organize three-dimensional spatial data. It recursively divides the space into eight equal sub-regions (similar to a quadtree in two-dimensional space), and each sub-region can continue to be divided until a certain stopping condition is met (such as reaching a certain depth limit or each sub-region contains only one or zero data points). Each node of the octree represents a spatial region, and leaf nodes usually represent the region that actually contains data, while non-leaf nodes are used to assist in spatial division and search.

[0058] Cache Key: Cache keyword. In the engine, some reused functional modules are hit by this keyword.

[0059] RenderOrder: Rendering order number.

[0060] Shader: A language running on the GPU, which is the WGSL language in the embodiment of the present invention.

[0061] Shader Moudle: The compiled module generated after the Shader code is compiled.

[0062] ShaderModule Cache Key: Cache keyword of Shader Moudle.

[0063] BindGroupLayout: A piece of configuration code passed to the GPU to obtain the data specification format of the cache data inside the GPU.

[0064] The embodiment of the present invention proposes a method for generating a WebGPU real-time rendering pipeline. In order to solve the technical problems of low rendering efficiency, poor reuse rate and poor flexibility in the prior art, the present invention adopts the level-by-level traversal and intersection judgment optimization of the octree to avoid repeated calculation and repeated rendering; at the same time, a one-time transmission of batch data is adopted to reduce the number of uploads and improve the efficiency of data interaction; in addition, the embodiment of the present invention sets different Cache Keys to allow resource reuse, which increases resource utilization while ensuring the minimum occupation of resources.

[0065] In order to better understand the above technical solution, exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although exemplary embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments described herein. On the contrary, these embodiments are provided to enable a clearer and more thorough understanding of the present invention and to fully convey the scope of the present invention to those skilled in the art.

[0066] Example 1

[0067] See also Figure 1 , a method for generating a WebGPU real-time rendering pipeline in this embodiment includes:

[0068] S100, obtaining a camera viewing frustum of a 3D object to be tested, transferring the camera viewing frustum to an octree container object, performing step-by-step traversal and category differentiation, obtaining a transparent rendering object and an opaque rendering object, and storing the transparent rendering object and the opaque rendering object in a rendering queue;

[0069] The camera viewing frustum is obtained through viewpoint information provided by the camera;

[0070] S200, obtaining the global data of the rendering queue and the model matrix of each rendering object in the rendering queue, and obtaining the MVP matrix of each rendering object according to the global data of the rendering queue and the model matrix of each rendering object; uploading the global data and the MVP matrix of each rendering object to the GPU at one time;

[0071] S300, traversing each object in the rendering queue, obtaining its corresponding material, determining specific rendering parameters, material name, material state value, texture map and macro definition value of the rendering object according to the material, and uploading the specific rendering parameters of the rendering object to the GPU at one time;

[0072] S400, judging whether the rendering pipeline has been created according to the Cache, if the Cache exists, the creation is completed, and the rendering pipeline is directly called for rendering; if the Cache does not exist, the rendering pipeline is created, and the rendering pipeline is called to render each rendering object in the rendering queue, and a 2D image corresponding to the 3D object to be tested is obtained;

[0073] The Cache is set when creating the rendering pipeline.

[0074] In the specific implementation process, the specific rendering parameters include color, direction, etc. These parameters are all numerical types, such as color is a vector of 4 floating-point numbers, and the direction class is a vector of 3 floating-point numbers. In this way, the engine will define the structure of the material's numerical data in the Shader to save these data. Furthermore, the specific rendering parameters of the rendering object will be submitted to the GPU at one time, while the material name, material status value, texture map and other parameters of the rendering object do not need to be uploaded to the GPU. Instead, when the GPU needs these data, they are passed from the CPU to the GPU through a dedicated interface for use.

[0075] In this embodiment, the viewpoint information provided by the camera includes the camera's position information, direction information, field of view angle information, near clipping plane information, and far clipping plane information.

[0076] Among them, the position information is used to determine the origin of the camera's viewing frustum, the direction information is the camera's viewing direction, which is used to determine the positive direction of the viewing frustum, the field of view angle defines the width of the viewing frustum and determines the shape of the viewing frustum, and the near clipping plane and far clipping plane information define the front and back boundaries of the viewing frustum.

[0077] This embodiment can complete the rendering of three-dimensional objects more efficiently, directly provide the WebGPU underlying proxy interface through the browser, call the underlying rendering interface, so that developers have stronger management and organization scheduling capabilities, and maximize the role of the GPU.

[0078] Example 2

[0079] See also Figure 2 , a method for generating a WebGPU real-time rendering pipeline according to an embodiment of the present invention includes:

[0080] Step S100, obtaining a camera viewing frustum of the 3D object to be tested, transferring the camera viewing frustum to an octree container object, performing step-by-step traversal and category differentiation, obtaining a transparent rendering object and an opaque rendering object, and storing the transparent rendering object and the opaque rendering object in a rendering queue;

[0081] The camera frustum is obtained through the viewpoint information provided by the camera;

[0082] Step S200, obtaining the global data of the rendering queue and the model matrix of each rendering object in the rendering queue, and obtaining the MVP matrix of each rendering object according to the global data of the rendering queue and the model matrix of each rendering object; uploading the global data and the MVP matrix of each rendering object to the GPU at one time;

[0083] Step S300, traverse each object in the rendering queue, obtain its corresponding material, determine the specific rendering parameters, material name, material state value, texture map and macro definition value of the rendering object according to the material, and upload the specific rendering parameters of the rendering object to the GPU at one time;

[0084] Step S400: determine whether the rendering pipeline has been created according to the Cache. If the Cache exists, the creation is completed and the rendering pipeline is directly called for rendering. If the Cache does not exist, create a rendering pipeline and call the rendering pipeline to render each rendering object in the rendering queue to obtain a 2D image corresponding to the 3D object to be tested.

[0085] The cache is set when the rendering pipeline is created.

[0086] In this embodiment, step S100 includes:

[0087] Step S110, traverse the octree container object step by step, starting from the root node, and check layer by layer whether the bounding box of the octree container object node intersects with the camera viewing frustum;

[0088] Step S120: If they intersect, check whether the bounding box of the three-dimensional object in the node intersects with the camera viewing frustum; if they intersect, mark the rendering object and continue traversing; if they do not intersect, continue traversing downward;

[0089] Step S130: If the bounding box of the octree container object node does not intersect with the camera viewing frustum, the node is directly skipped and the traversal continues downward.

[0090] Step S140: according to the renderOrder attribute of each rendering object in the rendering queue, the rendering object is divided into an opaque rendering object and a transparent rendering object;

[0091] The renderOrder property of a transparent render object is greater than the set value, and the renderOrder property of an opaque render object is less than the set value.

[0092] The setting value is set according to the actual situation. For example, the setting value can be 3000. At this time, if the renderOrder attribute is greater than 3000, it is a transparent rendering object, and if it is less than 3000, it is an opaque rendering object.

[0093] In the specific implementation process, the octree screening principle is:

[0094] Objects that are not within the scope of the octree are stored in the root node of the octree (level 0); if an object is in level 0 and is contained in multiple levels 1, the object is placed in each level 1 respectively; other spaces larger than level 1, if they are occupied in multiple subsets, are stored in the parent level. For example, if an object exists in both 3-1 space and 3-2 space, it is stored in their parent level 2; changes in the position and bounding box of the object will trigger the recalculation of the octree position and clear the original position.

[0095] Through the above rules, it can be concluded that level 0 is the object that is not in the octree, level 1 may store the objects that can be accommodated and some three-dimensional objects in the space, and levels 2 and above store objects that can be accommodated. The rules use ordinary methods, so that the large number of rendering objects at level 0 mentioned above can be transferred to level 1. 1 level 0 contains 8 levels 1, so that the objects can be divided into eight subspaces. When rendering and filtering, level 1 will be filtered first, so a large number of objects can be filtered out, thereby achieving the goal of high performance.

[0096] Global data specifically includes:

[0097] The camera's projection matrix, the camera's view matrix, the plane resolution, the mouse position, the timestamp, and the exposure.

[0098] In this embodiment, in step S200, obtaining the MVP matrix of each rendering object according to the global data of the rendering queue and the model matrix of each rendering object includes:

[0099] Input the projection matrix, view matrix and model matrix of the rendering object in the global data into the following formula to obtain the MVP matrix:

[0100] MVP matrix = projection matrix × view matrix × model matrix.

[0101] In a specific implementation process, the model matrix of each rendered object is determined according to its material, and the model matrix represents the position, rotation, and scale of the object in the world coordinate system.

[0102] Specifically, obtaining the model matrix includes the following steps: initializing a unit matrix; applying a translation transformation according to the position information of the rendering object; applying a rotation transformation according to the position information of the rendering object; applying a scaling transformation according to the scaling information of the rendering object; and multiplying the above transformation matrices in sequence to obtain the final model matrix.

[0103] See also Figure 3 In step S400, creating a rendering pipeline includes:

[0104] Step S410, obtaining Shader Module cache;

[0105] Step S420, constructing the texture slot information parameters of the sampler required by BindGroupLayout according to the Shader code, and generating BindGroupLayout;

[0106] Step S430, generate a Cache Key according to the material state value, macro definition value, and material name, and obtain whether there is a reusable pipeline; if not, call the WebGPU underlying interface to create a rendering pipeline, pass the created BindGroupLayout, the rendering state contained in the material, and the Shader Module, and output the rendering pipeline.

[0107] Step S440: sort the rendering queue according to a pre-set sorting algorithm, obtain the sorted rendering queue, and render the rendering object according to the sorting.

[0108] Step S420 specifically includes: using the name of the texture as a cache key. If a texture already exists in the cache, the texture can be directly reused without re-creating it; and recording the number of references of each texture. When the number of references is 0, it means that the texture is no longer used by any material, so the texture can be safely destroyed;

[0109] Similarly, the sampler also uses a similar caching mechanism, taking the sampler's state as a Cache Key. If a sampler already exists in the cache, the sampler is reused directly.

[0110] The above cache mechanism reduces the overhead of repeated texture and sampler creation, thereby reducing GPU memory usage, reducing unnecessary resource creation and destruction operations, and improving rendering performance. At the same time, by reusing resources, addressing time is reduced, further improving rendering efficiency.

[0111] The pre-set sorting algorithms include:

[0112] Render the opaque render objects first, then the transparent render objects;

[0113] For transparent rendering objects, the larger the renderOrder attribute, the earlier they are rendered. By default, if the value is 0, they are sorted according to the order in which they are added to the rendering queue.

[0114] For opaque rendering objects, contrary to transparent rendering objects, larger values ​​are rendered in the front, and smaller values ​​are rendered in the back.

[0115] In the specific implementation process, step S410 specifically includes:

[0116] Generate Shader ModuleCache Key according to the name of Shader code, macro variables and specific Shader code, check whether there is a compiled Shader Module, if not, create Shader Module.

[0117] In this embodiment, before step S100, the following steps are also included:

[0118] Step S000, initializing the engine; obtaining a 3D object to be tested, dividing the 3D object to be tested into an octree, and obtaining an octree container object;

[0119] Initializing the engine specifically includes:

[0120] Initialize the WebGPU context, initialize the Shader system, initialize the global binding system, initialize the global Render Target, initialize the resource manager, and initialize the input system.

[0121] Specifically, initializing the WebGPU context includes: initializing the Canvas window, creating a WebGPUAdapter adapter, and requesting a WebGPU Device through the adapter, which is used to execute the actual graphics or computing command object.

[0122] When the Shader system is initialized, a series of Shader codes are preset in the engine, and macro definitions are added to these codes to improve code reusability. For example, different material types can choose which code segments to enable by changing the macro definition value. In addition, the binding points in the Shader code are set to be automatically allocated, which means that the specific location will be determined at compile time.

[0123] To initialize the global binding system, you need to create and initialize a memory space based on the global variables to store global variables such as camera projection matrix, screen size, mouse position, timestamp, etc. These contents will be stored in a Buffer (global buffer); by setting the Buffer, the above frequently used parameters can be efficiently passed to the GPU.

[0124] Initialize the global Render Target. Render Target refers to a buffer for receiving image data output. Specifically, it is a memory area, usually one or a group of textures (Texture) or frame buffers (FrameBuffer), which is used to store pixel data processed by the shader. If the rendered result needs to be post-processed, such as applying some image effects, the rendered result needs to be stored in a defined texture. To this end, initializing the global RenderTarget will set multiple textures as targets, storing color, depth, normal information, and material properties respectively, so as to facilitate secondary use in subsequent post-processing.

[0125] Initialize the resource manager, which is responsible for loading and caching various types of resource files, such as texture maps, 3D models, etc. Initialize the resource manager. Once the resource is loaded and parsed once, it will be saved in the memory environment and can be directly extracted from the cache the next time it is requested. This can significantly reduce the performance overhead caused by repeated loading.

[0126] Furthermore, the input system is initialized, that is, the initialization operation of binding the relevant mouse and keyboard is performed to provide event scheduling of the input device for the entire engine.

[0127] In this embodiment, a method for generating a WebGPU real-time rendering pipeline further includes:

[0128] During the rendering of each frame, if it is detected that the rendering status of part of the 3D object has changed, the macro definition value has changed, the material parameters have changed, or the geometry has changed, it will trigger the re-initialization of the rendering pipeline and regenerate the rendering pipeline. The previously used pipeline will also be destroyed if it is not used by other rendering objects.

[0129] If the user sets the material rendering state of a 3D object to the Bundle mode, the rendering pipeline will record a series of information such as the rendering state. The CPU and GPU only need to submit once, and subsequent rendering will remain in this mode, reducing the communication time between the CPU and GPU. For some 3D objects that need to be rendered multiple times, using this method can greatly improve the rendering performance. The engine integrates the code, and the user only needs to change the rendering state of the material to achieve efficient rendering in this mode.

[0130] In this embodiment, Figure 4 As shown, the method also includes:

[0131] When the rendering state of a 3D object changes and no other rendering objects are in use in the current rendering pipeline, the current rendering pipeline is destroyed in asynchronous mode.

[0132] The asynchronous mode schedules and destroys fixed batches frame by frame.

[0133] A WebGPU real-time rendering pipeline generation method of this embodiment adopts the octree level-by-level traversal and intersection judgment optimization to avoid repeated calculation and repeated rendering; at the same time, a one-time transmission of batch data is adopted to reduce the number of uploads and improve the efficiency of data interaction; in addition, by setting different Cache Keys, resource reuse is allowed, which increases resource utilization while ensuring the minimum resource occupation.

[0134] Example 3

[0135] In this embodiment, a method for generating a WebGPU real-time rendering pipeline takes rendering of a cube and a sphere as an example to specifically explain the process of engine initialization and asset generation and creation before the implementation of Embodiment 1:

[0136] Step 1: Engine initialization mainly includes:

[0137] WebGPU context initialization;

[0138] It mainly involves the initialization of the underlying WebGPU, including the initialization of the Canvas window, the creation of the WebGPU Adapter, the initialization of the WebGPU Device, and the acquisition of the functional features of the browser and the user's computer.

[0139] Shader system initialization;

[0140] The entire engine system presets a series of shader codes. These shader codes add macro definitions, not pure WGSL, so that code reuse can be achieved. The bind slots are also set to the value of `auto` and saved in a cache by the name of the material for easy engine calling.

[0141] Initialize the global binding system;

[0142] The global binding initialization will open up a piece of memory space according to the global variables, initialize the value of each variable in the global buffer, and then upload it to the GPU. The global buffer mainly includes variables such as the camera's projection matrix, the camera's view matrix, the screen size, the mouse position, the timestamp, etc. These contents will be stored in a buffer, and each frame will be uploaded to the GPU.

[0143] Global RenderTarget initialization;

[0144] If the rendered result needs to be post-processed, it needs to be stored in a defined texture Buffer. Here, the rendered color, rendered vertex position, rendered normal, and rendered material properties will be initialized and stored in four different textures to facilitate subsequent post-processing and secondary use.

[0145] Resource manager initialization;

[0146] The resource cache is initialized, and all loading and parsing results are stored in the cache. The second load will hit the cache. At the same time, the parsed resources can be directly obtained from the cache for reuse. The resource manager provides a series of resource acquisition methods, such as texture maps, models, etc.

[0147] Input system initialization;

[0148] Bind the initialization operations of the related mouse and keyboard, and provide event scheduling of input devices for the entire engine.

[0149] Step 2: Asset Generation and Creation:

[0150] Users create multiple views, see Figure 7 , where a view contains a camera and a scene. The scene itself contains the background sky. The scene can contain three-dimensional objects. The cube and sphere to be created are the three-dimensional objects to be rendered. Each three-dimensional object to be rendered needs to contain two parts, namely geometry and material. The geometry is used to represent the geometric structure of the object. It is composed of a series of triangular faces. The geometric information of the triangular faces usually requires vertices, normals, UVs, vertex colors, tangents, and indices. This information is generally automatically calculated by the engine or comes from model files (model files are generally made through some model editing tools such as: 3dMax, C4D, Blander and other tools). Each triangle has Three vertices, each vertex is represented by three numbers [x, y, z]. For a cube, 8 vertices are needed to represent it. For a six-quad face, each quad face contains two triangles, and 12 triangles are needed to represent it. The eight vertices are combined into 12 triangles through indexing. Each triangular face has a corresponding direction. This direction vector is the normal. The normal is also represented by [x, y, z]. UV is the texture coordinate. If we want to put a picture on this plane, we need texture coordinates to correspond to the position of the color point on the picture and the position of the triangular face. Generally, the UV coordinate is between 0-1. Greater or less than this value is equivalent to repeated values.

[0151] Among them, materials can be regarded as a set of parameters to guide the rendering engine on how to generate the rendering pipeline. The material parameters include rendering-related state values, macro definition values, rendering parameters, texture maps, and shader codes. The rendering-related state values ​​indicate the rules used by the GPU to perform internal calculations, such as whether the depth is turned on, whether to perform comparison, etc. For how to calculate the fusion of translucent objects, macro definitions are not supported in the WebGPU internal interface. The engine provides macro definition keywords through a custom set of Shader code parsing tools, and reuses related codes similar to C++. These keywords can add pre-compiled logic, remove redundant Shader codes that do not belong to the rendering pipeline, and leave only usable codes.

[0152] For different rendering situations, you only need to change the macro definition. For example, for geometry, if you add vertex color for each vertex in the vertex attributes, you can use vertex coloring. In this way, there will be some functional conflicts between the colors in the material. According to the user's macro settings, you can dynamically use material color and vertex color.

[0153] Rendering parameters, including color, roughness, metalness, ambient light reflection intensity, and a series of texture maps. Texture maps can be understood as a picture, which is rendered onto the surface of the object through the UV coordinate values ​​of the user geometry;

[0154] The shader code is a kind of code executed inside the GPU. The code used inside WebGPU is in WGSL syntax. The shader code is divided into two parts, one is the vertex shader code, which is used to calculate vertices, and the other is the fragment shader, which is used to color geometric bodies. In the material, different codes are written according to different materials. The shader code is generally defined inside the engine according to different materials. Users only need to pay attention to the state value of the material and the rendering parameters.

[0155] In the description of the present invention, it should be understood that the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of the present invention, the meaning of "plurality" is two or more, unless otherwise clearly and specifically defined.

[0156] In the present invention, unless otherwise clearly specified and limited, the terms "installed", "connected", "connected", "fixed" and the like should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection or an indirect connection through an intermediate medium; it can be the internal connection of two elements or the interaction relationship between two elements. For ordinary technicians in this field, the specific meanings of the above terms in the present invention can be understood according to specific circumstances.

[0157] In the present invention, unless otherwise clearly specified and limited, when a first feature is “on” or “below” a second feature, it may be that the first and second features are in direct contact, or that the first and second features are in indirect contact through an intermediate medium. Moreover, when a first feature is “above”, “above” or “above” a second feature, it may be that the first feature is directly above or obliquely above the second feature, or it may simply mean that the first feature is higher in level than the second feature. When a first feature is “below”, “below” or “below” a second feature, it may be that the first feature is directly below or obliquely below the second feature, or it may simply mean that the first feature is lower in level than the second feature.

[0158] In the description of this specification, the description of the terms "one embodiment", "some embodiments", "embodiment", "example", "specific example" or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, unless they are contradictory.

[0159] Although the embodiments of the present invention have been shown and described above, it is to be understood that the above embodiments are exemplary and are not to be construed as limitations of the present invention. A person skilled in the art may alter, modify, replace and modify the above embodiments within the scope of the present invention.

Claims

1. A method for generating a WebGPU real-time rendering pipeline, characterized in that: include: S100, obtaining a camera viewing frustum of a 3D object to be tested, transferring the camera viewing frustum to an octree container object, performing step-by-step traversal and category differentiation, obtaining a transparent rendering object and an opaque rendering object, and storing the transparent rendering object and the opaque rendering object in a rendering queue; Among them, the screening principle of octree container objects is: Objects that are not within the scope of the octree are stored in the root node of the octree; if an object is in level 0 and is contained in multiple levels, the object is placed in each level separately; other spaces larger than level 1, if they are occupied in multiple subsets, are stored in the parent level; The camera viewing frustum is obtained through viewpoint information provided by the camera; S200, obtaining the global data of the rendering queue and the model matrix of each rendering object in the rendering queue, and obtaining the MVP matrix of each rendering object according to the global data of the rendering queue and the model matrix of each rendering object; uploading the global data and the MVP matrix of each rendering object to the GPU at one time; S300, traversing each object in the rendering queue, obtaining its corresponding material, determining specific rendering parameters, material name, material state value, texture map and macro definition value of the rendering object according to the material, and uploading the specific rendering parameters of the rendering object to the GPU at one time; The material name, material state value, texture map and macro definition value of the rendering object are transferred from the CPU to the GPU through a dedicated interface when these data are needed; S400, judging whether the rendering pipeline has been created according to the Cache, if the Cache exists, the creation is completed, and the rendering pipeline is directly called for rendering; if the Cache does not exist, the rendering pipeline is created, and the rendering pipeline is called to render each rendering object in the rendering queue, and a 2D image corresponding to the 3D object to be tested is obtained; Creating a rendering pipeline involves: S410, obtaining Shader Module cache; S420, constructing the texture slot information parameters of the sampler required by BindGroupLayout according to the Shader code, and generating BindGroupLayout; S430, generating a Cache Key according to the material state value, macro definition value, and material name, and obtaining whether there is a reusable pipeline; if not, calling the WebGPU underlying interface to create a rendering pipeline, passing the created BindGroupLayout, the rendering state contained in the material, and the Shader Module, and outputting the rendering pipeline; The Cache is set when creating the rendering pipeline; S410 specifically includes: Generate Shader Module CacheKey according to the name of the Shader code, macro variables and specific Shader code, and check whether there is a compiled Shader Module. If not, create a Shader Module.

2. The method for generating a WebGPU real-time rendering pipeline according to claim 1, characterized in that: The S100 includes: S110, traversing the octree container object step by step, starting from the root node, and checking layer by layer whether the bounding box of the octree container object node intersects with the camera viewing frustum; S120, if they intersect, check whether the bounding box of the three-dimensional object in the node intersects with the camera viewing frustum; if they intersect, mark the rendering object and continue traversing; if they do not intersect, continue traversing downward; S130: If the bounding box of the octree container object node does not intersect with the camera viewing frustum, directly skip the node and continue traversing downward.

3. The method for generating a WebGPU real-time rendering pipeline according to claim 1, characterized in that: The S100 further includes: S140, according to the renderOrder attribute of each rendering object in the rendering queue, classify the rendering object into an opaque rendering object and a transparent rendering object; The renderOrder attribute of the transparent rendering object is greater than a set value, and the renderOrder attribute of the opaque rendering object is less than the set value.

4. The method for generating a WebGPU real-time rendering pipeline according to claim 1, characterized in that: In S200, the global data specifically includes: The camera's projection matrix, the camera's view matrix, the plane resolution, the mouse position, the timestamp, and the exposure.

5. The method for generating a WebGPU real-time rendering pipeline according to claim 4, characterized in that: In S200, obtaining the MVP matrix of each rendering object according to the global data of the rendering queue and the model matrix of each rendering object includes: Input the projection matrix, view matrix and model matrix of the rendering object in the global data into the following formula to obtain the MVP matrix: MVP matrix = projection matrix × view matrix × model matrix.

6. The method for generating a WebGPU real-time rendering pipeline according to claim 1, characterized in that: The S400 further includes: S440, sorting the rendering queue according to a pre-set sorting algorithm, obtaining the sorted rendering queue, and rendering the rendering object according to the sorting; The pre-set sorting algorithm includes: Render the opaque render objects first, then the transparent render objects; For transparent rendering objects, the larger the renderOrder attribute, the earlier they are rendered. By default, if the value is 0, they are sorted according to the order in which they are added to the rendering queue. For opaque rendering objects, contrary to transparent rendering objects, larger values ​​are rendered in the front, and smaller values ​​are rendered in the back.

7. The method for generating a WebGPU real-time rendering pipeline according to claim 1, characterized in that: The S100 also includes: S000, initializing the engine; obtaining a 3D object to be tested, performing octree division on the 3D object to be tested, and obtaining an octree container object; Initializing the engine specifically includes: Initialize the WebGPU context, initialize the Shader system, initialize the global binding system, initialize the global RenderTarget, initialize the resource manager, and initialize the input system.

8. The method for generating a WebGPU real-time rendering pipeline according to claim 1, characterized in that: The method further comprises: When the rendering state of a certain three-dimensional object changes, and no other rendering object is in use in the current rendering pipeline, the current rendering pipeline is destroyed in asynchronous mode; The asynchronous mode is to schedule and destroy in fixed batches frame by frame.

Images