Low-resource multi-resolution point cloud data web visualization method

Abstract

This invention relates to the field of point cloud data visualization technology, specifically to a low-resource-consumption, multi-resolution point cloud data web-based visualization method. The method includes: preprocessing and structuring the raw point cloud data into an octree to generate a hierarchical index file and a series of binary point cloud data blocks, and deploying them on a static file server; the client asynchronously loads the hierarchical index file, and in each rendering frame, based on the current camera position and view frustum, traverses from the root node of the octree, calculates the projection error of the nodes on the screen, and determines the nodes to be rendered; subsequently, high-performance multi-resolution visualization based on the web is performed. This invention achieves real-time, smooth, high-fidelity, and interactive visualization of massive point cloud data on the web, solving the performance bottlenecks and accessibility problems of traditional solutions.

Description

Technical Field

[0001] This invention relates to the field of point cloud data visualization technology, and in particular to a web-based visualization method for multi-resolution point cloud data with low resource consumption. Background Technology

[0002] Current technologies for visualizing ultra-large-scale point clouds (typically reaching billions to trillions of points) heavily rely on local high-performance workstations and professional desktop software (such as CloudCompare and Cyclone). This approach makes data assets difficult to share and distribute, and places extremely high demands on client hardware configurations (especially memory and video memory). Loading a complete point cloud dataset of tens of gigabytes or even terabytes can take minutes or even hours, severely impacting the efficiency of collaborative work in fields such as BIM, GIS, and autonomous driving simulation.

[0003] To address these issues, existing technologies attempt optimization through methods such as data tile loading, downsampling, or server-side rendering. However, simple mesh tile loading is difficult to handle at data seams and cannot adaptively adjust the level of detail (LOD) based on the viewpoint; downsampling is an irreversible lossy compression of data, resulting in severe loss of detail during close-up observation, failing to meet the needs of high-precision measurement and analysis; while server-side rendering lowers the barrier to entry for clients, it concentrates all rendering pressure on the server, resulting in high costs and a strong dependence on network bandwidth, leading to high latency in the transmitted video stream and making it difficult to achieve smooth real-time multi-user interaction.

[0004] None of the above solutions have been able to achieve real-time, smooth, and high-fidelity interaction with massive point cloud data on lightweight clients (such as web browsers). Therefore, there is an urgent need for a method that can achieve real-time, smooth, and high-fidelity interaction with massive point cloud data on lightweight clients. Summary of the Invention

[0005] The purpose of this invention is to provide a low-resource-consumption method for visualizing multi-resolution point cloud data on the Web, which can realize real-time, smooth, high-fidelity, and interactive visualization of massive point cloud data on the Web.

[0006] To achieve the above objectives, this invention provides a low-resource-consumption web-based visualization method for multi-resolution point cloud data, comprising:

[0007] The raw point cloud data is preprocessed and structured into an octree to generate a hierarchical index file and a series of binary point cloud data blocks, which are then deployed on a static file server.

[0008] The client asynchronously loads the hierarchical index file. In each rendering frame, based on the current camera position and view frustum, it traverses from the root node of the octree, calculates the projection error of the node on the screen, and determines the node to be rendered.

[0009] The client maintains a node request queue and a data cache. For nodes that are determined to be rendered but are not in the cache, an asynchronous data request is sent to the server. The received binary data block is parsed asynchronously using a Web Worker sub-thread. After parsing, the data is transferred back to the main thread and loaded into the WebGL GPU buffer. In each frame, the point cloud of all visible nodes in the current cache is dynamically rendered. For nodes that are determined to have been moved out of the view frustum or have a low LOD level, they are removed from the GPU buffer and their memory is released.

[0010] The specific steps involved in preprocessing and octree structuring the raw point cloud data to generate hierarchical index files and a series of binary point cloud data blocks, and then deploying them to a static file server, include:

[0011] Acquire raw point cloud data and calculate its global bounding box;

[0012] Using the global bounding box as the root node, recursively divide the global bounding box into eight equal octree child nodes;

[0013] The point cloud data is distributed to the corresponding child nodes according to their spatial location until the number of points in the node is lower than the preset threshold, forming a multi-level detailed hierarchical structure.

