Ridiculous number of boxes


Hey guys, here’s a demo I put together a while back:


on my hardware it’s clocking about 3ms per frame render, which is roughly 330 fps :running_woman:

As the name implies, the demo generates 10,000,000 cubes (slowly) and populates the scene. The note-worthy part is that you can view all of that at interactive frame-rate through the magic of culling. How do you cull 10,000,000 objects at an interactive frame-rate? Using a spatial index :slight_smile:

Anyway, it’s just a tech demo. The application of this tech is in my game engine for instanced meshes.

This is an oldie, here’s a topic on github with some further discussion around it:



Related: Dynamic instances

Also check out the work @takahirox has been posting on twitter the last few days:

1 Like


Looks really cool :slight_smile:

The animation demo runs super-slow though, I wonder why. I use the onBeforeCompile to patch in transform code in my stuff, so it plays well with all materials, shadows did take a bit to get to work though.

1 Like


There’s another InstancedMesh on npm, maybe add to the mix:



Also I’d like to add that he demo I sent includes intersection detection from a mouse on Desktop devices and from a crosshair on Mobile devices. So one of the reasons I wanted to implement this demo is to show how it is possible to have fast intersection detection (even for instances) using binning algorithms and WebWorkers. AFAIK THREE.js does not support collision detection for Instanced geometries.

1 Like


Hey @oguzeroglu, I understand what you mean about intersection detection. This demo here is essentially the same - camera is modeled as a frustum, and you essentially have to do an intersection test between said frustum and 10,000,000 objects each frame, so speed is pretty important. I don’t use a worker here, since it’s already fast enough for the demo, but I could see the appeal.