Webgl point cloud rendering method and system based on web worker asynchronous parsing

Abstract

The application discloses a WebGL point cloud rendering method and system based on Web Worker asynchronous analysis, and belongs to the technical field of intelligent robot optimization, comprising a data analysis and processing module, a rendering and visualization module, an interaction and state management module, and a compatibility and fallback module. The WebGL point cloud rendering system based on Web Worker asynchronous analysis creates a Web Worker background thread after a main thread, asynchronously analyzes point cloud data and calculates the centroid, radius and vertex color, transfers the buffer zero-copy to the main thread through the Transferable mechanism, assembles it into a WebGL rendering object, and simultaneously uses technologies such as quantile statistics terrace, adaptive top clipping, intelligent camera adaptation and perspective persistence to complete visualization. The main thread is eliminated, the interface remains smooth response at 60fps during the analysis of a million-level point cloud, the rendering point number is reduced, the frame rate of a complex scene is significantly improved, the ground and point cloud alignment accuracy reaches the millimeter level, the perspective saving and recovery and various point cloud formats are supported, and the interactive experience and system expansibility are enhanced.

Description

Technical Field

[0001] This invention relates to the field of intelligent robot optimization technology, specifically to a WebGL point cloud rendering method and system based on asynchronous parsing using Web Worker. Background Technology

[0002] With the rapid development of intelligent robot technology, quadruped robots, due to their excellent terrain adaptability and mobility, are widely used in indoor inspection, navigation and obstacle avoidance, and smart parks. Quadruped robots (robot dogs) can perform inspection tasks in complex environments such as factory workshops, underground pipe corridors, and substations. When performing these tasks, the robot needs to understand the spatial structure of the working environment using a 3D point cloud map. This 3D point cloud map, generated by sensors such as LiDAR or depth cameras, not only contains spatial geometric information of the environment but also semantic information such as navigation paths, inspection point markings, and obstacle distribution. In the robot control platform, operators can view the point cloud map through a browser-based visual interface to monitor the robot's current position, surrounding environment, and navigation path in real time. During the use of intelligent robots, a WebGL point cloud rendering system is required, as illustrated in Chinese invention patent application number 202510176813.4, filed on February 18, 2025: "Real-time Hole Repair Based on WebGL Point Cloud Rendering." The method and system, by introducing a multi-layer depth texture comparison mechanism and an octree space segmentation strategy, achieve efficient detection and filling of point cloud holes, while ensuring the smoothness and data integrity of real-time rendering on the Web end; there is also a Chinese invention patent application with application number 202110896610.4 and application date of 2021-08-05, a WebGL-based graphics rendering method, device and system, which encapsulates elements drawn using WebGL into layers, obtains layer rendering data in the form of a preset layer encapsulation format, and then maps the layer rendering data into WebGL data format, thereby exposing the underlying drawing capabilities to the web application layer; During use, the synchronous parsing of large-scale point cloud data on the main thread can cause page lag, poor camera view adaptation, ground rendering misalignment, low rendering efficiency, inability to save view state, inability to visualize navigation paths, lack of interactivity in road sign markings, and a single point source file format. Therefore, a point cloud visualization system based on Web Worker asynchronous parsing and WebGL rendering is needed. Summary of the Invention

[0003] The purpose of this invention is to provide a WebGL point cloud rendering method and system based on Web Worker asynchronous parsing, in order to solve the problems mentioned in the background art, such as page lag, poor camera view adaptation, ground rendering misalignment, low rendering efficiency, inability to save view state, inability to visualize navigation path, lack of interactivity in road sign marking, and single point source file format.

[0004] To achieve the above objectives, the present invention provides the following technical solution: a WebGL point cloud rendering system based on asynchronous parsing using Web Worker, comprising a data parsing and processing module, a rendering and visualization module, an interaction and state management module, and a compatibility and rollback module: the data parsing and processing module asynchronously parses point cloud data information in a background thread, calculates centroid information, radius information, and vertex color information, avoiding blocking the main thread, and includes a Web Worker background parsing submodule, a multi-format parsing adaptation submodule, a data statistics and bounding sphere calculation submodule, and a height shading submodule; the rendering and visualization module renders the parsed point cloud data into a 3D scene using WebGL, and automatically adapts to the camera viewpoint, ground position, and top clipping range, including a WebGL rendering submodule, a smart camera adaptation submodule, a ground and mesh rendering submodule, and a top clipping module; the interaction and state management module provides user interaction functions such as viewpoint saving and restoration, road sign hovering and clicking, and Bézier navigation path visualization, including a viewpoint state management submodule, a road sign interaction submodule, and a Bézier path visualization submodule; when the compatibility and rollback module is working, it ensures that Web... It provides functionality rollback when the Worker is unavailable and supports extended access to multiple point cloud file formats, including a rollback parsing submodule and an extended format support submodule.

[0005] Preferably, when the Web Worker background parsing submodule is working, it creates a Web Worker instance in the main thread, transmits point cloud data to the background thread through the PostMessage interface, and uses a structured cloning algorithm for data transmission. The multi-format parsing and adaptation submodule supports xmap, PLY, LAS / LAZ, PCD, and XYZ formats; it automatically identifies and calls the corresponding parser based on file extension and magic number; and it adopts a design architecture that combines the strategy pattern and the factory pattern. The data statistics and bounding sphere calculation submodule calculates the centroid position using the centroid calculation formula: ,in , Let the three-dimensional coordinates of the centroid of the point cloud be... , , Let be the three-dimensional coordinates of the i-th vertex. Let be the total number of vertices in the point cloud; then, with the centroid as the center of the sphere, calculate the maximum distance from all vertices to the centroid, i.e., the coverage radius, using the formula... ,in Let be the radius of the point cloud surrounding the sphere. It is the square root function; The height shading submodule is based on each vertex, The interpolation factor is obtained by normalizing the coordinates within the range [zMin, zMax]. The formula for height shading is: ,in This is the normalized interpolation factor, with a value range of [0,1]. For the current vertex The coordinates are zMin, which is the minimum z coordinate of all vertices in the point cloud, and zMax, which is the maximum z coordinate of all vertices in the point cloud. Then gamma correction optimization is performed, through , The interpolation factor after gamma correction. The original normalized interpolation factor, The gamma correction factor is used; when γ > 1, the color bends towards lower color levels.