[0014] Finally, a hierarchical index file and a series of binary point cloud data blocks are generated and deployed on a static file server.

[0015] Among the steps, acquiring the raw point cloud data and calculating its global bounding box is as follows:

[0016] The point cloud data is in LAS, LAZ, or XYZ format.

[0017] The specific steps involved include: The client asynchronously loads the hierarchical index file; in each rendering frame, based on the current camera position and view frustum, it traverses the octree starting from the root node, calculates the projection error of the nodes on the screen, and determines the nodes to be rendered.

[0018] The client asynchronously loads the hierarchical index file;

[0019] In each rendering frame, based on the current camera position and view frustum, traverse the octree starting from the root node;

[0020] The calculation checks the projection error of a node on the screen. If the projection error is greater than a preset threshold, the node is determined to be lacking in detail, and its child nodes are traversed. If the projection error is less than the threshold, the traversal is stopped, and the node is determined to be a node to be rendered.

[0021] The client maintains a node request queue and a data cache. For nodes identified as waiting to be rendered but not in the cache, an asynchronous data request is sent to the server. The received binary data block is parsed asynchronously using a Web Worker sub-thread. After parsing, the data is transferred back to the main thread and loaded into the WebGL GPU buffer. In each frame, the point cloud of all visible nodes in the current cache is dynamically rendered. For nodes identified as having been moved out of the view frustum or having a too low LOD level, the specific steps for removing them from the GPU buffer and releasing their memory include:

[0022] The client maintains a node request queue and data cache;

[0023] For nodes that are determined to be nodes to be rendered but are not in the cache, an asynchronous data request is sent to the server;

[0024] Utilize Web Worker child threads to asynchronously parse received binary data blocks;

[0025] After parsing, the point coordinates, color, and intensity data are transferred back to the main thread and loaded into the WebGL GPU buffer;

[0026] The rendering engine dynamically renders the point cloud of all visible nodes in the current cache in each frame;

[0027] For nodes that are determined to have been removed from the view frustum or whose LOD level is too low, remove them from the GPU buffer and release their memory.

[0028] In the step of the client maintaining a node request queue and data cache,

[0029] The data cache is an LRU cache.

[0030] This invention provides a low-resource-consumption method for web-based visualization of multi-resolution point cloud data. It utilizes octree preprocessing to transform unstructured point clouds into hierarchical data, providing an indexing foundation for progressive loading. The "octree index + viewpoint request" mechanism established by this method allows the client to request only a tiny fraction of the total data, significantly saving network bandwidth and client memory resources. By leveraging native WebGL technology in the browser to perform rendering on the GPU, it achieves smooth operation of billions of point clouds on ordinary PCs and even mobile devices without requiring any plugins. This invention enables real-time, smooth, high-fidelity, and interactive visualization of massive point cloud data on the web, solving the performance bottlenecks and accessibility problems of traditional solutions. Attached Figure Description

[0031] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the accompanying drawings used in the description of the embodiments or the prior art will be briefly introduced below.

[0032] Figure 1 This is a flowchart of the overall method for web-based visualization of multi-resolution point cloud data with low resource consumption, as described in this invention.

[0033] Figure 2 This is a flowchart of step S1 of the low-resource-consumption multi-resolution point cloud data web-based visualization method of the present invention.

[0034] Figure 3 This is a flowchart of step S2 of the low-resource-consumption multi-resolution point cloud data web-based visualization method of the present invention.

[0035] Figure 4 This is a flowchart of step S3 of the low-resource-consumption multi-resolution point cloud data web-based visualization method of the present invention. Detailed Implementation

[0036] The embodiments of the present invention are described in detail below. Examples of the embodiments are shown in the accompanying drawings. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain the present invention, but should not be construed as limiting the present invention.

[0037] Please see Figures 1-4 This invention provides a low-resource-consumption web-based visualization method for multi-resolution point cloud data, comprising:

[0038] S1 preprocesses and octree structures the raw point cloud data, generates hierarchical index files and a series of binary point cloud data blocks, and deploys them on a static file server.

[0039] The specific steps include:

[0040] S11 Acquire the raw point cloud data and calculate its global bounding box; in this step, the point cloud data is in LAS format, LAZ format, or XYZ format.

