Potree Three.js 3D Point Clouds WebGL

3D Point Clouds with Potree: Billions of Points in the Browser

· 4 min read · Edvin Kuric

What Are Point Clouds?

A point cloud is a collection of millions or billions of individual 3D points that together describe the surface of an object or environment. Each point has at least three coordinates (X, Y, Z) and can carry additional attributes: color (RGB), intensity, classification, or timestamps.

Point clouds are generated through various capture methods:

  • LiDAR (Light Detection and Ranging): Laser scanners measure distances and produce high-precision 3D data. Terrestrial scanners capture buildings, while airborne LiDAR maps entire landscapes.
  • Photogrammetry: Structure-from-Motion algorithms compute 3D points from overlapping photographs. More affordable than LiDAR but less precise.
  • Structured light: Projected patterns are captured by cameras and converted into 3D data. Common for interior scans.

The problem: these datasets grow enormous quickly. A single scan of a building can contain 500 million points. A city survey easily reaches several billion. How do you bring that much data into a web browser?

Potree: The Architecture Behind the Performance

Potree is an open-source WebGL viewer specifically designed for visualizing massive point clouds in the browser. Its core principle is a hierarchical data structure based on an octree.

The Octree

An octree recursively subdivides three-dimensional space into eight equal cubes (octants). Each level of the hierarchy contains an increasingly fine resolution of the point cloud:

  • Level 0 (root): A heavily simplified version of the entire cloud — perhaps 100,000 points.
  • Level 1: Eight child nodes, each with more detail for its spatial region.
  • Level N: Full resolution, but loaded only for the visible portion.

This principle is called Level of Detail (LOD). Distant regions are represented with few points; nearby regions are shown at full resolution. The viewer dynamically loads only the nodes relevant to the current camera position.

The Conversion Process

Before a point cloud can be visualized in Potree, it must be converted. PotreeConverter transforms raw data (LAS, LAZ, PLY, XYZ) into the Potree format:

PotreeConverter input.las -o output_directory --generate-page

The converter builds the octree hierarchy, compresses the data, and creates a metadata file (metadata.json) that the viewer needs for loading.

Three.js Integration

Potree is built on Three.js, the most widely used WebGL library. This enables seamless combination of point clouds with other 3D objects:

import * as THREE from 'three';
import { PotreeLoader } from 'potree-loader';

const scene = new THREE.Scene();
const loader = new PotreeLoader();

const pointCloud = await loader.load('cloud/metadata.json');
scene.add(pointCloud);

// Overlay BIM model
const gltfLoader = new GLTFLoader();
const building = await gltfLoader.loadAsync('model.glb');
scene.add(building.scene);

Integration with Three.js opens up numerous possibilities: lighting, shadows, transparent overlays, annotations, and interactive measurement tools.

BIM Overlay: Point Cloud Meets Building Model

A particularly valuable use case is overlaying point clouds with BIM models (Building Information Modeling). This compares the as-built state (point cloud) with the as-designed state (BIM model):

  • Construction progress monitoring: Automatic comparison between planned and built conditions.
  • Clash detection: Identification of deviations between design and reality.
  • As-built documentation: Augmenting existing BIM models with actual building conditions.

The technical challenge lies in precise registration — aligning both datasets in the same coordinate system. ICP algorithms (Iterative Closest Point) and manual control points are employed here.

Performance Techniques

Fluid rendering of billions of points requires multiple optimization strategies:

Frustum Culling

Only points within the visible camera range (view frustum) are loaded and rendered. Octree nodes that lie entirely outside are immediately discarded.

Point Budget

Potree limits the total number of simultaneously displayed points (typically 1-5 million). When the budget is exceeded, distant or less important nodes are unloaded. This guarantees constant frame rates regardless of dataset size.

Adaptive Point Size

Point sizes are adjusted based on distance. Up close, they are small and dense; far away, they are larger to fill gaps. This creates the visual impression of a continuous surface.

Web Workers and Streaming

Data loading and decoding occurs in Web Workers to avoid blocking the main thread. New nodes are loaded asynchronously as the user navigates.

Use Cases

Potree-based solutions find applications across numerous industries:

  • Architecture, Engineering, and Construction (AEC): Construction site documentation, as-built surveys, quality control.
  • Surveying and geospatial: Terrain models, infrastructure capture, volume calculations.
  • Cultural heritage: Digital twins of historic buildings and archaeological sites. Complete 3D capture enables virtual walkthroughs and serves as documentation for future generations.
  • Forestry: Tree heights, crown volumes, and stand analyses from airborne LiDAR data.
  • Industrial facilities: Documentation of complex piping systems and plant planning.

Conclusion

Potree has democratized the visualization of massive 3D point clouds. Where expensive desktop software with powerful hardware was once required, a web browser now suffices. The combination of octree hierarchy, level of detail, and WebGL rendering makes it possible to interactively explore billions of points.

For us at ION Solutions, Potree is a central building block in developing web-based 3D Point Clouds applications — from construction site documentation to surveying visualization. The technology continues to mature, and with WebGPU on the horizon, the possibilities will expand significantly in the coming years.

E

Edvin Kuric

ION Solutions