A Geographic Vector Data Rendering Method, Storage Medium, Device and Computer Program Product Based on WebGPU

Abstract

The present invention discloses a method, storage medium, device and computer program product for rendering geographic vector data based on WebGPU, including: creating and configuring a WebGPU context, canvas size and canvas grid size, and writing the canvas grid size into a uniform buffer; obtaining the geographic space information data to be rendered, converting it into geographic vector data, extracting vertex coordinates, and writing them into a vertex buffer; creating a data space to describe the vertex rendering state and writing it into a storage buffer; creating a binding group for the uniform buffer and the storage buffer to mark different data spaces; for the geographic vector data to be rendered, creating a compute shader, configuring a compute pipeline, and creating a compute pass; creating a render shader, configuring a render pipeline, creating a vertex buffer layout in the render pipeline, and creating a render pass in combination with the vertex buffer to complete the efficient rendering of the geographic vector data to be rendered.

Description

Technical Field

[0001] The present invention relates to the technical field of geographic information systems, and in particular, to a method for rendering geographic vector data based on WebGPU, a storage medium, a device, and a computer program product. Background Technique

[0002] With the development of Geographic Information System (GIS) technology, the application of geographic vector data is becoming more and more extensive. Traditional methods for rendering geographic vector data mainly rely on CPU and WebGL technologies. However, these technologies have problems such as slow rendering speed and performance bottlenecks when dealing with large-scale and high-complexity geographic data, and it is difficult to meet the requirements of real-time applications.

[0003] WebGPU is the next-generation graphics API, aiming to provide more efficient hardware-accelerated graphics processing capabilities. Compared with WebGL, WebGPU has higher performance and a more flexible programming model, and can better utilize the computing power of modern GPUs. Therefore, the method for loading and rendering geographic vector data based on WebGPU has important research value and application prospects.

[0004] Currently, there have been some studies and applications attempting to use WebGPU for graphics rendering, but there is no mature solution in the aspect of geographic vector data processing. Therefore, how to use WebGPU to achieve efficient rendering of geographic vector data is still a technical problem to be solved urgently. Summary of the Invention

[0005] Aiming at the problems existing in the prior art, the present invention provides a method for rendering geographic vector data based on WebGPU, a storage medium, a device, and a computer program product, which can achieve efficient processing and real-time rendering of geographic vector data.

[0006] To achieve the above technical purpose, the present invention adopts the following technical solutions: A method for rendering geographic vector data based on WebGPU, including the following steps:

[0007] Step 1, create and configure a WebGPU context, configure the canvas size and the canvas grid size, and write the canvas grid size into the uniform buffer;

[0008] Step 2, obtain the geographic space information data to be rendered for each frame from the GIS, convert it into geographic vector data, parse it, extract the vertex coordinates of the geographic vector data, and write them into the vertex buffer;

[0009] Step 3, create a data space according to the geographic vector data, use the data space to describe the vertex rendering state of the geographic vector data, and write it into the storage buffer;

[0010] Step 4: Create a binding group layout for the uniform buffer and the storage buffer, create a binding group based on the binding group layout to label different data spaces, and create a pipeline layout using the binding group layout;

[0011] Step 5: For a frame of geographical vector data to be rendered, create a compute shader according to the created pipeline layout, configure the compute pipeline by the compute shader, and create a compute pass for non-rendering tasks using the compute pipeline and the corresponding binding group;

[0012] Step 6: Create a render shader according to the created pipeline layout, configure the render pipeline by the render shader, configure the render pass using the vertex buffer and the render pipeline, and perform the rendering of the geographical vector data to be rendered for the corresponding frame;

[0013] Step 7: Repeat Steps 5 - 6 until the rendering process of the specified number of frames of geographical vector data to be rendered is completed.

[0014] Further, Step 2 includes the following sub-steps:

[0015] Step 2.1: Obtain the geographical space information data of each frame to be rendered from the GIS, and convert the geographical space information data into geographical vector data through an AJAX request according to the unified location identifier of the geographical space information data to be rendered;

[0016] Step 2.2: Parse the geographical vector data and extract the vertex coordinates of the geographical vector data;