[0041] S12 uses the global bounding box as the root node and recursively divides the global bounding box into eight equal octree child nodes.

[0042] S13 distributes point cloud data to corresponding child nodes according to spatial location until the number of points in a node is lower than a preset threshold, forming a multi-level detailed hierarchical structure.

[0043] S14 ultimately generates a hierarchical index file and a series of binary point cloud data blocks, and deploys them on a static file server.

[0044] Step S1 performs point cloud data preprocessing and octree structuring. Specifically, step S1 is an offline step that acquires raw point cloud data (such as LAS, LAZ, XYZ formats); calculates its global bounding box; recursively divides the bounding box (root node) into eight equal subspaces (octree child nodes); distributes the point cloud data to the corresponding leaf nodes according to their spatial location until the number of points in a node is lower than a preset threshold (such as 50,000 points), forming a multi-level hierarchy of details (LOD) structure; finally, it generates a hierarchy index file (such as hierarchy.json) and a series of binary point cloud data blocks (.bin files), and deploys them on a static file server.

[0045] The S2 client asynchronously loads the hierarchical index file. In each rendering frame, based on the current camera position and view frustum, it traverses from the root node of the octree, calculates the projection error of the node on the screen, and determines the node to be rendered.

[0046] The specific steps include:

[0047] The S21 client asynchronously loads the hierarchical index file;

[0048] In each rendering frame, S22 traverses the octree starting from the root node, based on the current camera position and view frustum.

[0049] S23 calculates the projection error of the node on the screen. If the projection error is greater than a preset threshold, the node is determined to be lacking in detail, and its child nodes are traversed. If the projection error is less than the threshold, the traversal is stopped, and the node is determined to be a node to be rendered.

[0050] Step S2 implements viewpoint-dependent adaptive streaming based on octree index. Specifically, in step S2, the client (browser) first asynchronously loads the hierarchical index file; in each rendering frame, based on the current camera position and view frustum, it traverses from the root node of the octree; it calculates the projection error (SSE) of the node on the screen. If the error is greater than a preset threshold (e.g., 1.5 pixels), it is determined that the node lacks detail and continues to traverse its child nodes; if the error is less than the threshold, it stops traversing and determines that the node is a "to be rendered" node.

[0051] The S3 client maintains a node request queue and a data cache. For nodes that are determined to be rendered but are not in the cache, it sends an asynchronous data request to the server. It uses a Web Worker sub-thread to asynchronously parse the received binary data block. After parsing, the data is transferred back to the main thread and loaded into the WebGL GPU buffer. In each frame, it dynamically renders the point cloud of all visible nodes in the current cache. For nodes that are determined to have been moved out of the view frustum or have a low LOD level, they are removed from the GPU buffer and their memory is released.

[0052] The specific steps include:

[0053] The S31 client maintains a node request queue and a data cache; in this step, the data cache is an LRU cache.

[0054] For nodes that are determined to be nodes to be rendered but are not in the cache, S32 sends an asynchronous data request to the server.

[0055] S33 uses a Web Worker sub-thread to asynchronously parse the received binary data block;

[0056] After S34 parsing is complete, the point coordinates, color, and intensity data are transferred back to the main thread and loaded into the WebGL GPU buffer;

[0057] The S35 rendering engine dynamically renders the point cloud of all visible nodes in the current cache in each frame.

[0058] S36 removes nodes that are determined to have been removed from the view frustum or have a low LOD level from the GPU buffer and releases their memory.

[0059] Step S3 implements high-performance multi-resolution visualization based on the web. Specifically, in step S3, the client maintains a node request queue and a data cache (such as an LRU cache). For nodes determined to be "to be rendered" in step S2 and not in the cache, an asynchronous data request is sent to the server (the .bin file corresponding to the HTTP GET request). The received binary data block (ArrayBuffer) is parsed asynchronously using a Web Worker sub-thread to avoid blocking the main rendering thread. After parsing, the point coordinates, color, intensity, and other data are transferred back to the main thread and loaded into the WebGL GPU buffer (BufferGeometry). The rendering engine (such as three.js) dynamically renders the point cloud of all visible nodes in the current cache in each frame. For nodes determined to have been moved out of the view frustum or with a low LOD level in step S2, they are removed from the GPU buffer and their memory is released.