[0006] Preferably, when the WebGL rendering submodule is working, the main thread receives the buffer passed by the Transferable object; assembles the position buffer and color buffer into a Three.js BufferGeometry; creates a PointsMaterial material, generates a Points mesh object and adds it to the scene; The intelligent camera adaptation submodule calculates the camera distance based on the field of view and aspect ratio of the perspective camera using the camera distance calculation formula. Calculate the minimum viewing distance required for the bounding sphere to fall completely within the viewing cone, where To ensure the safety margin factor, the bounding sphere falls completely into the visual cone. Let be the radius of the point cloud surrounding the sphere. For the camera's vertical field of view, The horizontal field of view of the camera, supporting oblique view mode and top view mode; When selecting the ground reference height in the ground and mesh rendering submodule, the P-th quantile of the sorted height is taken. The value, where P is a proportional parameter, takes a value in the range (0, 1), and the semi-transparent ground plane is placed on... Position, XY grid lines are placed at Location; The calculated reference height of the ground level, This is a small offset used to avoid depth conflicts; The top cropping submodule includes two modes: Mode 1 is linear cropping, which uses a cropping threshold formula. ,in This represents the clipping height threshold; vertices with a Z-coordinate higher than this value will be discarded. This represents the minimum Z-coordinate of all vertices in the point cloud. This represents the maximum Z-coordinate of all vertices in the point cloud. This indicates the percentage of height to retain, with a value range of (0,1], and a default value of 1 indicating no cropping. The second-order quantile statistical cropping method involves sampling step size: one point is taken every four points. The sampling results are sorted, and the Q-th quantile is taken as the highest effective estimate. The effective height range [tempMin, tempMax] is calculated, and the proportion is retained from top to bottom. The cropping threshold formula is as follows. ,in Indicates the cropping height threshold. The minimum value of the Z-coordinate of the sampling point. The maximum value of the Z-coordinate of the sampling point. Retain the proportion from top to bottom.

[0007] Preferably, the viewpoint state management submodule has a built-in state data structure. ,in For camera world coordinates, For the observation target point of the track controller, use sessionStorage to store the view state by URL as key. Export format: getCameraCsvStrings() - "x, y, z" comma-separated string. Import method: applyExternalCsv(positionCsv, targetCsv). The road sign interaction submodule supports two marker styles: sphere style and map editor style. Hover tooltip: Displays an HTML bubble containing the marker label, number, X, Y, Z coordinates, and attitude angle. Raycasting: Implements precise click detection using Three.js's Raycaster. The Bezier path visual submodule includes the following formula: ,in This represents the coordinates of the point on the curve corresponding to the parameter. These are curve parameters, ranging from [0,1], where 0 corresponds to the starting point and 1 corresponds to the ending point. The starting coordinates of the Bézier curve. The coordinates of the first control point of the Bézier curve. The coordinates of the second control point of the Bézier curve. The coordinates of the endpoint of the Bézier curve are obtained by sampling four points on a straight path and 48 points on the Bézier curve. The array of sampled points is assembled into a BufferGeometry and rendered as a polyline using a Line object.

[0008] Preferably, when the fallback parsing submodule is working, it automatically falls back to the main thread to synchronously perform parsing calculations when the Web Worker is unavailable; when the extended format support submodule is working, it interacts with various format parsers through a unified abstract interface, and the parsing results adopt a unified data structure: a three-dimensional coordinate array, a color attribute array, a normal vector array, an echo intensity array, and file metadata.

[0009] A WebGL point cloud rendering method based on asynchronous parsing using Web Workers includes the following steps: S1: Web Worker background asynchronous parsing, creates Web Worker instances in the main thread, and passes point cloud file data to the background thread through the postMessage interface; S2: Smart camera view adaptation and rendering. After the main thread receives the parsing results, it assembles BufferGeometry and generates Points mesh objects to add to the scene, while performing smart camera view adaptation. S3: Robust floor reference calculation and ground rendering, which calculates the floor reference height and renders the ground based on quantile statistics; S4: Adaptive point cloud top cropping, selects one of two cropping modes according to the application scenario, and removes meaningless high points; S5: Persistent view state and enhanced interaction, providing complete view state management and interaction functions.

[0010] Preferably, in S1, the Worker thread performs the following computational tasks in the background: Vertex coordinate parsing: Parses point cloud data using regular expressions to generate a position array in Float32Array format; centroid calculation, coverage radius calculation, and height shading calculation; After the calculation is completed, the underlying buffers of the position array and color array are transferred to the main thread through the Transferable mechanism to achieve zero-copy transfer; When adapting, S2 needs to calculate the camera distance, support two initial camera positions: oblique view mode and top view mode, and configure the OrbitControls track controller to achieve smooth interaction.

[0011] Preferably, in step S3, ground reference height calculation and ground rendering are required to ensure that even if there are a small number of underground outliers, as long as their proportion is less than the quantile threshold, they will not affect the ground reference height.

[0012] Preferably, in S4, mode one is linear clipping and mode two is quantile statistical clipping. The dual-mode design can reduce the number of rendering points and improve the rendering frame rate in complex scenes.

[0013] Preferably, S5 includes view state management, Bezier path visualization, and road sign interaction, while setting an alternative fallback scheme: when the Web Worker is unavailable or parsing fails, it automatically falls back to the main thread for synchronous parsing to ensure the availability of the function.