[0017] Step 2.3: Wrap the extracted vertex coordinates into a vertex array through the typed array Float32Array in JavaScript and write it into the vertex buffer.

[0018] Further, the specific process of Step 3 is: successively split the vertex array corresponding to the geographical vector data into triangle units using the triangle triangulation algorithm, and create data spaces with the same number of frames as the geographical space information data to be rendered. The array length in each data space is equal to the number of triangle units corresponding to each frame of geographical vector data, and each digit stored in each array is used to describe the rendering state of the corresponding triangle unit, and all arrays are written into the storage buffer.

[0019] Further, the specific process of creating a compute shader in step 5 is as follows: Use the compute shader annotation @group(i) to access the data space of the binding group corresponding to the geographical vector data to be rendered in the i-th frame, use the compute shader annotation @binding(j) to access the j-th number in the corresponding data space, use the compute shader annotation @compute to mark the compute function of the compute shader, and use the compute shader annotation @workgroup_size to describe the size of the compute group in the compute shader, thereby obtaining the compute shader for the geographical vector data to be rendered in the i-th frame.

[0020] Further, the specific process of creating a render shader in step 6 is as follows: Use the render shader annotation @group(i) to access the data space of the binding group corresponding to the geographical vector data to be rendered in the i-th frame, use the render shader annotation @binding(j) to access the j-th number in the corresponding data space, use the render shader annotation @vertex to mark the vertex function of the render shader, use the render shader annotation @location(j) to obtain the vertex array corresponding to the j-th number in the corresponding data space, and use the render shader annotation @fragment to mark the fragment function of the render shader, thereby obtaining the render shader for the geographical vector data to be rendered in the i-th frame.

[0021] Further, the specific process of creating a render pipeline in step 6 is as follows: Configure the vertices in the render pipeline according to the vertex function of the render shader, and configure the fragments in the render pipeline according to the fragment function of the render shader.

[0022] Further, the specific process of creating a render pass in step 6 is as follows: In the render pipeline, by creating a vertex buffer layout, define a vertex data layout that matches the one used in the render shader for the vertex buffer. By calling the function context.getCurrentTexture().createView(), obtain the canvas configured in step 1. On the canvas, configure the render pass using the vertex buffer and the render pipeline according to the vertex buffer layout, and obtain the vertex coordinates of the geographical vector data to be rendered in the i-th frame for rendering.

[0023] Further, the present invention also provides a computer-readable storage medium storing a computer program, and the computer program causes a computer to execute the WebGPU-based geographical vector data rendering method described above.

[0024] Further, the present invention also provides an electronic device, including: a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the WebGPU-based geographical vector data rendering method described above is implemented.

[0025] Furthermore, the present invention also provides a computer program product, including a computer program which, when executed by a processor, implements the above-described method for rendering geographic vector data based on WebGPU.

[0026] Compared with the prior art, the present invention has the following beneficial effects:

[0027] The method for rendering geographic vector data based on WebGPU of the present invention makes full use of the high-performance graphics processing ability of WebGPU. Before rendering the geographic vector data, a pipeline layout is created using a binding group, reducing the overhead of layout state switching during rendering. Moreover, WebGPU supports compute shaders, which can further expand the scope of use of the GPU's parallel computing ability, thus significantly improving the rendering speed and efficiency of geographic vector data;

[0028] The method for rendering geographic vector data based on WebGPU of the present invention describes the vertex rendering state of geographic vector data by creating a data space, divides large-scale geographic vector data into chunks according to time sequence, and marks different data spaces through a binding group, thereby establishing an efficient index structure, realizing the efficient management of large-scale geographic vector data, and accelerating the loading and rendering process of geographic vector data;

[0029] The method for rendering geographic vector data based on WebGPU of the present invention can support various geographic vector data formats and has broad application prospects in fields such as GIS, navigation systems, and virtual reality. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] Figure 1 is a specific flowchart of the method for rendering geographic vector data based on WebGPU of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0031] The technical solutions of the present invention will be further explained and illustrated below with reference to the accompanying drawings.

[0032] As Figure 1 is a specific flowchart of the method for rendering geographic vector data based on WebGPU of the present invention, and this method for rendering geographic vector data specifically includes the following steps:

