Web-side large-scale model performance optimization method

Abstract

The invention relates to the technical field of Web-end 3D model rendering, in particular to a web-end large-scale model performance optimization method, which remarkably improves the rendering efficiency and user experience of a Web-end 3D model through multiple technical means of WebWorker multi-process rendering optimization, dynamic data source optimization and cross-level geometric merging optimization, and improves the rendering efficiency and user experience of the Web-end 3D model through WebWorker multi-process rendering optimization. A resource request and a data analysis task are migrated to a background thread, a branch port parallel request technology is utilized to avoid blockage of a main thread and ensure fluency and responsiveness of a user interface, cross-level geometric combination optimization combines model components based on spatial proximity to generate a single Buffer Geometry, the number of drawing calling times is reduced, memory occupation is reduced, and the drawing efficiency is improved. And meanwhile, necessary model definition is kept.

Description

Technical Field

[0001] The present invention relates to the technical field of Web - end 3D model rendering, and specifically provides a method for optimizing the performance of large models on the Web - end. Background Technique

[0002] With the popularization of technologies such as WebGL 2.0 and WebAssembly, 3D model rendering based on the browser has become the core interaction method in fields such as industrial design and digital twins. The current mainstream implementation solutions usually adopt front - end rendering frameworks such as Three.js and Babylon.js, load model files (such as glTF and FBX formats) through the Ajax or WebSocket protocol, and use WebGL for real - time rendering. However, when dealing with large models with tens of millions of polygons, the existing technical system has the following significant defects:

[0003] ‌Thread - blocking problem during model loading‌

[0004] Due to the single - thread running mechanism of the browser (the main thread is responsible for DOM operations, JavaScript parsing, and rendering task synchronization), when the volume of the model file exceeds 500MB, operations such as its network requests and data parsing (such as vertex coordinate decompression and texture decoding) will occupy the main - thread resources for a long time. This directly leads to page interaction freezing (UI Thread Blocking), and extreme scenarios where the user waiting time exceeds 10 seconds occur frequently, seriously affecting the operation experience.

[0005] ‌Low efficiency of model data processing and rendering‌

[0006] The existing solutions lack pre - processing optimization for the parsed model data. For example:

[0007] ‌Vertex data processing bottleneck‌: Building the vertex buffer of tens of millions of polygons requires more than 200ms of main - thread calculation time, resulting in a delay in the first - frame rendering;

[0008] ‌Rendering pipeline blocking‌: Computational tasks such as dynamic frustum culling and occlusion culling are coupled with the rendering thread, resulting in a fluctuation of more than 30% in the rendering time per frame (FPS);

[0009] ‌Insufficient utilization of multi - threads‌: The multi - process ability of WebWorker is not effectively integrated, and tasks such as geometric calculation and physical simulation are still concentrated on the main thread.

[0010] ‌Limitations of dynamic loading strategies‌

[0011] Although the existing LOD (Level of Detail) technology can reduce the rendering load by switching the level of detail, there are two major defects in its implementation:

[0012] ‌Rigid switching threshold‌: The static switching rule based on the camera distance cannot adapt to complex perspective changes, easily causing visual defects of sudden changes in model details;

[0013] ‌Lack of geometric merging‌: Cross-Level Geometry Merging is not performed on the model components of adjacent levels, resulting in an exponential increase in the number of DrawCalls as the model complexity increases.

[0014] ‌Resource competition between business logic and rendering tasks‌

[0015] Other front-end business logics (such as user input response, real-time data synchronization) share the main thread resources with the rendering task. When the number of model patches exceeds 5 million, the garbage collection (GC) mechanism of JavaScript is frequently triggered, further exacerbating the phenomenon of frame drop. Summary of the Invention

[0016] (1) Technical problems to be solved

[0017] In view of the deficiencies of the prior art, the present invention provides a method for optimizing the performance of large models on the web.

[0018] (2) Technical solutions

[0019] To achieve the above object, the present invention provides the following technical solutions: A method for optimizing the performance of large models on the web according to the present invention includes the following steps:

[0020] ‌WebWorker multi-process rendering optimization‌:

[0021] Migrate the network request and data parsing operations of the model resources to the WebWorker process, and avoid blocking the main thread through the multi-port parallel request technology;

[0022] Pre-compute the bounding box of the model sub-components in the Worker process, and the bounding box is Bounding Box or Bounding Sphere, and transmit the structured data to the main thread through postMessage for frustum culling and occlusion culling;

[0023] ‌Dynamic data source optimization‌:

[0024] Perform face number simplification, LOD grading and instantiation processing on the original model to generate a multi-level simplified model and instantiated component data;

