CN-122023627-A - WebAssembly-based WebGPU three-dimensional rendering method and system

CN122023627ACN 122023627 ACN122023627 ACN 122023627ACN-122023627-A

Abstract

The invention relates to the technical field of graphic instruction flow, in particular to a WebGPU three-dimensional rendering method and system based on WebAssembly, comprising the following steps of constructing WebAssembly linear memory space of Std140 layout standard, applying for sharing an array buffer area, establishing a direct mapping channel with the WebGPU buffer area, starting a Web workbench multithread parallel access buffer area, utilizing a view cone rejection algorithm to screen view nodes, calculating vertex coordinate data, writing into a geometric area, calling data in an instance to directly encode a rendering instruction to generate a command buffer object, utilizing a depth ordering algorithm to rearrange and then submitting the command buffer object to an equipment queue. According to the invention, the mapping channel is established to eliminate cross-language data copying expenditure, the multithreading parallel access sharing area is started to calculate, the full-link zero-copying interaction of the rendering pipeline is realized, and the graphic instruction flow efficiency and the picture rendering frame rate stability under a complex three-dimensional scene are improved.

Inventors

CHEN XICHUANG
LIANG MING
REN LING

Assignees

深圳数生科技有限公司

Dates

Publication Date: 20260512
Application Date: 20260407

Claims (9)