[0033] Step 1: Initialize WebGPU, which specifically includes the following process:

[0034] Step 1.1: Check whether navigator.gpu exists in the browser environment. If not, switch the browser to a browser that supports WebGPU. Check whether the GPU provides an adapter navigator.gpu.requestAdapter( ). If not, the device needs to be configured with an independent graphics card;

[0035] Step 1.2: Obtain the GPU adapter through adapter.requestDevice( ), and get the device from the adapter. All subsequent steps need to obtain the corresponding interfaces from the device.

[0036] Step 1.3: Configure the WebGPU context and canvas. Specifically, create a canvas, pick the WebGPU context as "webgpu", obtain the general best configuration navigator.gpu.getPreferredCanvasFormat( ), and configure the canvas using this best configuration and the device.

[0037] Step 2: Obtain the geospatial information data to be rendered for each frame, convert it into geospatial vector data, parse it, and extract the vertex coordinates of the geospatial vector data. It can support various geospatial vector data formats and has broad application prospects in fields such as GIS, navigation systems, and virtual reality. Specifically, it includes the following sub-steps:

[0038] Step 2.1: It is possible to obtain the geospatial information data to be rendered for each frame from the GIS. According to the unified location identifier of the geospatial information data to be rendered, through an AJAX request, convert the geospatial information data to be rendered into geospatial vector data.

[0039] Step 2.2: Parse the geospatial vector data and extract the vertex coordinates of the geospatial vector data.

[0040] Step 2.3: Package the extracted vertex coordinates into a vertex array through Float32Array in the typed array TypeArray in JavaScript to adapt to the digital storage format required by the GPU.

[0041] Step 3: Data preprocessing, including the following processes:

[0042] Step 3.1: Create a data space based on the geospatial vector data, and use the data space to describe the vertex rendering state of the geospatial vector data, so as to divide the large-scale geospatial vector data into chunks according to time sequence, realize the efficient management of the large-scale geospatial vector data, and speed up the subsequent geospatial vector data rendering process. Specifically,

[0043] Successively split the vertex array corresponding to the geospatial vector data into triangle units using the triangle triangulation algorithm. The triangle triangulation algorithm can adopt the splitting logic of the Ear Clipping Method, traverse the polygon formed by the vertex array, find the triangle units composed of convex vertices, and successively remove the triangle units from the polygon until only three vertex arrays remain in the polygon.

[0044] Create a data space with the same number of frames as the geospatial information data to be rendered. The length of the array in each data space is equal to the number of triangular units corresponding to each frame of geographic vector data. And the number stored in each bit of each array is used to describe the rendering state of the corresponding triangular unit. It can be represented by 1 indicating that the triangular unit needs to be drawn, and 0 indicating that the triangular unit does not need to be drawn. This can ensure that the rendering state of the triangular unit can be accessed each time, guiding the rendering process and improving the rendering efficiency.

[0045] Step 3.2: Configure the canvas grid size. Generally, the canvas grid size is set to 128, and the canvas size is 128×128. Since the default origin of the webGPU canvas is at the center position, therefore, the corresponding coordinates of the upper right corner of the canvas are (64, 64), and the corresponding coordinates of the lower left corner are (-64, -64).

[0046] Step 4: Create WebGPU resources, including the following processes:

[0047] Step 4.1: Create a vertex buffer by calling the device.createbuffer function and configuring the usage parameter in the object parameters to GPUBufferUsage.VERTEX, and write the vertex array into the vertex buffer. The vertex buffer is specifically used to store vertex coordinate information and can define the shape of the geometry in data graphics rendering.

[0048] Step 4.2: Create a uniform buffer by calling the device.createbuffer function and configuring the usage parameter in the object parameters to GPUBufferUsage.UNIFORM, and write the canvas grid size into the uniform buffer. The data in the uniform buffer is used every time a draw is made and usually does not change.

[0049] Step 4.3: Create a storage buffer by calling the device.createbuffer function and configuring the usage parameter in the object parameters to GPUBufferUsage.STORAGE, and write all arrays into the storage buffer. The storage buffer stores the dynamic data of whether the triangular unit is rendered, which can improve the parallel computing efficiency.