[0060] To better understand the present invention, a specific embodiment is given below to illustrate steps S1-S3 of the present invention, as follows:

[0061] S1 Point Cloud Data Preprocessing and Octree Structuring: In this embodiment, this step is a one-time offline data conversion process, which can be performed using tools such as PotreeConverter. The specific process is as follows:

[0062] 1. Input and Bounding Box Calculation: The input is one or more point cloud files in LAS 1.4 format. The tool first iterates through all points and calculates the minimum and maximum values ​​(min_x, max_x, min_y, max_y, min_z, max_z) along the X, Y, and Z axes, forming a tight global bounding box.

[0063] 2. Octree Construction and LOD Generation: Using the global bounding box as the root node, cut it along the midpoints of the X, Y, and Z axes to generate 8 child nodes. All points are then assigned to these 8 child nodes based on their coordinates. During this process, lower-level nodes (closer to the root node) store a sparse set of the midpoints of all their child nodes (e.g., one for every 100 points), serving as the LOD data for that level.

[0064] 3. Recursion Termination: Repeat step 2 for each child node, recursively partitioning the space. The recursion termination condition is: a) the number of points in the node is less than a preset threshold (e.g., 50,000 points); or b) the maximum tree depth is reached (e.g., 20 levels).

[0065] 4. Data Storage: The point cloud data of all leaf nodes (and some intermediate LOD nodes) are stored separately as binary files (e.g., r0123.bin, where r represents the root and 0-7 represent the octree index). Simultaneously, a JSON-formatted hierarchical index file (e.g., cloud.js or hierarchy.json) is generated, describing the structure of the entire tree, including the name, bounding box, number of points, list of child nodes, and their byte offset and length in the data file for each node.

[0066] Deployment: Deploy the generated cloud.js file and the data folder containing all .bin data blocks to any standard static file server (such as Nginx, Apache, or object storage OSS) and wait for client access.

[0067] S2 Viewpoint-Related Adaptive Streaming Based on Octree Index: In this implementation, this step is executed in real-time on the client-side (web browser) JavaScript main thread (rendering loop). The specific process is as follows:

[0068] 1. Initialization: The client (such as the Potree viewer) first requests and loads the hierarchical index file (cloud.js) generated by S1.

[0069] 2. Node selection (within the rendering loop): In each rendering frame (typically 16.6ms), the client executes:

[0070] a. Obtain the projection matrix and view matrix of the current camera (e.g., PerspectiveCamera in three.js).

[0071] b. Starting from the root node of the octree, perform frustum culling. Use the bounding box of the node to perform intersection detection with the camera's frustum. If the node is completely outside the frustum, then remove the node and all its child nodes.

[0072] c. For nodes within the view frustum, calculate their "Screen-Space Error" (SSE). The SSE is calculated as follows:

[0073] SSE = (nodeSize * screenHeight) / (distanceToNode * focalLength)

[0074] Where nodeSize is the diagonal length of the node's bounding box, and distanceToNode is the distance from the camera to the node's center. The physical meaning of SSE is: the comparison between the spatial voxel represented by the node and the size of a single pixel when projected onto the screen.

[0075] d. Decision: If SSE > preset threshold (e.g., 1.5 pixels), it means that the node occupies a large area on the screen, and the current LOD detail is insufficient, so its child nodes need to be loaded. The program continues to traverse its child nodes (repeating steps b, c, d). If SSE <= preset threshold, it means that the node occupies a small area on the screen (e.g., in the distance), and the current LOD is sufficient, so there is no need to load child nodes. In this case, the node is marked as a "to be rendered" node.

[0076] 3. Priority scheduling: All nodes marked as "to be rendered" are sorted according to their SSE value or distance from the camera, and the visually most important nodes (such as the closest or the largest SSE) are loaded first.

[0077] S3 Web-based High-Performance Multi-Resolution Visualization: The specific process is as follows:

[0078] 1. Node requests and caching (application of S2 results): The client maintains a "pending" list (from S2) and a "loaded" LRU (Least Recently Used) cache.

