Rendering Millions of Points in Three.js: GPU Instancing for Large-Scale 3D Data

The Challenge: Millions of Points Without Melting Your GPU

When visualizing LiDAR scans, particle simulations, or scientific datasets with millions of 3D points, naive approaches crash browsers. The problem isn't just raw numbers—it's how you render them. Three.js offers GPU instancing as a solution, but choosing the right approach requires understanding the trade-offs between PointsMaterial, InstancedMesh, and custom shaders.

Why GPU Instancing Matters

Traditional JavaScript loops creating individual objects fail at scale. GPU instancing batches identical geometry transformations into single draw calls, letting the graphics pipeline handle millions of instances efficiently. Three.js abstracts this through InstancedMesh for objects and BufferGeometry for point clouds.

PointsMaterial: The Simple Path

For point clouds, PointsMaterial with BufferGeometry is often ideal. It stores vertex positions in GPU buffers and renders them via a optimized shader. The key is using BufferGeometry.setAttribute to upload data once, then updating only when necessary.

InstancedMesh: For Repeated Objects

When you need instances of complex meshes (like trees or particles with textures), InstancedMesh shines. It manages instance matrices automatically and supports frustum culling. However, each unique material variation requires separate instances, increasing memory overhead.

Worked Example: Dynamic Point Cloud with LOD

This example renders a 1-million-point cloud with level-of-detail switching based on camera distance. We use BufferGeometry with drawRange to avoid recreating buffers when culling distant points.

// Setup (run in browser console or module)
import * as THREE from 'three';

// Create point cloud with 1M points
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(3 * 1000000);
for (let i = 0; i < 1000000; i++) {
  positions[i * 3] = Math.random() * 100 - 50;
  positions[i * 3 + 1] = Math.random() * 100 - 50;
  positions[i * 3 + 2] = Math.random() * 100 - 50;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

const material = new THREE.PointsMaterial({ size: 0.1, vertexColors: true });
const pointCloud = new THREE.Points(geometry, material);

// Dynamic LOD: adjust drawRange based on camera
let visibleCount = 1000000;
pointCloud.geometry.setDrawRange(0, visibleCount);

// Update visible count (e.g., in animation loop)
function updateLOD(camera) {
  const distance = camera.position.distanceTo(pointCloud.position);
  visibleCount = Math.min(1000000, Math.max(10000, Math.floor(1000000 / (distance / 10))));
  pointCloud.geometry.setDrawRange(0, visibleCount);
}

Trade-offs and Limitations

Memory vs. Performance: Point clouds use less memory than InstancedMesh but offer less flexibility. Each point can only have one color and size. InstancedMesh supports different materials per instance but multiplies memory usage.

Browser Constraints: WebGL2 features like compute shaders (for dynamic point generation) require modern browsers. Mobile devices may throttle complex shaders, making point size and fragment calculations critical.

Memory Leaks: Always dispose of geometries and materials with geometry.dispose() and material.dispose(). Forgetting this leaks GPU memory during scene transitions.

Actionable Steps to Verify

1. Check WebGL2 Support: Run console.log(window.WebGL2RenderingContext ? 'WebGL2 available' : 'WebGL2 missing') in browser console.
2. Profile Performance: Use Chrome DevTools > Performance tab. Record while rotating the scene—look for drawElementsInstanced calls in the flame chart.
3. Monitor Memory: Open Task Manager (Shift+Esc in Chrome) and watch GPU memory during scene changes. It should stabilize after initial load.
4. Test LOD: Move camera closer/farther and verify point count changes without stuttering.

Bottom Line

For static or semi-static point data, PointsMaterial with BufferGeometry and drawRange offers the best performance-to-complexity ratio. Reserve InstancedMesh for when you need per-instance material variations or object-space transformations. Always profile on target hardware—integrated graphics handle smaller point counts than discrete GPUs.