[0050] Step 5: Configure WebGPU resources, including the following processes:

[0051] Step 5.1: After writing the data space into the storage buffer, it is still just simple binary data. It is necessary to configure the vertex buffer layout for the vertex buffer to describe to the computer how to read the entire binary data. Specifically, it is necessary to describe the byte size of each number in the data space corresponding to the vertex array, how many numbers are skipped in the vertex array to represent a vertex coordinate, the storage format of the vertex array, and from which digit in the data space to start reading;

[0052] Step 5.2: Call the device.createBindGroupLayout method to create a bind group layout for the uniform buffer and the storage buffer. Here, device is a GPU device object. Create a bind group according to the bind group layout to manage the storage buffer. Mark different data spaces through the bind group, establish an efficient index structure, and achieve fast loading and rendering of specified geographic vector data;

[0053] Step 5.3: For a frame of geographic vector data to be rendered, create a compute shader according to the created pipeline layout. Specifically, use the compute shader annotation @group(i) to access the data space of the bind group corresponding to the i-th frame of geographic vector data to be rendered, use the compute shader annotation @binding(j) to access the j-th number in the corresponding data space, use the compute shader annotation @compute to mark the compute function of the compute shader, and use the compute shader annotation @workgroup_size to describe the compute group size in the compute shader to obtain the compute shader for the i-th frame of geographic vector data to be rendered. WebGPU natively supports compute shaders and can efficiently utilize the parallel computing power of the GPU.

[0054] Step 5.4: For a frame of geographic vector data to be rendered, create a render shader according to the created pipeline layout. Specifically, use the render shader annotation @group(i) to access the data space of the bind group corresponding to the i-th frame of geographic vector data to be rendered, use the render shader annotation @binding(j) to access the j-th number in the corresponding data space, use the render shader annotation @vertex to mark the vertex function of the render shader, use the render shader annotation @location(j) to obtain the vertex array corresponding to the j-th number in the corresponding data space, and use the render shader annotation @fragment to mark the fragment function of the render shader to obtain the render shader for the i-th frame of geographic vector data to be rendered. After the compute shader finishes processing, the render shader obtains the geographic vector data to be rendered through annotations, avoiding frequent data state switches in the render shader and reducing performance overhead.

[0055] Step 6: Create a compute pipeline and a render pipeline, including the following process:

[0056] Step 6.1: Call the device.createPipelineLayout( ) function to create a pipeline layout for the binding group layout, which is used to control the way the compute shader and the render shader access GPU resources;

[0057] Step 6.2: Call the device.createComputePipeline( ) function to configure the compute pipeline according to the compute shader and the pipeline layout. The compute pipeline flexibly binds GPU resources through the pipeline layout, avoiding frequent state switches of the pipeline layout and reducing performance overhead;

[0058] Step 6.3: Call the device.createRenderPipeline( ) function to configure the render pipeline according to the render shader and the pipeline layout. Specifically, configure the vertices in the render pipeline according to the vertex function of the render shader, configure the fragments in the render pipeline according to the fragment function of the render shader, use the vertex buffer layout created in Step 5.1 as the vertex buffer layout of this render pipeline, define a matching vertex data layout for the vertex buffer within the render shader, and set the output position of the fragment.

[0059] Step 7: Create a compute channel and a render channel, including the following processes:

[0060] Step 7.1: Create a command encoder: device.createCommandEncoder( );

[0061] Step 7.2: Create a compute channel through the beginComputedPass function of the command encoder, configure the compute channel using the compute pipeline and the corresponding binding group, and allocate work items for the compute channel and submit them to the GPU for execution. In terms of configuration, the compute channel does not need to depend on the render channel and can flexibly handle non-rendering tasks;

[0062] Step 7.3: Create a render channel through the beginRenderPass function of the command encoder. By calling the context.getCurrentTexture().createView() function, obtain the canvas configured in Step 1. Configure the render channel on the canvas using the vertex buffer and the render pipeline, obtain the vertex coordinates of the geographical vector data to be rendered in the i-th frame for rendering. The render channel can output the results to multiple target textures, allowing for more complex visual effects and reducing multiple draw calls; and set the number of draw points and the number of draw times of the render channel according to the actual situation, and submit draw instructions to the GPU;