[0014] Compared with existing technologies, the beneficial effects of this invention are as follows: It adopts a novel structural design, creating a WebWorker background thread on the main thread to asynchronously parse point cloud data and calculate the centroid, radius, and vertex color. The buffer is transferred to the main thread with zero copy via a Transferable mechanism, and assembled into a WebGL rendering object. Simultaneously, it employs technologies such as quantile statistical ground mapping, adaptive top clipping, intelligent camera adaptation, and view persistence to complete visualization; it eliminates main thread blocking, maintaining a smooth 60fps response during the parsing of millions of point clouds; it reduces the number of rendering points, significantly improving the frame rate in complex scenes; the alignment accuracy between the ground and the point cloud reaches the millimeter level; and it supports view saving and restoration as well as multiple point cloud formats, enhancing the interactive experience and system scalability. The specific details are as follows: This WebGL point cloud rendering method based on asynchronous parsing using Web Workers, in S1, shifts the computationally intensive point cloud parsing task from the main thread to a separate background thread, completely eliminating UI lag and unresponsiveness issues during large-scale point cloud loading. During the parsing of millions of point clouds, the user interface maintains a smooth 60fps frame rate, allowing operators to perform interactive operations such as adjusting camera view and checking robot position. The Transferable zero-copy transmission mechanism avoids data copying overhead, significantly reducing data transfer latency between the main thread and Worker threads. Loading wait time is reduced from 5-15 seconds in traditional solutions to seconds, greatly improving user experience and operational efficiency.

[0015] Furthermore, S2 implements intelligent adaptive camera viewpoint adjustment, resolving the issues of unsatisfactory initial observation positions and the need for repeated manual adjustments in traditional solutions. Camera distance calculations based on bounding sphere features ensure that the point cloud falls completely within the view frustum, achieving the optimal observation viewpoint without user intervention. For scenarios with vastly different spatial structures, such as narrow corridors, open factories, and densely packed workshops, the system automatically adjusts the camera position and orientation, allowing operators to clearly view the robot's current position and overall environment upon initial loading. This saves the time cost of repeatedly adjusting the viewpoint after each map version switch, significantly improving operational efficiency and ease of use.

[0016] This WebGL point cloud rendering method based on asynchronous parsing using Web Workers employs a quantile statistical method to calculate the ground reference height in S3. This effectively avoids the visual misalignment between the ground and the point cloud caused by outliers such as glass reflection interference, dynamic object ghosting, and scanning blind zone noise, which are common in traditional minimum value methods. As long as the proportion of outliers is less than a preset quantile threshold, the ground reference height will not be lowered, and the alignment accuracy between the ground and the main point cloud can reach the millimeter level. Operators can accurately judge the robot's actual height relative to the ground, which is especially crucial in precision operation scenarios. At the same time, a small Z-offset avoids depth conflicts during surface rendering, eliminates visual problems such as ground flicker, and improves the visual quality and judgment accuracy of the 3D scene.

[0017] Furthermore, in S4, an adaptive top-clipping algorithm effectively removes meaningless vertices such as ceiling noise, floating particles, and high points in ventilation ducts, reducing the number of rendered points by 30% to 50%. In complex indoor point clouds, this significantly reduces the GPU rendering load, restoring smooth operation to scenes that previously experienced severe frame rate drops. The dual-mode design caters to both regularly distributed point clouds and the processing needs of scanned data containing outliers, allowing operators to flexibly choose the clipping mode based on data quality. While ensuring the integrity of environmental representation, the significant improvement in rendering efficiency enables the system to handle larger-scale point cloud data, expanding its application scenarios.

[0018] (3) This WebGL point cloud rendering method based on asynchronous parsing of Web Worker solves three major pain points in S5: the inability to save the viewpoint, the invisibility of the navigation path, and the lack of interactivity of road signs in traditional solutions. The viewpoints set by the operator for different tasks, such as the top view of the overall situation, the side view of the equipment area, and the close view of specific road signs, can be restored with one click after the page is refreshed or reloaded. Each time the robot dog or map version is switched, tens of seconds of repeated adjustment time can be saved. The Bezier path visualization presents the inspection route as a navigation reference line in a intuitive way. The hover prompts and click positioning functions of the road signs enable the operator to quickly obtain key information such as the inspection point and the location of the charging pile. The usability of the map and the efficiency of information acquisition are significantly improved. Attached Figure Description

[0019] Figure 1 This is a schematic diagram of the module structure of the present invention; Figure 2 This is a schematic diagram of the method steps of the present invention. Detailed Implementation

[0020] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0021] Please see Figures 1-2 The present invention provides the following technical solution: a WebGL point cloud rendering method and system based on asynchronous parsing of Web Worker.

[0022] It includes modules for data parsing and processing, rendering and visualization, interaction and state management, and compatibility and rollback. The data parsing and processing module asynchronously parses point cloud data information in a background thread, calculates centroid information, radius information, and vertex color information, avoiding blocking the main thread. It includes a Web Worker background parsing submodule, a multi-format parsing and adaptation submodule, a data statistics and bounding sphere calculation submodule, and a height shading submodule. When the Web Worker background parsing submodule is working, a Web Worker instance is created in the main thread, and the point cloud data is passed to the background thread through the PostMessage interface, using a structured cloning algorithm for data transfer. The aforementioned Web Worker background parsing submodule, during operation, creates an independent Web Worker thread instance in the main thread. It then passes the point cloud file data (such as XML text in xmap format) and color configuration parameters to the background thread via the postMessage interface. After receiving the data, the Worker thread executes the following computational tasks in parallel: parsing vertex coordinates using regular expressions to generate an array of staggered positions in Float32Array format; calculating the centroid position by calculating the arithmetic mean of all vertex coordinates; calculating the coverage radius with the centroid as the sphere center; and performing height coloring based on the vertex Z coordinates, first calculating the normalization factor, then interpolating after gamma correction to generate the color array. After the calculation is completed, the underlying ArrayBuffer of the position array and color array is transferred to the main thread through the Transferable mechanism to achieve zero-copy data transmission. After receiving the data, the main thread directly assembles it into a BufferGeometry of Three.js for rendering. This solution puts the time-consuming calculation in the background, and the main thread maintains a smooth response.

