LiDAR 3D Point Cloud of Geospatial Data

LiDAR 3D Point Cloud Demo (JavaScript)

Overview

This example demonstrates a sophisticated 3D LiDAR point cloud visualization using SciChart.js in a JavaScript environment. It renders both a scatter 3D point-cloud and a corresponding 3D topological (heightmap) mesh with an integrated heatmap legend, providing a comprehensive view of geospatial data in real time.

Technical Implementation

The implementation starts with asynchronous data loading via async/await. The LiDAR data, stored in the ASC file format, is parsed by a custom helper class (AscReader) that converts the textual data into numerical arrays suitable for charting. This processing includes generating X, Y, and Z coordinate arrays and applying an optional linear color mapping function (using linearColorMapLerp) to map height values to colors. The parsed data is then fed into two primary series: a ScatterRenderableSeries3D and a SurfaceMeshRenderableSeries3D. The scatter series uses a pixel point marker to depict individual points in the point cloud with color information embedded via metadata. Meanwhile, the surface mesh uses a UniformGridDataSeries3D to transform the point cloud into a 2D height map for contour visualization. Configuration of the 3D scene is handled by setting world dimensions using a Vector3 instance (e.g. new Vector3(1000, 200, 1000)) and attaching a CameraController for interactive camera manipulation. Developers can refer to the SciChartSurface Camera documentation for further details on 3D scene configuration.

Features and Capabilities

Key features include:

• Real-time Data Streaming and Asynchronous Loading: The use of async/await ensures that large datasets are loaded without blocking UI updates.

• 3D Point Cloud Rendering: A scatter renderable series is used to display individual LiDAR points, leveraging the Scatter 3D Chart Type for high-performance WebGL rendering.

• Topological Mesh and Heightmap Generation: The UniformGridDataSeries3D forms the basis of a surface mesh renderable series, with gradient color palettes provided by a GradientColorPalette. This is particularly useful for visualizing terrain and contours as described in the SurfaceMesh 3D Chart Type documentation.

• Heatmap Legend Integration: A dedicated heatmap legend is created and synchronized with the mesh renderable series. For more detailed usage, please consult the HeatmapLegend documentation.

• Interactive 3D Controls: The example enhances user interactivity with 3D modifiers such as MouseWheelZoomModifier3D and OrbitModifier3D, enabling intuitive zooming and panning. This mirrors best practices for 3D camera control in SciChart.js.

Integration and Best Practices

By using JavaScript for instantiation and configuration, this example avoids framework-specific abstractions, ensuring that developers get direct access to all lower-level SciChart.js APIs. Performance optimizations are a priority; the example follows recommendations from the Performance Tips & Tricks documentation to efficiently render large point clouds. Additionally, data transformation techniques, such as converting one-dimensional arrays into 2D height maps (using functions like zeroArray2D), are implemented to ensure smooth integration between raw LiDAR data and visual rendering.

Overall, this demo provides a robust reference for creating interactive, high-performance 3D LiDAR visualizations using SciChart.js in JavaScript, offering insights into asynchronous data handling, advanced color mapping, and detailed 3D scene configuration.