[0063] Step 8, Loop update. Specifically, through the requestAnimationFrame of the browser or a specified number of frames, repeat steps 5.3 - 7.4 to complete the dynamic rendering process of the geographic vector data.

[0064] The method for rendering geographic vector data based on WebGPU of the present invention utilizes WebGPU technology to achieve the rendering of geographic vector data, fully leveraging the high-performance graphics processing capabilities of WebGPU. Before rendering the geographic vector data, a pipeline layout is created using a binding group, reducing the overhead of layout state switching during rendering. As a result, WebGPU is 3.5 times faster than traditional WebGL in processing pixels, and WebGPU supports compute shaders, which can further expand the scope of use of the GPU's parallel computing capabilities, thus significantly improving the rendering speed and efficiency of geographic vector data.

[0065] In one technical solution of the present invention, there is also provided a computer-readable storage medium storing a computer program, and the computer program causes a computer to execute the method for rendering geographic vector data based on WebGPU.

[0066] In one technical solution of the present invention, there is also provided an electronic device, including: a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the method for rendering geographic vector data based on WebGPU is implemented.

[0067] In one technical solution of the present invention, there is also provided a computer program product including a computer program, and when the computer program is executed by a processor, the method for rendering geographic vector data based on WebGPU is implemented.

[0068] In one technical solution of the present invention, there is also provided a system for rendering geographic vector data based on WebGPU, including: a WebGPU configuration module, a data parsing module, a data space, a binding module, a non-rendering task execution module, and a rendering module;

[0069] The WebGPU configuration module is used to create and configure a WebGPU context, configure the canvas size and the canvas grid size, and write the canvas grid size into a uniform buffer;

[0070] The data parsing module is used to convert the geographic space information data to be rendered into geographic vector data, and parse and extract the vertex coordinates of the geographic vector data and write them into a vertex buffer;

[0071] The data space is used to describe the vertex rendering state of the geographic vector data and write it into a storage buffer;

[0072] The binding module creates a binding group layout for the uniform buffer and the storage buffer, creates a binding group according to the binding group layout to label different data spaces, and creates a pipeline layout using the binding group layout;

[0073] The non-rendering task execution module is used to create a compute shader for the geographical vector data to be rendered according to the created pipeline layout, configure the compute pipeline by the compute shader, and create a compute channel for non-rendering tasks using the compute pipeline and the corresponding binding group;

[0074] The rendering module is used to create a render shader for the geographical vector data to be rendered according to the created pipeline layout, configure the render pipeline by the render shader, create a vertex buffer layout according to the vertex buffer in the render pipeline, and obtain vertex coordinates according to the vertex buffer layout to complete the rendering of the geographical vector data to be rendered.

[0075] In the embodiments disclosed in the present application, the computer storage medium may be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. The computer storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of the computer storage medium would include an electrical connection based on one or more wires, a portable computer 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.

[0076] Those of ordinary skill in the art can realize that the units and algorithm steps of the examples described in connection with the embodiments disclosed in the present application can be implemented by electronic hardware or a combination of computer software and electronic hardware. Whether these functions are executed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present application.

[0077] The above are only the preferred embodiments of the present invention, and the protection scope of the present invention is not limited to the above embodiments. All technical solutions falling within the concept of the present invention belong to the protection scope of the present invention. It should be noted that for those of ordinary skill in the art in the technical field, several improvements and refinements made without departing from the principle of the present invention should be regarded as the protection scope of the present invention.

Claims