[0025] Dynamically switch the model detail level according to the camera distance, and achieve smooth transition through the THREE.LOD object;

[0026] Cross-level geometry merging optimization:

[0027] Merge model components across levels based on spatial proximity to generate the merged BufferGeometry;

[0028] Control the geometry merging granularity through adjustable merging threshold parameters to balance rendering performance and model clarity.

[0029] Preferably, the WebWorker multi-process rendering optimization further includes:

[0030] Create at least two independent communication ports in the Worker process, which are respectively used for model resource requests and data parsing, and the main thread only receives the deserialized rendering instruction data;

[0031] In the model loading stage, calculate the minimum bounding box for each separable component and store it as a {min: Vector3, max: Vector3} structure to accelerate frustum culling judgment;

[0032] Skip the rendering of completely occluded components through a custom occlusion culling algorithm based on the spatial overlap detection of component bounding boxes.

[0033] More preferably, the dynamic data source optimization further includes:

[0034] Model simplification: Use a face reduction tool to reduce the number of model faces to 10%-30% of the original model while retaining the key topology;

[0035] LOD grading: Create three detail levels of high, medium, and low for the same model and set dynamic switching distance thresholds, where the number of vertices in the low detail level does not exceed 20% of the high detail level;

[0036] Instancing processing: Generate THREE.InstancedMesh for repeated components to reduce the number of DrawCall by sharing geometry data and materials.

[0037] Most preferably, the specific steps of the cross-level geometry merging optimization include:

[0038] Create a basic rendering scene, including perspective camera, renderer, and helper basic elements;

[0039] Loop to create multiple model component bounding boxes and set random positions for each bounding box;

[0040] Perform skip-order merging, create a bounding box based on THREE.Box3(), and simulate camera movement in the animation loop to achieve frustum culling.

[0041] Preferably, the cross-level geometry merging optimization further includes:

[0042] Spatial octree construction: Divide the scene space into an octree structure, traverse the model parts and insert them into the corresponding tree nodes;

[0043] Skip-order merging strategy: Merge adjacent geometries across levels within the same octree node to generate a single BufferGeometry;

[0044] Parameterized control: Set the merging threshold parameter to control the maximum spatial distance allowed for merging, and set the detail weight parameter to retain the geometric details of key parts.

[0045] More preferably, the execution process of the skip-order merging strategy is as follows:

[0046] Call THREE.Box3().setFromObject(mesh) for each model part to generate a bounding box;

[0047] Allocate the part to the corresponding octree node according to the center coordinates of the bounding box;

[0048] If there are multiple parts within the same node and the merging threshold conditions are met, merge their vertex and index data into a single geometry.

[0049] Most preferably, the custom occlusion culling algorithm includes the following steps:

[0050] Detect the occlusion relationship of the rendered parts in the current frame based on the depth buffer;

[0051] Perform a fast occlusion test on the bounding boxes of the subsequent parts to be rendered, and skip rendering if completely occluded.

[0052] Preferably, the dynamic switching rule of the LOD grading is as follows:

[0053] When the distance d between the camera and the model satisfies d ≥ 100 units, load the low-detail model;

[0054] When 50 units ≤ d < 100 units, load the medium-detail model;

[0055] When d < 50 units, load the high-detail model.

[0056] (III) Beneficial effects

[0057] Compared with the prior art, the present invention provides a method for optimizing the performance of large models on the web side, which has the following beneficial effects:

[0058] Improve rendering efficiency and response speed:

[0059] Through the optimization of WebWorker multi-process rendering, the resource request and data parsing tasks are migrated to the background thread (WebWorker), and the main thread blocking is avoided by using the multi-port parallel request technology, ensuring the fluency and responsiveness of the user interface.

[0060] Pre-compute the bounding box in the Worker process and transmit it to the main thread through postMessage, effectively realizing frustum culling and occlusion culling, and reducing unnecessary rendering work.

[0061] Enhance the user experience:

[0062] The dynamic data source optimization strategy simplifies the number of faces, performs LOD grading and instantiation processing on the original model, and dynamically adjusts the model detail level according to the camera distance, not only improving the loading speed, but also ensuring the consistency and quality of the visual experience at different distances.

[0063] Use the THREE.LOD object to achieve smooth transition, making the switching between different detail levels of the model more natural and enhancing the user's immersion.

[0064] Optimize resource management and improve performance:

[0065] The cross-level geometry merging optimization merges model components based on spatial proximity to generate a single BufferGeometry, reducing the number of draw calls, reducing memory occupancy, and maintaining the necessary model clarity.

