r/threejs • u/Infinite-Fly-2756 • 6m ago
Rebuilding monuments piece by piece in three.js: 25M triangles per frame, where would you start?
I've been working on a viewer that shows buildings going up phase by phase: thousands of small pieces dropping into place on the real footprint, with a timeline you can scrub.
The models are generated by an AI agent from sources and photos, but I'd like feedback on the three.js side.
Main issue: the Colosseum pushes about 25M triangles per frame. It's 49k instanced blocks, each a rounded box of 108 triangles, rendered in the colour, shadow and GTAO passes. Unbuilt pieces are collapsed to zero in the vertex shader and frustum culling is off. Draw calls are fine (under 100). What would you tackle first: distance LOD for the blocks, not drawing unbuilt instances at all (sorting them by build time and lowering the instance count), or something else?
Two smaller questions:
- Walls can also be one continuous surface, with the stone joints drawn in the fragment shader and fading out when a joint gets thinner than a pixel. Does it hold up when you get close?
- Textures are photo-scanned surfaces, triplanar-mapped in world space at their real size, on a plain paper backdrop with a shadow floor. Does the stone read as stone?
Demo: https://gleaming0427.github.io/monument/view/#leaning-tower-of-pisa
Code (MIT): https://github.com/Gleaming0427/monument