[0023] The multi-format parsing and adaptation submodule supports xmap, PLY, LAS / LAZ, PCD, and XYZ formats; it automatically identifies and calls the corresponding parser based on file extension and magic number; and it adopts a design architecture that combines the strategy pattern and the factory pattern. The aforementioned multi-format parsing and adaptation submodule adopts a design architecture combining the strategy pattern and the factory pattern, decoupling the file format parsing logic from the core rendering business. First, a unified point cloud parser abstract interface is defined, standardizing the three core functions: parsing method, bounding sphere acquisition method, and point count acquisition method. For different point cloud file formats, corresponding parser adapter classes are implemented: including parsers for xmap format, PLY format (supporting vertex attributes and color information), LAS / LAZ format (supporting echo intensity and classification information), PCD format (supporting multiple encoding methods), and XYZ text format. Format recognition uses a file extension matching mechanism; when the extension cannot be recognized, it falls back to reading the magic number byte sequence at the beginning of the file as an auxiliary recognition method. The factory method automatically creates parser instances for the corresponding format based on the recognition results. All parsers are unified on the Web... The Worker background thread executes the parsing task and outputs parsing results in a unified format—including a 3D coordinate array, a color attribute array (optional), a normal vector array (optional), an echo intensity array (optional), and file metadata. This framework allows for adding new format support simply by adding the corresponding parser class, without modifying the core code, ensuring system scalability and stability.

[0024] The data statistics and bounding sphere calculation submodule calculates the centroid position using the centroid calculation formula: ,in , Let the three-dimensional coordinates of the centroid of the point cloud be... , , Let be the three-dimensional coordinates of the i-th vertex. Let be the total number of vertices in the point cloud; then, with the centroid as the center of the sphere, calculate the maximum distance from all vertices to the centroid, i.e., the coverage radius, using the formula... ,in Let be the radius of the point cloud surrounding the sphere. It is the square root function; The aforementioned data statistics and bounding sphere calculation submodule performs statistical feature calculations on point cloud data in the Web Worker background thread. First, it iterates through all vertex coordinates, sums the coordinate values ​​for each dimension, and divides the sum by the total number of vertices to obtain the centroid position. Then, using the calculated centroid as the center of the sphere, it iterates through all vertices to calculate their Euclidean distances to the centroid and records the maximum distance as the bounding sphere radius. During the traversal, it synchronously calculates the total number of points in the point cloud and the minimum and maximum values ​​of each coordinate axis to form complete point cloud data statistics. All calculations are completed asynchronously in the background thread without blocking any interactive operations of the main thread. After the calculation is completed, the statistical results such as centroid coordinates, coverage radius, and coordinate extrema are packaged together with the position array and color array and transmitted to the main thread through the Transferable mechanism. The main thread uses this statistical information to perform intelligent camera perspective adaptation, ground reference calculation, and top clipping threshold determination to achieve adaptive visualization configuration of point cloud data.

[0025] The height-shading submodule, based on each vertex, The interpolation factor is obtained by normalizing the coordinates within the range [zMin, zMax]. The formula for height shading is: ,in This is the normalized interpolation factor, with a value range of [0,1]. For the current vertex The coordinates are zMin, which is the minimum z coordinate of all vertices in the point cloud, and zMax, which is the maximum z coordinate of all vertices in the point cloud. Then gamma correction optimization is performed, through , The interpolation factor after gamma correction. The original normalized interpolation factor, The gamma correction factor is used; when γ > 1, the color bends towards lower color levels.

[0026] The aforementioned height shading submodule automatically generates a color array based on vertex heights in the Web Worker background thread. First, it obtains the Z-coordinates of all vertices from the point cloud location data, determining the minimum value zMin and the maximum value zMax. For each vertex, it calculates a normalized interpolation factor, mapping the vertex height to the [0,1] interval. To optimize the visual effect of the color distribution, gamma correction is introduced to perform a non-linear transformation on the interpolation factor: when... When the value is greater than 1, the interpolation curve bends towards the lower position, causing more vertices to display the lower position color, effectively reducing the strong visual impact of the strong contrast between high and low position colors. When =1, it degenerates into linear interpolation. When the value is less than 1, the color bends towards a higher position. Then, based on... Linear interpolation is performed between preset low-order color (e.g., blue) and high-order color (e.g., orange) to generate the RGB color components of each vertex. The color values ​​of all vertices are stored sequentially in a color array in Float32Array format, maintaining a one-to-one correspondence with the position array. This coloring scheme makes the height changes of the point cloud intuitively presented through color gradients, allowing operators to quickly identify terrain undulations and spatial hierarchy without having to look at the numerical values.