[0079] a. Iterate through the "to be loaded" list. If a node is not in the LRU cache, send an asynchronous HTTP GET request to the server deployed on S1 via the fetch API to request the corresponding binary file (e.g., http: / / server.com / data / r0123.bin).

[0080] b. When the LRU cache reaches the preset limit (e.g., 500MB), the least used node data is automatically removed (releasing its GPU resources) to make room for new nodes.

[0081] 2. Asynchronous data parsing (Web Worker):

[0082] The a.fetch request returns an ArrayBuffer (raw binary data). To avoid data parsing (which is usually a CPU-intensive operation) blocking the main thread and causing screen lag, this ArrayBuffer is transferred to a Web Worker (child thread) with zero copying via the Transferable Objects mechanism.

[0083] b. The Web Worker decodes the binary data in the background and parses it into attribute arrays such as position (Float32Array), color (Uint8Array), and intensity (Uint16Array) according to the format defined in S1.

[0084] c. After parsing is complete, these attribute arrays are transferred back to the main thread again using the Transferable Objects mechanism.

[0085] 3. GPU loading and dynamic rendering:

[0086] a. The main thread (rendering thread) receives the array of properties returned by the Web Worker.

[0087] b. Use WebGL libraries such as three.js to create BufferGeometry objects and load array data such as position and color into GPU buffers (VBOs) using the geometry.setAttribute(...) method.

[0088] c. Use Points objects and PointsMaterial (or a custom shader) to render the BufferGeometry.

[0089] d. Steps S2 and S3 are repeated continuously. The renderer (WebGLRenderer) renders all "loaded" and "visible" nodes in each frame. When new nodes are loaded (S3.b), they are added to the scene; when nodes are marked as "invisible" or removed from the LRU cache (S3.a), their corresponding Geometry and Material are released by calling the dispose() method to ensure that video memory is not exhausted.

[0090] This invention presents a low-resource-consumption, multi-resolution point cloud data visualization method for web applications. It transforms massive amounts of unstructured point clouds into a hierarchical, indexed data structure (one index file + multiple data blocks), which forms the basis for subsequent progressive streaming. The client (browser) actively calculates and requests only the minimum data subset required for the current rendering frame based on the camera's view frustum and SSE (Screen Frame Layout). This is the core of this invention's high performance and low resource consumption. This invention utilizes Web Worker child threads to asynchronously parse binary data (avoiding main thread blocking), while the main rendering thread (WebGL) dynamically adds and removes buffer content to the GPU. Combined with an LRU cache management mechanism, this solves the stuttering and memory overflow problems encountered when processing large-scale dynamic data on the browser side. Through offline point cloud data preprocessing and octree structuring (S1), this invention transforms massive amounts of data into a multi-resolution (LOD) hierarchy. Combined with index-based adaptive streaming (step S2), the client loads only the data blocks required within the current view frustum that conform to the screen resolution, achieving "second-level" loading and extremely low memory consumption (typically only a few hundred MB). This invention utilizes standard WebGL technology to achieve native 3D rendering on the browser side through high-performance multi-resolution visualization based on the web (step S3), eliminating dependence on specific desktop software and operating systems. Users can access and interact through a single URL link, greatly improving data accessibility and collaborative efficiency. Step S2 of this invention employs a viewpoint-dependent streaming strategy, dynamically scheduling different LOD levels based on camera distance. Step S3 dynamically adds and removes data in the GPU, ensuring that rendering is always performed in the most efficient way (high precision for near objects, low precision for distant objects) during scene roaming and scaling, guaranteeing smooth interaction (high frame rate) and visual fidelity (no loss of detail). This invention transforms unstructured point clouds into hierarchical data through octree preprocessing in step S1, providing an indexing foundation for progressive loading. The "octree index + viewpoint request" mechanism established in step S2 allows the client to request only a very small portion (usually less than 1%) of the total data, greatly saving network bandwidth and client memory resources. Step S3 utilizes native WebGL technology in the browser to perform rendering on the GPU, enabling smooth operation of billions of point clouds on ordinary PCs and even mobile devices without the need for any plugins. This invention achieves real-time, smooth, high-fidelity, and interactive visualization of massive point cloud data on the Web, solving the performance bottlenecks and accessibility problems of traditional solutions.