1. WebAssembly-based WebGPU three-dimensional rendering method, which is characterized by comprising the following steps: S1, constructing WebAssembly linear memory space based on Std140 layout standard, applying for a shared array buffer area, establishing a direct mapping channel of the shared array buffer area and a WebGPU buffer area, and dividing the shared array buffer area into a geometric data area and a unified variable area; S2, starting a WebWorker multithread to access the shared array buffer area in parallel, screening visual scene nodes under the current view point by using a view cone rejection algorithm, calculating three-dimensional vertex coordinate data, and writing the three-dimensional vertex coordinate data into the geometric data area; the generating process of the visible scene node in S22 includes: Acquiring six clipping plane parameters of a current view cone and surrounding sphere radius of scene node And the center coordinates For each clipping plane, calculating the center coordinates by a point-to-plane distance formula Directed distance to the plane ; If the calculated directional distance is Satisfy the following requirements If yes, judging that the scene node is completely positioned outside the view cone, directly discarding the node, otherwise, reserving the node as the view-capable scene node; The directed distance The calculation logic of (1) follows the formula: ; Wherein, the Representing the directed distance of the scene node center to the clipping plane, Representing the x-component of the normal vector of the clipping plane, Representing the y-component of the normal vector of the clipping plane, Representing the z-component of the normal vector of the clipping plane, A distance parameter representing the clipping plane to the origin, Representing the x-coordinate of the center of the scene node, Representing the y-coordinate of the center of the scene node, Representing the z-coordinate of the center of the scene node, A bounding sphere radius representing a scene node; s3, calling the three-dimensional vertex coordinate data in the geometric data area in WebAssembly examples, directly encoding a rendering channel instruction, and generating a command buffer object; And S4, collecting all the command buffer objects, carrying out rendering level rearrangement on the command buffer objects by using a depth ordering algorithm, and submitting the rearranged instruction sequences to WebGPU equipment queues.
2. The WebAssembly-based WebGPU three-dimensional rendering method according to claim 1, wherein the step of S1 is specifically: S11, analyzing a memory alignment specification of Std140 layout standard, calculating byte offset of a basic scalar type and a composite structure type, and constructing a linear memory address mapping table meeting sixteen byte alignment requirements; s12, applying for a binary memory block with a fixed length in a main thread as the shared array buffer area, importing the buffer area through WebAssembly memory instance interfaces, and directly binding the physical address of the shared array buffer area to the bottom storage handle of the WebGPU buffer area by using a buffer area mapping protocol; S13, according to the size pre-estimated values of the static grid model and the dynamic uniform block in the scene, setting a read-write pointer offset in the shared array buffer area, physically dividing the memory space into the geometric data area for storing vertex attribute data and the uniform variable area for storing the global transformation matrix, and respectively setting mutual exclusion lock flag bits.
3. The WebAssembly-based WebGPU three-dimensional rendering method according to claim 1, wherein the step of S2 is specifically: s21, instantiating a plurality of WebWorker threads and distributing scene graph node indexes, wherein each thread independently acquires a view projection matrix of a current camera and a model matrix of a scene node, locks the write-in authority of the shared array buffer area through atomic operation, and establishes a parallel data access context between multiple threads and a shared memory; S22, traversing scene nodes distributed to a current thread, acquiring axis alignment bounding box information of the nodes, detecting intersection of the bounding boxes by utilizing a view cone six-plane equation, removing non-visual nodes positioned outside the view cone, and generating the visual scene nodes needing to participate in rendering; s23, aiming at the visual scene node, calculating the three-dimensional vertex coordinate data in world space according to model transformation logic, directly filling a calculation result to a corresponding offset address of the geometric data area by using a preset typed array view, and releasing an atomic lock after writing is completed.
4. The WebAssembly-based WebGPU three-dimensional rendering method according to claim 1, wherein the step of S3 is specifically: S31, creating a rendering channel encoder in a WebAssembly module, configuring pipeline layout and a shader stage of a graphic rendering pipeline, and binding the WebGPU buffer into a vertex buffer and a binding group resource; S32, recording a drawing index instruction and a drawing indirect instruction in an encoder according to the index range of the visual scene node, configuring a primitive assembly mode and a rasterization state, and generating a rendering instruction sequence; And S33, finishing the recording process of the rendering channel encoder, packaging the accumulated instruction sequences in the encoder into independent command buffer objects, and returning the main memory address handles of the objects to the main thread.
5. The WebAssembly-based WebGPU three-dimensional rendering method according to claim 1, wherein the step of S4 is specifically: S41, setting a command synchronous fence in a main thread, waiting for all the WebWorker threads to finish the coding task in S3, collecting the command buffer objects generated by a plurality of threads, and constructing an original command queue to be submitted; s42, obtaining the coordinates of a scene node center point corresponding to each command buffer object, calculating Euclidean distance from the center point to the current camera position as a depth ordering key value, performing near-to-far rapid ordering on opaque objects according to the transparent attribute of rendering materials, performing far-to-near insertion ordering on transparent objects, and generating an instruction sequence after the rearrangement of the rendering layers; S43, calling a queue submitting interface of WebGPU equipment, sending the rearranged instruction sequence to a command queue of the graphic processing unit in batch at one time, triggering rasterization and pixel coloring operations of a hardware layer, and finishing rendering output of a frame buffer zone.
6. A WebGPU three-dimensional rendering method based on WebAssembly as claimed in claim 3 wherein the calculation of the three-dimensional vertex coordinate data of S23 includes: Obtaining local coordinate system vertex data of scene nodes, a model matrix comprising translation, rotation and scaling information and a view matrix comprising camera view transformation information, and performing matrix multiplication operation in parallel by using a SIMD instruction set; Sequentially multiplying the model matrix and the view matrix by the vertex data of the local coordinate system to generate vertex coordinates in the monitoring space, and iteratively combining the projection matrix to perform perspective division to generate the standardized three-dimensional vertex coordinate data.
7. The WebAssembly-based WebGPU three-dimensional rendering method of claim 5, wherein the generating the sequence of instructions after the rearrangement of rendering levels of S42 includes: Traversing all the command buffer objects to be rendered, extracting the geometric centers of bounding boxes of the associated geometric body, calculating a depth value by using the difference modular length of the camera position vector and the geometric center vector, and quantizing the depth value into 32-bit unsigned integers serving as a sequencing key; Constructing an index bucket based on ascending order of key values for instruction objects marked as opaque materials, constructing an index bucket based on descending order of key values for instruction objects marked as semitransparent materials, and performing bit operation sequencing on elements in the bucket by using a radix sequencing algorithm; And placing the opaque instruction sequence with the ordered sequence at the front end, placing the semitransparent instruction sequence with the ordered sequence at the rear end, and merging to generate the instruction sequence with the rearranged rendering level.
8. The WebAssembly-based WebGPU three-dimensional rendering method of claim 2, wherein the partitioning of the shared array buffer of S13 includes: writing an atomic counter in a reserved area of the head of the shared array buffer area, which is used for recording a dynamic writing position pointer of the geometric data area in real time, and initializing a geometric data initial offset and a unified variable initial offset; According to the minimum buffer binding alignment byte number specified in Std140 layout standard, carrying out upward rounding correction on the head address of each data block of the unified variable area, calculating the length of a filling byte, and establishing a unified variable block with the initial address being 256 byte integer times; A partition descriptor table is established in a stack segment of WebAssembly linear memory, and the starting addresses, capacity sizes and current use amounts of a plurality of areas are recorded for dynamically applying for writing space through an atomic addition instruction when a multithread runs.
9. WebAssembly-based WebGPU three-dimensional rendering system for implementing a WebAssembly-based WebGPU three-dimensional rendering method of any one of claims 1 to 8, the system comprising: The memory construction module is used for constructing WebAssembly linear memory space based on Std140 layout standard, applying for a shared array buffer area, establishing a direct mapping channel of the shared array buffer area and the WebGPU buffer area, and dividing the shared array buffer area into a geometric data area and a unified variable area; the parallel computing module is used for starting the WebWorker multithreading to access the shared array buffer area in parallel, screening visual scene nodes under the current view point by utilizing a view cone rejection algorithm, computing three-dimensional vertex coordinate data, and writing the three-dimensional vertex coordinate data into the geometric data area; the rendering coding module is used for calling the three-dimensional vertex coordinate data in the geometric data area in WebAssembly examples, directly coding a rendering channel instruction and generating a command buffer object; And the sequencing and submitting module is used for collecting all the command buffer objects, performing rendering level rearrangement on the command buffer objects by using a depth sequencing algorithm, and submitting the rearranged instruction sequences to WebGPU equipment queues.

