three-virtual-geometryBillions of triangles in three.js

Abstract ​

Rendering highly detailed scenes in real time usually means hand-made levels of detail, aggressive culling and a tight polygon budget. Virtual geometry removes the trade-off: every mesh is preprocessed into a hierarchy of small triangle clusters, and every frame a compute pass selects, per cluster, the coarsest version whose error is below a pixel on screen. Detail is then proportional to screen pixels, not to scene size.

three-virtual-geometry brings this technique to three.js on WebGPU. It builds the cluster hierarchy (with meshoptimizer), selects and culls clusters entirely on the GPU, and draws each mesh with a single indirect draw that works with three.js materials, lights and shadows. Foliage, which plain triangle simplification handles poorly, gets voxel-based coarse levels automatically. A whole scene goes through shared buffers and a fixed set of 12 compute passes, so a level with hundreds of different meshes costs the same per frame as one with a single mesh.

Results ​

Drawn triangles stay roughly constant as scenes grow, because detail follows screen pixels. Every camera view, and how to run the benchmark on your machine: Performance.

Live demos ​

The scenes run right here, in your browser, with WebGPU (Chrome, Edge or Safari 26+), ordered from the heaviest to the lightest. Pick one and press run (the real scans are a recording: 2 GB is too much for a web page). Only the selected scene runs, and it pauses when you scroll away. The first load builds the scene's cluster hierarchies; later loads come from the browser cache. The left panel shows what the GPU is doing, and the settings panel on the right holds the levers.

How it works ​

1. Build (once per mesh, cached). The mesh is split into clusters of up to 128 triangles. Neighbouring clusters are grouped, merged, simplified to half the triangles with their shared borders locked, and split again, level after level, into a hierarchy (a DAG). Every cluster stores its error and its parent's error, and errors only grow toward the root. When simplification stalls on aggregate geometry like tree crowns, a voxel proxy of the original takes over the coarse levels.
2. Select (every frame, on the GPU). A cluster is drawn when its own projected error is at most the threshold (about one pixel) and its parent's is above it. Because errors grow monotonically, exactly one version of every part of the surface passes, so there are no holes and no overlaps. Cells of instances, single instances and clusters are culled against the view frustum, by size, by distance and (when it pays off) by occlusion.
3. Draw. The selected clusters are expanded into one index buffer per pool, and each mesh draws its region with one indirect draw. The vertex shader pulls vertices from storage buffers, so the material is a normal three.js NodeMaterial.

More detail: How it works.

Use it ​

import { VirtualGeometry } from 'three-virtual-geometry';

const vg = new VirtualGeometry();
await vg.add(gltf.scene);   // every static mesh becomes virtual geometry
scene.add(gltf.scene);
renderer.setAnimationLoop(() => renderer.render(scene, camera));

Getting started · Let your AI agent set it up

Acknowledgements ​

This is an independent, open-source recreation of the virtual geometry technique popularized by Nanite, written from public descriptions of the technique. It contains no code, shaders, binaries or assets from Epic Games, and is not affiliated with or endorsed by Epic Games. "Nanite" is a trademark of Epic Games, Inc. Parts of the preprocessing and GPU pipeline started from the MIT-licensed nanite-webgpu by Marcin Matuszczyk. Mesh simplification and clustering use meshoptimizer by Arseny Kapoulkine. Cars in the import demo are from the Kenney Car Kit (CC0).

Citation ​

@software{benhaim2026threevirtualgeometry,
  author = {Ben-Haim, Elad},
  title  = {three-virtual-geometry: Virtual Geometry for three.js WebGPU},
  year   = {2026},
  url    = {https://github.com/elad12390/three-virtual-geometry},
  license = {MIT}
}