[0091] The above-disclosed embodiments are merely one or more preferred embodiments of this application and should not be construed as limiting the scope of this application. Those skilled in the art can understand that all or part of the processes for implementing the above embodiments and equivalent changes made in accordance with the claims of this application still fall within the scope of this application.

Claims

1. A low-resource-consumption method for visualizing multi-resolution point cloud data on a web platform, characterized in that, include: The raw point cloud data is preprocessed and structured into an octree to generate a hierarchical index file and a series of binary point cloud data blocks, which are then deployed on a static file server. The client asynchronously loads the hierarchical index file. In each rendering frame, based on the current camera position and view frustum, it traverses from the root node of the octree, calculates the projection error of the node on the screen, and determines the node to be rendered. The client maintains a node request queue and a data cache. For nodes that are determined to be rendered but are not in the cache, an asynchronous data request is sent to the server. The received binary data block is parsed asynchronously using a Web Worker sub-thread. After parsing, the data is transferred back to the main thread and loaded into the WebGL GPU buffer. In each frame, the point cloud of all visible nodes in the current cache is dynamically rendered. For nodes that are determined to have been moved out of the view frustum or have a low LOD level, they are removed from the GPU buffer and their memory is released.

2. The low-resource-consumption multi-resolution point cloud data web-based visualization method as described in claim 1, characterized in that, The specific steps for preprocessing and octree structuring the raw point cloud data to generate hierarchical index files and a series of binary point cloud data blocks, and then deploying them to a static file server, include: Acquire raw point cloud data and calculate its global bounding box; Using the global bounding box as the root node, recursively divide the global bounding box into eight equal octree child nodes; The point cloud data is distributed to the corresponding child nodes according to their spatial location until the number of points in the node is lower than the preset threshold, forming a multi-level detailed hierarchical structure. Finally, a hierarchical index file and a series of binary point cloud data blocks are generated and deployed on a static file server.

3. The low-resource-consumption multi-resolution point cloud data web-based visualization method as described in claim 2, characterized in that, In the steps of acquiring raw point cloud data and calculating its global bounding box, The point cloud data is in LAS, LAZ, or XYZ format.

4. The low-resource-consumption multi-resolution point cloud data web-based visualization method as described in claim 3, characterized in that, The client asynchronously loads the hierarchical index file. In each rendering frame, based on the current camera position and view frustum, it traverses the octree starting from the root node, calculates the projection error of the node on the screen, and determines the specific steps to render the node. The client asynchronously loads the hierarchical index file; In each rendering frame, based on the current camera position and view frustum, traverse the octree starting from the root node; The calculation checks the projection error of a node on the screen. If the projection error is greater than a preset threshold, the node is determined to be lacking in detail, and its child nodes are traversed. If the projection error is less than the threshold, the traversal is stopped, and the node is determined to be a node to be rendered.

5. The low-resource-consumption multi-resolution point cloud data web-based visualization method as described in claim 4, characterized in that, The client maintains a node request queue and a data cache. For nodes determined to be to be rendered but not in the cache, an asynchronous data request is sent to the server. The received binary data block is parsed asynchronously using a Web Worker sub-thread. After parsing, the data is transferred back to the main thread and loaded into the WebGL GPU buffer. In each frame, the point cloud of all visible nodes in the current cache is dynamically rendered. For nodes determined to have been moved out of the view frustum or whose LOD level is too low, the specific steps for removing them from the GPU buffer and releasing their memory include: The client maintains a node request queue and data cache; For nodes that are determined to be nodes to be rendered but are not in the cache, an asynchronous data request is sent to the server; Utilize Web Worker child threads to asynchronously parse received binary data blocks; After parsing, the point coordinates, color, and intensity data are transferred back to the main thread and loaded into the WebGL GPU buffer; The rendering engine dynamically renders the point cloud of all visible nodes in the current cache in each frame; For nodes that are determined to have been removed from the view frustum or whose LOD level is too low, remove them from the GPU buffer and release their memory.

6. The low-resource-consumption multi-resolution point cloud data web-based visualization method as described in claim 5, characterized in that, In the step of maintaining a node request queue and a data cache on the client side, the data cache is an LRU cache.

Images