Description

WebAssembly-based WebGPU three-dimensional rendering method and system Technical Field The invention relates to the technical field of graphic instruction flow, in particular to a WebAssembly-based WebGPU three-dimensional rendering method and system. Background Graphics instruction streams relate to data exchange and command stream mechanisms between different programs or processes, and more particularly, to how to efficiently cooperate software logic and hardware resources in heterogeneous computing environments, and this field is directed to reducing system-level interaction latency and improving throughput by optimizing interface protocols and memory management policies. The conventional WebGPU three-dimensional rendering system mainly relies on JavaScript language as a glue layer, and sequentially invokes WebGPU API through a main thread of a browser to perform configuration of a rendering pipeline, binding of resources and submission of drawing commands, wherein data usually needs to be converted and copied between a JavaScript heap memory and a graphics driver buffer. The traditional WebGPU three-dimensional rendering system mainly depends on JavaScript language as a glue layer, and sequentially calls an API (application program interface) through a main thread of a browser to perform rendering pipeline configuration and resource binding, serial blocking risks exist in the rendering command submitting process, data are required to be converted and copied between a JavaScript heap memory and a graphic driving buffer zone for multiple times, a frequent garbage collection mechanism is easy to cause frame rate jitter, a single-thread execution model limits the exertion of the calculation potential of a multi-core processor, and therefore geometric data throughput is limited in a large-scale scene and CPU and GPU synchronous waiting time is too long. Disclosure of Invention The invention aims to solve the defects in the prior art, and provides a WebGPU three-dimensional rendering method and system based on WebAssembly. In order to achieve the above purpose, the invention adopts the following technical scheme that the WebGPU three-dimensional rendering method based on WebAssembly comprises the following steps: S1, constructing WebAssembly linear memory space based on Std140 layout standard, applying for a shared array buffer area, establishing a direct mapping channel of the shared array buffer area and a WebGPU buffer area, and dividing the shared array buffer area into a geometric data area and a unified variable area; S2, starting a WebWorker multithread to access the shared array buffer area in parallel, screening visual scene nodes under the current view point by using a view cone rejection algorithm, calculating three-dimensional vertex coordinate data, and writing the three-dimensional vertex coordinate data into the geometric data area; s3, calling the three-dimensional vertex coordinate data in the geometric data area in WebAssembly examples, directly encoding a rendering channel instruction, and generating a command buffer object; And S4, collecting all the command buffer objects, carrying out rendering level rearrangement on the command buffer objects by using a depth ordering algorithm, and submitting the rearranged instruction sequences to WebGPU equipment queues. As a further scheme of the present invention, the step S1 specifically includes: S11, analyzing a memory alignment specification of Std140 layout standard, calculating byte offset of a basic scalar type and a composite structure type, and constructing a linear memory address mapping table meeting sixteen byte alignment requirements; s12, applying for a binary memory block with a fixed length in a main thread as the shared array buffer area, importing the buffer area through WebAssembly memory instance interfaces, and directly binding the physical address of the shared array buffer area to the bottom storage handle of the WebGPU buffer area by using a buffer area mapping protocol; S13, according to the size pre-estimated values of the static grid model and the dynamic uniform block in the scene, setting a read-write pointer offset in the shared array buffer area, physically dividing the memory space into the geometric data area for storing vertex attribute data and the uniform variable area for storing the global transformation matrix, and respectively setting mutual exclusion lock flag bits. As a further scheme of the present invention, the step S2 specifically includes: s21, instantiating a plurality of WebWorker threads and distributing scene graph node indexes, wherein each thread independently acquires a view projection matrix of a current camera and a model matrix of a scene node, locks the write-in authority of the shared array buffer area through atomic operation, and establishes a parallel data access context between multiple threads and a shared memory; S22, traversing scene nodes distributed to a current thread, acquiring a