[0066] Introduce a parametric control mechanism that allows adjusting the merging threshold and detail weight according to specific requirements, balancing rendering performance and visual fidelity.

[0067] Advanced optimization strategy:

[0068] The custom occlusion culling algorithm detects the occlusion relationship of the rendered components in the current frame based on the depth buffer and skips the rendering process of the completely occluded components, further saving computing resources.

[0069] The construction of the spatial octree and the skip-order merging strategy effectively organize the model components in the scene, enabling efficient merging of adjacent geometries within the same node and improving the overall rendering efficiency. Description of the Drawings

[0070] Figure 1 It is a schematic diagram of the overall process of the present invention;

[0071] Figure 2 Schematic diagram for optimizing WebWorker multi-process rendering of the present invention;

[0072] Figure 3 Schematic diagram for optimizing dynamic data sources of the present invention;

[0073] Figure 4 Schematic diagram for optimizing cross-level geometry merging of the present invention;

[0074] Figure 5 Schematic diagram for integrating the rendering pipeline of the present invention. Detailed implementation manners

[0075] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

[0076] Please refer to Figures 1-5 , a method for optimizing the performance of large models on the web side of the present invention, including the following steps: ‌

[0077] ‌Optimization of WebWorker multi-process rendering‌:

[0078] Migrate the network requests and data parsing operations of the model resources to the WebWorker process, and avoid blocking the main thread through the multi-port parallel request technology;

[0079] Pre-compute the bounding box (Bounding Box or BoundingSphere) of the model sub-components in the Worker process, and transmit the structured data to the main thread through postMessage for frustum culling and occlusion culling;

[0080] ‌Optimization of dynamic data sources‌:

[0081] Perform face number simplification, LOD grading, and instantiation processing on the original model to generate a multi-level simplified model and instantiated component data;

[0082] Dynamically switch the model detail level according to the camera distance, and achieve smooth transition through the THREE.LOD object;

[0083] ‌Optimization of cross-level geometry merging‌:

[0084] Based on spatial proximity, perform cross-level merging on the model components to generate the merged BufferGeometry;

[0085] Control the geometric merging granularity through an adjustable merging threshold parameter to balance rendering performance and model clarity.

[0086] This Web-side large model performance optimization method significantly improves the rendering efficiency and user experience of Web-side 3D models through various technical means (such as WebWorker multi-process rendering optimization, dynamic data source optimization, and cross-level geometric merging optimization). Its main working principle is as follows:

[0087] WebWorker multi-process rendering optimization: Migrate the network request and data parsing operations of model resources to the WebWorker process. Avoid main thread blocking through the multi-port parallel request technology, and pre-compute the bounding boxes of model sub-components in the Worker process for frustum culling and occlusion culling.

[0088] Dynamic data source optimization: Simplify the number of faces, perform LOD grading, and instantiation processing on the original model to generate multi-level simplified models and instantiated component data. Dynamically switch the model detail level according to the camera distance, and achieve smooth transition through the THREE.LOD object.

[0089] Cross-level geometric merging optimization: Merge model components across levels based on spatial proximity to generate the merged BufferGeometry, and control the geometric merging granularity through an adjustable merging threshold parameter to balance rendering performance and model clarity.

[0090] Working principles of each preferred technical solution

[0091] WebWorker multi-process rendering optimization

[0092] Multi-port parallel request: Create at least two independent communication ports (MessageChannel) in the WebWorker process, which are respectively used for model resource requests and data parsing. The main thread only receives the deserialized rendering instruction data, avoiding main thread blocking.

[0093] Bounding box pre-computation: Calculate the minimum bounding box for each separable component during the model loading phase, and store it as a {min: Vector3, max: Vector3} structure. This bounding box information is transmitted to the main thread through postMessage for accelerating frustum culling judgment.

[0094] Custom occlusion culling algorithm: Skip the rendering of completely occluded components based on the spatial overlap detection of component bounding boxes. Detect the occlusion relationship of the components rendered in the current frame through the depth buffer (Depth Buffer), and perform a fast occlusion test on the bounding boxes of the subsequent components to be rendered. If completely occluded, skip the rendering.

[0095] Dynamic Data Source Optimization