[0027] The rendering and visualization module renders the parsed point cloud data into a 3D scene using WebGL and automatically adapts to the camera viewpoint, ground position, and top clipping range. It includes a WebGL rendering submodule, a smart camera adaptation submodule, a ground and mesh rendering submodule, and a top clipping submodule. When the WebGL rendering submodule is working, the main thread receives the buffer passed by the Transferable object; assembles the position buffer and color buffer into a Three.js BufferGeometry; creates a PointsMaterial material, generates a Points mesh object and adds it to the scene; The aforementioned WebGL rendering submodule, within the main thread, is responsible for converting the parsed point cloud data into WebGL-renderable 3D objects. After receiving the position and color arrays from the Worker thread via the Transferable mechanism, the main thread first creates a BufferGeometry object from Three.js. It then binds the Float32Array formatted position array to the geometry's `position` property and the color array to its `color` property using the `setAttribute` method. Next, it creates a PointsMaterial point cloud material, setting its properties including enabling vertex colors (`vertexColors: true`), adjusting point size (`size`), and setting the point attenuation mode (`sizeAttenuation`) to achieve perspective effects. Finally, it combines the material and geometry to generate a Points mesh object, which is then added to the 3D scene using the `scene.add` method. During rendering, WebGL utilizes the GPU for vertex and fragment shading, achieving hardware-accelerated rendering of large-scale point clouds. The main thread is only responsible for assembly and scene management; the actual rendering calculations are processed in parallel by the GPU. This solution fully leverages the graphics hardware capabilities of WebGL, supporting real-time rendering of millions of point clouds, while also providing a smooth camera interaction experience in conjunction with a track controller.

[0028] The intelligent camera adaptation submodule calculates the camera distance based on the field of view and aspect ratio of the perspective camera using the camera distance calculation formula. Calculate the minimum viewing distance required for the bounding sphere to fall completely within the viewing cone, where To ensure the safety margin factor, the bounding sphere falls completely into the visual cone. Let be the radius of the point cloud surrounding the sphere. For the camera's vertical field of view, The horizontal field of view of the camera, supporting oblique view mode and top view mode; The aforementioned intelligent camera adaptation submodule automatically calculates the optimal viewing angle based on the bounding sphere features of the point cloud. First, it obtains the centroid coordinates of the point cloud and the radius of the bounding sphere from the data statistics module. Then, it calculates the horizontal field of view (hFov) based on the perspective camera's vertical field of view (vFov) and the screen's aspect ratio. To ensure the bounding sphere completely falls within the viewing cone, it calculates the minimum observation distances required in both the vertical and horizontal directions, takes the larger of the two values, and multiplies it by the safety margin coefficient to obtain the final camera distance. The camera position supports two initial camera position modes: in oblique view mode, the camera is positioned diagonally above the center of the bounding sphere, with fixed angles set in both the horizontal and pitch directions; in top view mode, the camera is placed along the positive Z-axis of the world, observing the XY plane downwards. The camera's observation target point is set to the centroid of the bounding sphere. Finally, the OrbitControls track controller is configured, and a damping coefficient is set to achieve a smooth viewing angle switching effect. An optional locking polar angle limits the camera's rotation range. This scheme allows point clouds with different distribution characteristics to obtain an ideal viewing angle upon initial loading, without requiring manual adjustment by the user.

[0029] In the Ground and Mesh Rendering submodule, when selecting the ground reference height, the P-th quantile after sorting is used. The value, where P is a proportional parameter, takes a value in the range (0, 1), and the semi-transparent ground plane is placed on... Position, XY grid lines are placed at Location; The calculated reference height of the ground level, This is a small offset used to avoid depth conflicts; The aforementioned ground and mesh rendering submodule calculates the ground reference height and renders ground auxiliary elements based on the quantile statistical method. First, it extracts all Z-coordinate values ​​from the point cloud position array, stores them in a temporary array, and sorts them. The Z-value at the P-th quantile position after sorting is taken as the ground reference height `refFloorZ`, with a default P=0.5% (i.e., the first 0.5% of points after sorting from bottom to top). This method effectively avoids outlier interference; as long as the proportion of outliers is less than the quantile threshold, it will not affect the calculation result of the ground reference height. After determining the ground reference height, a semi-transparent ground plane is created and placed on... Position it slightly below the reference height; create XY grid guidelines and place them at... The location is slightly above the reference height. The offset is a tiny value, ranging from 0.001 to 0.01. This staggered placement strategy avoids Z-fighting conflicts between the ground plane and the bottom surface of the point cloud during depth rendering. The ground plane uses a semi-transparent material and mesh texture, allowing operators to clearly perceive the location and spatial scale of the ground without affecting the visualization of the point cloud below. This solution ensures that the visual alignment accuracy between the ground and the main point cloud reaches the millimeter level.

[0030] The top cropping submodule includes two modes: Mode 1 is linear cropping, which uses a cropping threshold formula. ,in This represents the clipping height threshold; vertices with a Z-coordinate higher than this value will be discarded. This represents the minimum Z-coordinate of all vertices in the point cloud. This represents the maximum Z-coordinate of all vertices in the point cloud. This indicates the percentage of height to retain, with a value range of (0,1], and a default value of 1 indicating no cropping. The second-order quantile statistical cropping method involves sampling step size: one point is taken every four points. The sampling results are sorted, and the Q-th quantile is taken as the highest effective estimate. The effective height range [tempMin, tempMax] is calculated, and the proportion is retained from top to bottom. The cropping threshold formula is as follows. ,in Indicates the cropping height threshold. The minimum value of the Z-coordinate of the sampling point. The maximum value of the Z-coordinate of the sampling point. Retain the proportion from top to bottom.

[0031] The aforementioned top cropping submodule provides two adaptive cropping modes to remove meaningless high points. Mode 1 is linear cropping: setting the percentage of height to retain. (0< ≤1), calculate the clipping threshold Keep all Z coordinates ≤ The vertices of the point cloud are represented by this simple and intuitive pattern, which is suitable for regularly distributed point clouds. Mode 2 uses quantile-based statistical clipping: First, the Z-coordinates of the point cloud are sampled at intervals, with a default step size of 4 (one sample is taken every 4 points) to reduce statistical computation. After sorting the sampling results, the Q-th quantile (default 70%) is taken as the highest valid estimate, yielding the effective height range [tempMin, tempMax] of the sampled points. Then, the clipping threshold is calculated. ,in Preserve the percentage from bottom to top (default 83%). Remove all vertices whose height exceeds the clipping threshold; Both modes are executed in the background thread of the Web Worker. After the calculation is completed, the clipped position array is transmitted to the main thread. The dual-mode design takes into account the needs of different data quality, reduces the number of rendering points, and significantly improves the rendering frame rate in complex scenes.

