How We Built a Fully Destructible Voxel City That Runs in Your Browser
Every kaiju game lives or dies on one question: what happens when you punch a building? For Monster Destruction, our answer had to be "the whole thing collapses, floor by floor, physically" — and it had to happen in a browser tab, with no install, no loading wheel of death, on a mid-range GPU.
This is the devlog on how we built that destructible voxel city: roughly 650 buildings, every one of them smashable down to the voxel, running at a 60fps target in plain JavaScript. No engine license, no build step, one HTML page.
Here's every major decision and the browser constraint that forced it.
Why a Destructible Voxel City at All?
Destruction is the entire fantasy. There's a reason games like Rampage and Terror of Hemasaurus made buildings the co-star — we've written before about why smashing cities feels so good, and the short version is: destruction only satisfies when it feels earned. Scripted collapse animations read as fake within minutes.
Voxels solve this. When a building is made of discrete blocks, damage is just "remove these blocks." The player can see exactly what they broke, and the wreckage is honest — it's the same geometry, minus the part you punched.
But voxels are expensive, and browsers are not where you'd normally spend that budget. So every system below is really a performance decision wearing a design hat.
650 Buildings, One Draw Call Philosophy
The naive approach — one mesh per voxel — dies instantly. A single office tower can be thousands of voxels; multiply by ~650 buildings and you've asked the GPU driver to melt.
Instead, each building is an instanced mesh of voxels. The GPU gets one geometry (a cube) and a big buffer of transforms, and draws the whole building in a single call. Destroying a voxel means editing that instance buffer, not creating or deleting objects.
This is the load-bearing decision of the whole project. Instancing is what lets a browser-based destructible voxel city exist at this scale — WebGL draw calls are precious, and this spends them at the building level instead of the block level.
Hollow Shells With Real Insides
Here's a trick and a confession in one: the buildings are hollow shells. Filling every tower with solid voxels would multiply memory and damage-processing cost for interior blocks nobody ever sees.
But pure shells feel like movie sets — punch through a wall and there's nothing behind it, which kills the fantasy immediately. So each shell gets interior floor slabs and an elevator core. When you smash a hole in a skyscraper, you see floors, you see structure, you can climb inside and gut it from within.
You get maybe 90% of the "real building" feel for a fraction of the voxel count. In a browser, that trade isn't optional — it's the only way the city fits in memory and still leaves headroom for the military spawning tanks and jets on top of it.
One Damage Primitive to Rule Every Weapon
Punches, tail swipes, breath weapons, tank shells, helicopter rockets, the LEVIATHAN's attacks — under the hood, every single one of them is the same call: a damageSphere. Position, radius, force. That's it.
Why so spartan? Two reasons.
First, browser performance is death by a thousand code paths. One primitive means one hot loop to optimize, one function that has to be fast, and it gets all the attention.
Second, it makes the game trivially extensible. A new weapon in Monster Destruction is just a new way of aiming damageSpheres — bigger, faster, chained in a line. When we added the second map (neon-night Neo-Tokyo alongside sunny Harbor Bay), zero destruction code changed. The city doesn't know or care what hit it.
The Flood-Fill That Makes Chunks Fall
Removing voxels is easy. Making the consequences feel real is the hard part, and it comes in two systems.
System one: structural connectivity. After damage, we run a flood-fill from the ground up through the building's remaining voxels. Anything the fill can't reach is, by definition, no longer connected to the earth — so it becomes falling debris. Carve through a tower's midsection and the entire top half detaches and drops, because the algorithm genuinely discovered it was floating.
Flood-fill is old, boring, and beautiful here: it's cheap enough to run in a frame budget, it needs no physics engine, and it never produces the classic destruction-game embarrassment of a chandelier building hovering on nothing.
The Gravity Pass: Why Buildings Pancake
System two is the one players screenshot. A gravity pass compares each layer of a building — its remaining structural strength — against the load of everything stacked above it. Weaken a floor past its threshold and it fails, and the floors above come down onto the one below, which now has to hold even more with whatever strength it has left.
That's a pancake collapse, emerging from a support model instead of an animation. It also creates genuine strategy: hollowing out a skyscraper's ground floor is faster than punching it down top-to-bottom, exactly like you'd hope. Since your havoc score is on the line every run — extract with it banked, or die and keep only 35% — efficient demolition is real gameplay, not just spectacle.
The two systems compose. The gravity pass drops mass; the flood-fill catches whatever got orphaned in the chaos. Together they make the destructible voxel city behave like a structure, not a health bar with a skin on it.
Never Allocate Mid-Combat
The dirtiest browser constraint isn't raw speed — it's the garbage collector. JavaScript will happily let you allocate debris particles every frame, then stutter the whole game while it cleans up. A hitch during a building collapse is the worst possible moment.
So all debris and dust effects are pooled. Every particle that will ever exist is created up front; a collapse just activates dormant ones and recycles them when they settle. During gameplay, the effects system allocates nothing. Steady frame times matter more than peak frame rate, and pooling is how you buy them.
Culling, Fog, and the 60fps Target
The remaining budget goes to not drawing things. Distance culling drops far-away buildings from the render entirely, and per-quality fog hides the seam — lower quality settings pull the fog in closer, so the culling horizon is always wrapped in atmosphere instead of pop-in. On Neo-Tokyo's neon night map, the fog is practically an art direction feature.
The result holds a 60fps target on mid-range GPUs, in a tab, which was the whole point.
And the stack is deliberately unfashionable: Three.js, plain JavaScript, no build step, one HTML page. No bundler, no framework, no transpile wait. Open the file, edit, refresh. For a two-map game with a skill constellation, 80+ cosmetics, and a global leaderboard, boring tooling kept iteration speed absurdly high — and it's why the game loads fast enough to qualify as one of the browser kaiju games you can play right now, free, no install.
If you want to feel the difference between real structural collapse and a canned animation, go flatten Harbor Bay yourself — the ground-floor trick works exactly as described. And if voxel demolition sends you down the genre rabbit hole, our kaiju games guide covers where the giants of the genre came from.
FAQ
How does the destructible voxel city stay at 60fps in a browser?
Four things: instanced meshes (one draw call per building instead of per voxel), hollow shells with interior slabs to cut voxel counts, pooled debris so combat never triggers garbage collection, and distance culling wrapped in per-quality fog. The target is 60fps on mid-range GPUs.
Do buildings actually collapse physically, or is it an animation?
It's a real support model. A flood-fill from the ground detaches any voxels no longer connected to earth, and a gravity pass compares each floor's remaining strength to the load above it — weaken a floor enough and everything above pancakes down. No canned collapse animations.
Do I need to install anything to play Monster Destruction?
No. It's free and runs in any modern browser — one HTML page built on Three.js, no download, no account required to start smashing. Play it at monsterdestruction.com.