[0096] Model Simplification: Use a decimation tool (such as Blender's Decimate Modifier) to reduce the number of model faces to 10%-30% of the original model while preserving the key topology. This reduces the model complexity and improves rendering efficiency.

[0097] LOD Grading: Create three levels of detail (high, medium, and low) for the same model and set dynamic switching distance thresholds. For example:

[0098] When the camera distance d from the model is ≥ 100 units, load the low-detail model;

[0099] When 50 units ≤ d < 100 units, load the medium-detail model;

[0100] When d < 50 units, load the high-detail model. In this way, the model detail level can be dynamically switched according to the camera distance, reducing the rendering burden of distant models.

[0101] Instancing Processing: Generate THREE.InstancedMesh for repeated parts. By sharing geometric data and materials, the number of DrawCalls is reduced. This effectively reduces the rendering overhead, especially in scenes with a large number of repeated parts.

[0102] Cross-Level Geometry Merging Optimization

[0103] Octree Construction: Divide the scene space into an octree structure, traverse the model parts and insert them into the corresponding tree nodes. This can effectively manage the geometries in the scene and improve the merging efficiency.

[0104] Skip-Order Merging Strategy: Merge adjacent geometries across levels within the same octree node to generate a single BufferGeometry. In this way, the loading and parsing of redundant data can be reduced, and the data volume at the rendering end can be decreased.

[0105] Parameterized Control: Set the merge threshold parameter (mergeThreshold) to control the maximum spatial distance allowed for merging, and set the detail weight parameter (detailWeight) to preserve the geometric details of key parts. This allows the merging strategy to be adjusted according to specific requirements, balancing rendering performance and model clarity.

[0106] Detailed Workflow

[0107] Preparation

[0108] Initialize WebWorker: Create a WebWorker instance and establish at least two independent communication ports (MessageChannel) for model resource requests and data parsing respectively.

[0109] Create a basic rendering scene: Include basic elements such as a perspective camera, renderer, and helper to ensure the integrity and stability of the rendering environment.

[0110] WebWorker Multi-Process Rendering Optimization

[0111] Data Request and Parsing

[0112] Open multiple ports in the WebWorker process for resource requests to avoid blocking the main process model rendering during data requests.

[0113] The data needs to be parsed after the request, which is a very time-consuming operation. Place this process in the WebWorker process to avoid blocking the main process due to CPU time-consuming operations and keep the user waiting all the time.

[0114] Bounding Box Precomputation

[0115] During the model loading phase, calculate the minimum bounding box for each separable part and store it as a {min: Vector3, max: Vector3} structure.

[0116] Transfer this bounding box information to the main thread via postMessage for accelerating frustum culling judgment.

[0117] Custom Occlusion Culling Algorithm

[0118] Detect the occlusion relationship of the rendered parts in the current frame based on the depth buffer (Depth Buffer).

[0119] Perform a quick occlusion test on the bounding boxes of the subsequent parts to be rendered. If completely occluded, skip the rendering.

[0120] Dynamic Data Source Optimization

[0121] Model Simplification

[0122] Use a face reduction tool (such as Blender's Decimate Modifier) to reduce the number of model faces to 10% - 30% of the original model while preserving the key topology.

[0123] LOD Grading

[0124] Create three detail levels of high, medium, and low for the same model and set dynamic switching distance thresholds:

[0125] When the distance d between the camera and the model is ≥ 100 units, load the low-detail model;

[0126] When 50 units ≤ d < 100 units, load the medium-detail model;

[0127] When d < 50 units, load the high-detail model.

[0128] Use the THREE.LOD object to achieve smooth transition.

[0129] Instance processing

[0130] Generate THREE.InstancedMesh for repeated components, reducing the number of DrawCalls by sharing geometric data and materials.

[0131] Cross-level geometry merging optimization

[0132] Create a basic rendering scene

[0133] Include basic elements such as a perspective camera, renderer, and helper.

[0134] Spatial octree construction

[0135] Divide the scene space into an octree structure, traverse the model components and insert them into the corresponding tree nodes.

[0136] Skip-order merging strategy

[0137] Call THREE.Box3().setFromObject(mesh) for each model component to generate a bounding box.

[0138] Assign the component to the corresponding node in the octree according to the center coordinates of the bounding box.

[0139] If there are multiple components in the same node and they meet the merging threshold condition, merge their vertex and index data into a single geometry.

[0140] Parameterized control

[0141] Set the merge threshold parameter (mergeThreshold) to control the maximum spatial distance allowed for merging.

[0142] Set the detail weight parameter (detailWeight) to retain the geometric details of key parts.

[0143] Animation loop and frustum culling

[0144] Simulate camera movement

[0145] In the animation loop, simulate the movement of the camera. As the camera position changes, the frustum range changes.

[0146] Frustum culling mechanism

[0147] Three.js will automatically perform frustum culling based on the bounding box. During rendering, only the cubes within the camera frustum will be rendered.

[0148] Summary of technical effects

[0149] Improved rendering performance: By using Worker processes to offload CPU-intensive tasks, the main thread focuses on rendering, and the frame rate stability is increased by 30% - 50%.

[0150] Reduced resource consumption: LOD grading and instancing reduce vertex data redundancy by more than 50%, and cross-level merging reduces the rendering batches by 70%.

[0151] Enhanced dynamic adaptability: LOD switching and occlusion culling driven by the camera distance achieve a smooth interaction experience in complex scenes.

[0152] Although the embodiments of the present invention have been shown and described, it will be understood by those of ordinary skill in the art that various changes, modifications, substitutions, and variations can be made to these embodiments without departing from the principles and spirit of the present invention. The scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for optimizing performance of a large web-based model, characterized in that: The following steps are involved: ‌ ‌WebWorker multi-process rendering optimization‌: Migrate the network request and data parsing operations of model resources to the WebWorker process, and avoid main thread blocking through the port-based parallel request technology; In the Worker process, the bounding box of the model subcomponent is pre-calculated, and its bounding box is Bounding Box or BoundingSphere. The structured data is transmitted to the main thread through postMessage for frustum culling and occlusion culling. ‌Dynamic Data Source Optimization‌: Simplify the number of faces, perform LOD grading and instantiation processing on the original model to generate multi-level simplified models and instantiation component data; Dynamically switch model detail levels based on camera distance, and achieve smooth transitions through THREE.LOD objects; ‌Cross-level geometry merging optimization‌: Merge model components across levels based on spatial proximity to generate a merged BufferGeometry; The geometry merging granularity can be controlled through an adjustable merge threshold parameter to balance rendering performance and model clarity.

2. A web-based large-scale model performance optimization method according to claim 1, characterized in that: The WebWorker multi-process rendering optimization further includes: Create at least two independent communication ports in the Worker process, one for model resource request and one for data parsing. The main thread only receives deserialized rendering instruction data. During the model loading phase, the minimum bounding box is calculated for each separable component and stored as a {min: Vector3, max: Vector3} structure to accelerate the frustum culling judgment; Through a custom occlusion culling algorithm, based on the spatial overlap detection of component bounding boxes, the rendering of completely occluded components is skipped.

3. A web-based large-scale model performance optimization method according to claim 2, characterized in that: The dynamic data source optimization further includes: ‌Model simplification‌: Use the face reduction tool to reduce the number of model faces to 10%-30% of the original model while retaining key topological structures; ‌LOD Grading‌: Create three levels of detail for the same model: high, medium, and low, and set a dynamic switching distance threshold, where the number of vertices in the low level of detail does not exceed 20% of the high level of detail; ‌Instancing‌: Generate THREE.InstancedMesh for repeated parts to reduce the number of DrawCalls by sharing geometry data and materials.

4. A web-based large-scale model performance optimization method according to claim 3, characterized in that: The specific steps of the cross-level geometric merging optimization include: Create a basic rendering scene, including perspective camera, renderer, and auxiliary basic elements; Loop to create multiple bounding boxes of model components and set a random position for each bounding box; Perform skip-order merging, create a bounding box based on THREE.Box3(), and simulate camera movement in the animation loop to achieve frustum culling.

5. A web-based large-scale model performance optimization method according to claim 4, characterized in that: The cross-level geometric merging optimization further includes: ‌Spatial octree construction‌: Divide the scene space into an octree structure, traverse the model components and insert the corresponding tree nodes; ‌Jumping Merge Strategy‌: Merge adjacent geometries across levels within the same octree node to generate a single BufferGeometry; ‌Parametric Control‌: Set the Merge Threshold parameter to control the maximum spatial distance allowed for merging, and set the Detail Weight parameter to retain geometric details of key parts.

6. A web-based large-scale model performance optimization method according to claim 5, characterized in that: The execution process of the skip-order merging strategy is as follows: Call THREE.Box3().setFromObject(mesh) for each model component to generate a bounding box; Assign components to corresponding nodes of the octree according to the center coordinates of the bounding box; If there are multiple components in the same node and the merge threshold condition is met, their vertex and index data are merged into a single geometry.

7. A web-based large-scale model performance optimization method according to claim 6, characterized in that: The custom occlusion culling algorithm includes the following steps: Detect the occlusion relationship of the rendered components of the current frame based on the depth buffer; Perform a quick occlusion test on the bounding box of the subsequent components to be rendered. If they are completely occluded, skip rendering.

8. A web-based large-scale model performance optimization method according to claim 7, characterized in that: The dynamic switching rules of the LOD classification are: When the distance d between the camera and the model satisfies d ≥ 100 units, load the low-detail model; When 50 units ≤ d < 100 units, the detailed model is loaded; When d < 50 units, a high-detail model is loaded.

Images