[0032] The interaction and state management module provides user interaction functions such as view saving and restoration, road sign hovering and clicking, and visualization of Bezier navigation path, including view state management sub-module, road sign interaction sub-module and Bezier path visualization sub-module; The view state management submodule has a built-in state data structure. ,in For camera world coordinates, For the observation target point of the track controller, use sessionStorage to store the view state by URL as key. Export format: getCameraCsvStrings() - "x, y, z" comma-separated string. Import method: applyExternalCsv(positionCsv, targetCsv). The aforementioned viewpoint state management submodule enables the saving, restoration, and external exchange of camera viewpoints. When the user adjusts the camera position or orientation, the system automatically captures the current viewpoint state and stores it using sessionStorage with the URL of the current point cloud file as the unique key, achieving viewpoint state isolation between different point cloud files. When loading a new point cloud, the system automatically matches and restores the corresponding saved viewpoint based on the new URL; if no saved viewpoint is found, it reverts to the default camera position calculated by the intelligent camera adaptation module. Storage data is automatically cleaned up when the component is unloaded to prevent memory leaks. The viewpoint state management submodule provides external interfaces: getCameraCsvStrings() exports the viewpoint state as a comma-separated string of x, y, z; applyExternalCsv(positionCsv, targetCsv) imports the viewpoint state from external CSV data; and resetView() resets the viewpoint. This solution eliminates the need for repeated adjustments when switching viewpoints between different tasks, saving tens of seconds of operation time with each switch.

[0033] The road sign interaction submodule supports two marker styles: sphere style and map editor style. Hover tooltip: Displays an HTML bubble containing the marker label, number, X, Y, Z coordinates, and attitude angle. Raycasting: Implements precise click detection using Three.js's Raycaster. The aforementioned road sign interaction submodule implements the visualization and interaction functions of road sign markers in the point cloud map. For visualization, it supports two styles: a sphere style, a simple 3D sphere suitable for lightweight display; and a map editor style, which includes combined elements such as teardrop icons, rings, and directional arrows. All markers are placed in the scene according to their parsed 3D coordinates. The interactive functionality is implemented using the Raycaster ray picker in Three.js. The system listens for mousemove and click events. When an event is triggered, a ray is emitted from the camera position, passing through the mouse screen coordinates, and the intersection with all road signs is detected. When hovering, an HTML bubble tooltip is displayed, containing the sign label, number, X, Y, Z coordinates, and attitude angle information. When clicked, the system can optionally move the camera to the highlighted mark position and link it with an external list component for synchronized highlighting. The road sign interaction submodule can optionally enable the polyline connection function, which connects the signs sequentially according to their numbers to generate a path polyline, making it easy to visually view the inspection route sequence. This solution allows operators to quickly obtain road sign information without consulting additional documents, and the click-to-locate function greatly improves the efficiency of finding key locations on the map.

[0034] The Bezier path visual submodule includes the following formulas: ,in This represents the coordinates of the point on the curve corresponding to the parameter. These are curve parameters, ranging from [0,1], where 0 corresponds to the starting point and 1 corresponds to the ending point. The starting coordinates of the Bézier curve. The coordinates of the first control point of the Bézier curve. The coordinates of the second control point of the Bézier curve. The coordinates of the endpoint of the Bézier curve are obtained by sampling four points on a straight path and 48 points on the Bézier curve. The array of sampled points is assembled into a BufferGeometry and rendered as a polyline using a Line object.

[0035] The aforementioned Bezier path visualization submodule parses the navigation path from the point cloud map file and renders it as a visual polyline. It first starts from the XML structure...<advanced_curve class_name=“BezierPath”> Extracting path data from nodes: via<start_pos> and<end_pos> Obtain the coordinates of the starting point P0 and the ending point P3, from<control1_pos> and<control2_pos> Obtain the coordinates of control points P1 and P2, and identify the curve type (straight_line or bezier_curve) through the curve_type attribute. For straight paths, the start and end points are used directly for rendering; for Bézier curves, the cubic Bézier curve equation is used for uniform sampling. The parameter t increases from 0 to 1 in increments, and the number of sampling points is adaptively configured according to the curve type: 4 points for linear curves and 48 points for Bézier curves, ensuring curve smoothness while controlling computational overhead. All sampling point coordinates are assembled into a BufferGeometry in Three.js, a LineBasicMaterial material is created, and a Line object is generated and added to the scene. The rendered navigation path clearly shows the inspection route, allowing operators to intuitively understand the preset work path. This solution transforms abstract Bézier curve data into a visually understandable reference line.

[0036] When the compatibility and rollback module is working, it ensures functional rollback when the Web Worker is unavailable and supports extended access to multiple point cloud file formats, including the rollback parsing submodule and the extended format support submodule. When the rollback parsing submodule is working, it automatically rolls back to the main thread to synchronously execute parsing calculations when the Web Worker is unavailable. When the extended format support submodule is working, it interacts with various format parsers through a unified abstract interface, and the parsing results adopt a unified data structure: a 3D coordinate array, a color attribute array, a normal vector array, an echo intensity array, and file metadata.

[0037] The aforementioned compatibility and fallback modules ensure stable system operation and support for functional expansion in various environments. Regarding the fallback mechanism, the system checks whether the current browser supports the Web Worker API during initialization. If it does not, or if Worker thread creation fails, or if an exception is thrown during Worker internal parsing, the system automatically catches the error and switches to the main thread synchronous parsing mode. In fallback mode, all tasks such as point cloud parsing, centroid calculation, and height shading are executed sequentially on the main thread. Although this may cause brief blocking, it ensures the complete availability of core functions. Regarding format extensions, the module defines a unified abstract interface for point cloud parsers, standardizing parsing methods, bounding sphere acquisition methods, and point count acquisition methods. When adding support for a new file format, only the adapter class implementing this interface needs to be included, containing format-specific parsing logic. No core rendering code needs to be modified. The factory class automatically creates the corresponding parser instance based on the file extension. When the extension cannot be recognized, secondary recognition is performed by reading the magic number byte sequence from the file header. The parser uniformly outputs a standard format position array, color array, and metadata.