1. A geographic vector data rendering method based on WebGPU, characterized in that: The steps include: Step 1. Create and configure the WebGPU context, configure the canvas size and canvas grid size, and write the canvas grid size to the uniform buffer. Step 2: Obtain each frame of geographic spatial information data to be rendered, convert it into geographic vector data, parse it, extract the vertex coordinates of the geographic vector data, and write it into the vertex buffer; Step 3, creating a data space according to the geographic vector data, using the data space to describe the vertex rendering state of the geographic vector data, and writing it into a storage buffer. Specifically, the vertex array corresponding to the geographic vector data is sequentially split into triangle units using a triangulation algorithm, and a data space equal to the number of frames of geographic spatial information data to be rendered is created, the array length in each data space is equal to the number of triangle units corresponding to each frame of geographic vector data, and each digit stored in each array is used to describe the rendering state of the corresponding triangle unit, and all arrays are written into the storage buffer; Step 4: Create a binding group layout for the uniform buffer and the storage buffer, create binding groups according to the binding group layout to mark different data spaces, and create a pipeline layout using the binding group layout. Step 5: For a certain frame of geographic vector data to be rendered, a compute shader is created according to the created pipeline layout, the compute shader configures the compute pipeline, and the compute pipeline and the corresponding binding group are used to create a compute channel for non-rendering tasks; Step 6: Create a rendering shader according to the created pipeline layout, configure the rendering pipeline by the rendering shader, use the vertex buffer and the rendering pipeline to configure the rendering channel, and render the geographic vector data to be rendered in the corresponding frame; Step 7: Repeat steps 5-6 until the rendering process of the geographic vector data to be rendered for the specified number of frames is completed.

2. According to the WebGPU-based geographic vector data rendering method of claim 1, it is characterized in that: Step 2 includes the following sub-steps: Step 2.1, obtaining each frame of geospatial information data to be rendered, and converting the geospatial information data to be rendered into geographic vector data through an AJAX request according to a unified positioning identifier of the geospatial information data to be rendered; Step 2.2, parsing the geographic vector data to extract vertex coordinates of the geographic vector data; Step 2.3: Package the extracted vertex coordinates into a vertex array through the typed array Float32Array in JavaScript and write it into the vertex buffer.

3. According to the WebGPU-based geographic vector data rendering method of claim 2, it is characterized in that: The specific process of creating a compute shader in step 5 is: use the compute shader annotation @group(i) to access the data space of the binding group corresponding to the geographic vector data to be rendered in the i-th frame, use the compute shader annotation @binding(j) to access the j-th number in the corresponding data space, use the compute shader annotation @compute to mark the calculation function of the compute shader, use the compute shader annotation @workgroup_size to describe the calculation group size in the compute shader, and obtain the compute shader for the geographic vector data to be rendered in the i-th frame.

4. According to the WebGPU-based geographic vector data rendering method of claim 3, it is characterized in that: The specific process of creating a rendering shader in step 6 is: use the rendering shader annotation @group(i) to access the data space of the binding group corresponding to the geographic vector data to be rendered in the i-th frame, use the rendering shader annotation @binding(j) to access the j-th number in the corresponding data space, use the rendering shader annotation @vertex to mark the vertex function of the rendering shader, use the rendering shader annotation @location(j) to obtain the vertex array corresponding to the j-th number in the corresponding data space, use the rendering shader annotation @fragment to mark the fragment function of the rendering shader, and obtain the rendering shader for the geographic vector data to be rendered in the i-th frame.

5. According to the WebGPU-based geographic vector data rendering method of claim 4, it is characterized in that: The specific process of creating the rendering pipeline in step 6 is: configuring the vertices in the rendering pipeline according to the vertex function of the rendering shader, and configuring the fragments in the rendering pipeline according to the fragment function of the rendering shader.

6. The method for rendering geographic vector data based on WebGPU according to claim 5, characterized in that: The specific process of creating a rendering channel in step 6 is: by creating a vertex buffer layout in the rendering pipeline, define a vertex data layout for the vertex buffer that matches the vertex data layout used in the rendering shader, obtain the canvas configured in step 1 by calling the context.getCurrentTexture().createView() function, configure the rendering channel on the canvas according to the vertex buffer layout using the vertex buffer and the rendering pipeline, and obtain the vertex coordinates of the geographic vector data to be rendered in the i-th frame for rendering.

7. A computer-readable storage medium storing a computer program, characterized in that: The computer program enables a computer to execute the WebGPU-based geographic vector data rendering method as described in any one of claims 1 to 6.

8. An electronic device, characterized in that: include: A memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the method for rendering geographic vector data based on WebGPU as described in any one of claims 1 to 6 is implemented.

9. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the WebGPU-based geographic vector data rendering method described in any one of claims 1 to 6 is implemented.

Images