/three-nanite

An attempt at reproducing unreal nanite in threejs

Primary LanguageJavaScriptMIT LicenseMIT

THREE-Nanite

Note: The code is a mess at the moment.

Live demo

Photo description:

  • 1: Original object.
  • 2: Meshletized/Clustered: Using METIS.
  • 3: Grouped meshlets: Partitions adjacent meshlets into groups using METIS.
  • 4: Merged grouped meshlets: Merges meshlets using meshoptimizer.
  • 5: Simplification: Simplify the mesh using meshoptimizer (Garland 1997).
  • 6: Split: Similar to step 2.

Photo description: Meshlets shown are the red ones, as long as the edges of the DAG don't cross there should be no cracks and a dynamic LOD is achieved (1414628 and 8154144 are simplified versions of their children).

Description

An attempt at reproducing a dynamic LOD in threejs similarly to unreal's nanite. Very far from it but nonetheless a start.
For now it clusters a mesh (meshlets), then groups adjacent clusters into a group, merges the mesh (shared vertices), performs mesh simplification to half the triangles in the mesh (max 128) and finally it splits it into 2 (should be N/2).

TODO:

  • More testing on LODS and DAG cut
  • Stream geometry to GPU

References

Nanite - A Deep Dive
The Nanite System in Unreal Engine 5
Multiresolution structures for interactive visualization of very large 3D datasets
Batched Multi Triangulations
CS 418 – Streaming, Level of Detail, and Occlusion
Real-Time Ray Tracing of Micro-Poly Geometry
CARROT - JGLRXAVPOK'S BLOG