[0038] This module gives the system good robustness and scalability, enabling it to operate in degraded environments under limited conditions and to access new point cloud formats at low cost.

[0039] A WebGL point cloud rendering method based on asynchronous parsing using Web Workers includes the following steps: S1: Web Worker background asynchronous parsing, creates Web Worker instances in the main thread, and passes point cloud file data to the background thread through the postMessage interface; S2: Smart camera view adaptation and rendering. After the main thread receives the parsing results, it assembles BufferGeometry and generates Points mesh objects to add to the scene, while performing smart camera view adaptation. S3: Robust floor reference calculation and ground rendering, which calculates the floor reference height and renders the ground based on quantile statistics; S4: Adaptive point cloud top cropping, selects one of two cropping modes according to the application scenario, and removes meaningless high points; S5: Persistent view state and enhanced interaction, providing complete view state management and interaction functions.

[0040] S1, the Worker thread performs the following computational tasks in the background: Vertex coordinate parsing: Parses point cloud data using regular expressions to generate a position array in Float32Array format; centroid calculation, coverage radius calculation, and height shading calculation; After the calculation is completed, the underlying buffers of the position array and color array are transferred to the main thread through the Transferable mechanism to achieve zero-copy transfer; S2, during adaptation, needs to calculate camera distance, supports two initial camera positions: oblique view mode and top view mode, and configures OrbitControls track controller to achieve smooth interaction.

[0041] S3 requires calculation of the ground reference height and ground rendering to ensure that even if there are a few underground outliers, as long as their proportion is less than the quantile threshold, they will not affect the ground reference height.

[0042] S4 features a linear clipping mode and a quantile-based statistical clipping mode. This dual-mode design reduces the number of rendering points and improves the rendering frame rate in complex scenes.

[0043] S5 includes view state management, Bezier path visualization, and road sign interaction. It also sets up an alternative fallback scheme: when the Web Worker is unavailable or parsing fails, it automatically falls back to the main thread for synchronous parsing to ensure the availability of the function.

[0044] The above is the entire working process of the device, and all contents not described in detail in this specification are existing technologies known to those skilled in the art.

[0045] Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing embodiments or make equivalent substitutions for some of the technical features. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the protection scope of the present invention.

Claims

1. A WebGL point cloud rendering system based on asynchronous parsing using Web Worker, comprising a data parsing and processing module, a rendering and visualization module, an interaction and state management module, and a compatibility and rollback module, characterized in that: The data parsing and processing module asynchronously parses point cloud data information in a background thread, calculates centroid information, radius information, and vertex color information, avoiding blocking the main thread. It includes a Web Worker background parsing submodule, a multi-format parsing and adaptation submodule, a data statistics and bounding sphere calculation submodule, and a height shading submodule. The rendering and visualization module renders the parsed point cloud data into a 3D scene using WebGL and automatically adapts to the camera viewpoint, ground position, and top clipping range. It includes a WebGL rendering submodule, a smart camera adaptation submodule, a ground and mesh rendering submodule, and a top clipping submodule. The interaction and state management module provides user interaction functions such as view saving and restoration, road sign hovering and clicking, and visualizing the Bezier navigation path. It includes a view state management submodule, a road sign interaction submodule, and a Bezier path visualization submodule. When the compatibility and rollback module is working, it ensures function rollback when the Web Worker is unavailable and supports extended access to multiple point cloud file formats, including a rollback parsing submodule and an extended format support submodule.

2. The WebGL point cloud rendering system based on asynchronous parsing of Web Worker as described in claim 1, characterized in that: When the Web Worker background parsing submodule is working, it creates a Web Worker instance in the main thread, passes point cloud data to the background thread through the PostMessage interface, and uses a structured cloning algorithm for data transfer. The multi-format parsing and adaptation submodule supports xmap, PLY, LAS / LAZ, PCD, and XYZ formats; it automatically identifies and calls the corresponding parser based on file extension and magic number; and it adopts a design architecture that combines the strategy pattern and the factory pattern. The data statistics and bounding sphere calculation submodule calculates the centroid position using the centroid calculation formula: ,in , Let the three-dimensional coordinates of the centroid of the point cloud be... , , Let be the three-dimensional coordinates of the i-th vertex. Let be the total number of vertices in the point cloud; then, with the centroid as the center of the sphere, calculate the maximum distance from all vertices to the centroid, i.e., the coverage radius, using the formula... ,in Let be the radius of the point cloud surrounding the sphere. It is the square root function; The height shading submodule is based on each vertex, The interpolation factor is obtained by normalizing the coordinates within the range [zMin, zMax]. The formula for height shading is: ,in This is the normalized interpolation factor, with a value range of [0,1]. For the current vertex The coordinates are zMin, which is the minimum z coordinate of all vertices in the point cloud, and zMax, which is the maximum z coordinate of all vertices in the point cloud. Then gamma correction optimization is performed, through , The interpolation factor after gamma correction. The original normalized interpolation factor, The gamma correction factor is used; when γ > 1, the color bends towards lower color levels.

3. The WebGL point cloud rendering system based on asynchronous parsing of Web Worker according to claim 2, characterized in that: When the WebGL rendering submodule is working, the main thread receives the buffer passed by the Transferable object; assembles the position buffer and color buffer into a BufferGeometry from Three.js; creates a PointsMaterial material, generates a Points mesh object, and adds it to the scene; The intelligent camera adaptation submodule calculates the camera distance based on the field of view and aspect ratio of the perspective camera using the camera distance calculation formula. Calculate the minimum viewing distance required for the bounding sphere to fall completely within the viewing cone, where To ensure the safety margin factor, the bounding sphere falls completely into the visual cone. Let be the radius of the point cloud surrounding the sphere. For the camera's vertical field of view, The horizontal field of view of the camera, supporting oblique view mode and top view mode; When selecting the ground reference height in the ground and mesh rendering submodule, the P-th quantile of the sorted height is taken. The value, where P is a proportional parameter, takes a value in the range (0, 1), and the semi-transparent ground plane is placed on... Position, XY grid lines are placed at Location; The calculated reference height of the ground level, This is a small offset used to avoid depth conflicts; The top cropping submodule includes two modes: Mode 1 is linear cropping, which uses a cropping threshold formula. ,in This represents the clipping height threshold; vertices with a Z-coordinate higher than this value will be discarded. This represents the minimum Z-coordinate of all vertices in the point cloud. This represents the maximum Z-coordinate of all vertices in the point cloud. This indicates the percentage of height to retain, with a value range of (0,1], and a default value of 1 indicating no cropping. The second-order quantile statistical cropping method involves sampling step size: one point is taken every four points. The sampling results are sorted, and the Q-th quantile is taken as the highest effective estimate. The effective height range [tempMin, tempMax] is calculated, and the proportion is retained from top to bottom. The cropping threshold formula is as follows. ,in This represents the minimum Z-coordinate of the sampling point, indicating the cropping height threshold. The maximum value of the Z-coordinate of the sampling point. Retain proportions from top to bottom.

4. The WebGL point cloud rendering system based on asynchronous parsing of Web Worker according to claim 3, characterized in that: The viewpoint state management submodule has a built-in state data structure. ,in For camera world coordinates, For the observation target point of the track controller, use sessionStorage to store the view state by URL as key. Export format: getCameraCsvStrings() -"x,y,z" comma-separated string. Import method: applyExternalCsv(positionCsv, targetCsv). The road sign interaction submodule supports two marker styles: sphere style and map editor style. Hover tooltip: Displays an HTML bubble containing the marker label, number, X, Y, Z coordinates, and attitude angle. Raycasting: Implements precise click detection using Three.js's Raycaster. The Bezier path visual submodule includes the following formula: ,in This represents the coordinates of the point on the curve corresponding to the parameter. These are curve parameters, ranging from [0,1], where 0 corresponds to the starting point and 1 corresponds to the ending point. The starting coordinates of the Bézier curve. The coordinates of the first control point of the Bézier curve. The coordinates of the second control point of the Bézier curve. The coordinates of the endpoint of the Bézier curve are obtained by sampling four points on a straight path and 48 points on the Bézier curve. The array of sampled points is assembled into a BufferGeometry and rendered as a polyline using a Line object.

5. The WebGL point cloud rendering system based on asynchronous parsing of Web Worker according to claim 4, characterized in that: When the fallback parsing submodule is working, it automatically falls back to the main thread to synchronously perform parsing calculations when the Web Worker is unavailable. When the extended format support submodule is working, it interacts with various format parsers through a unified abstract interface. The parsing results adopt a unified data structure: a three-dimensional coordinate array, a color attribute array, a normal vector array, an echo intensity array, and file metadata.

6. A WebGL point cloud rendering method based on asynchronous parsing using Web Workers, applied to the WebGL point cloud rendering system based on asynchronous parsing using Web Workers as described in claim 5, characterized in that: Includes the following steps: S1: Web Worker background asynchronous parsing, creates Web Worker instances in the main thread, and passes point cloud file data to the background thread through the postMessage interface; S2: Smart camera view adaptation and rendering. After the main thread receives the parsing results, it assembles BufferGeometry and generates Points mesh objects to add to the scene, while performing smart camera view adaptation. S3: Robust floor reference calculation and ground rendering, which calculates the floor reference height and renders the ground based on quantile statistics; S4: Adaptive point cloud top cropping, selects one of two cropping modes according to the application scenario, and removes meaningless high points; S5: Persistent view state and enhanced interaction, providing complete view state management and interaction functions.

7. The WebGL point cloud rendering method and system based on asynchronous parsing using Web Worker as described in claim 6, characterized in that: In S1, the Worker thread performs the following computational tasks in the background: Vertex coordinate parsing: Parses point cloud data using regular expressions to generate a position array in Float32Array format; centroid calculation, coverage radius calculation, and height shading calculation; After the calculation is completed, the underlying buffers of the position array and color array are transferred to the main thread through the Transferable mechanism to achieve zero-copy transfer; When adapting, S2 needs to calculate the camera distance, support two initial camera positions: oblique view mode and top view mode, and configure the OrbitControls track controller to achieve smooth interaction.

8. The WebGL point cloud rendering method and system based on asynchronous parsing of Web Worker as described in claim 7, characterized in that: The S3 step requires calculating the ground reference height and rendering the ground to ensure that even if there are a few underground outliers, as long as their proportion is less than the quantile threshold, they will not affect the ground reference height.

9. The WebGL point cloud rendering method and system based on asynchronous parsing using Web Worker as described in claim 8, characterized in that: The S4 mode has two modes: mode 1 is linear clipping and mode 2 is quantile statistical clipping. This dual-mode design can reduce the number of rendering points and improve the rendering frame rate in complex scenes.

10. The WebGL point cloud rendering method and system based on asynchronous parsing using Web Worker as described in claim 9, characterized in that: The S5 includes view state management, Bezier path visualization, and road sign interaction. It also sets up an alternative fallback scheme: when the Web Worker is unavailable or parsing fails, it automatically falls back to the main thread for synchronous parsing to ensure the availability of the function.

Images