Engineering Lab
Floor Collapse Real-time physics destruction demo.
An interactive browser-based destruction simulation showcasing on-demand physics, GPU instancing and real-time performance optimization.
Overview
Built to demonstrate real-time destruction engineering.
Floor Collapse demonstrates how modern browser technologies can deliver responsive large-scale destruction while keeping rendering and physics efficient. The project combines GPU instancing, on-demand rigid-body simulation and performance-focused rendering to create an interactive physics experience that remains smooth even during complex destruction sequences.
Click the red core to trigger destruction.
The floor is rendered as a single instanced mesh during idle state and transitions to individual physics bodies only when the collapse begins.
0
ms
Performance Architecture
Visual impact with minimal runtime overhead.
The simulation follows a performance-first architecture where expensive physics calculations are activated only when required, keeping idle rendering lightweight and responsive.
Instanced Rendering
The intact floor is rendered as a single instanced mesh to reduce draw calls and keep the GPU workload low during idle state.
Physics On Demand
Physics bodies are created only for active fragments when the explosion starts, instead of simulating every tile from page load.
Sleeping Bodies
Once fragments settle, physics simulation is frozen so the CPU no longer spends time updating inactive rigid bodies.
Static Colliders
Large invisible floor colliders are used around the broken area to preserve realistic collisions without hundreds of extra physics bodies.
Simulation Features
Designed to feel physical, not pre-rendered.
Two-Stage Collapse
The floor first drops inward before the explosion pushes fragments outward, creating a more believable destruction sequence.
Rigid Body Fragments
Each activated tile becomes a dynamic physics body with gravity, rotation, impulses and collision response.
Smooth Reconstruction
A second click returns every fragment to its original position and rotation through a smooth reset animation.
Live Metrics
The demo displays FPS, frame time, physics state, active bodies, fragments, draw calls and triangle count in real time.
Technology
Powered by browser-native real-time graphics.
Three.js
WebGL
Cannon.js
GSAP
InstancedMesh
Rigid Bodies
Performance HUD
FAQ
Engineering decisions behind the collapse.
The main challenge was creating a visually convincing destruction effect directly in the browser without turning the page into a heavy physics simulation from the moment it loads. The project solves this by keeping the scene lightweight during idle state and activating expensive physics logic only when the user triggers the collapse.
Simulating every floor tile as a rigid body from page load would waste CPU resources while nothing is happening. Instead, the intact floor is rendered efficiently first, and individual physics bodies are created only when the collapse starts. This keeps the demo responsive before, during and after the interaction.
The intact floor uses instanced rendering, meaning many repeated tiles can be drawn through one optimized GPU path instead of creating a separate mesh and draw call for every tile. This approach reduces rendering cost and allows the browser to focus performance where it matters most: the interactive collapse sequence.
The destruction is built as a two-stage interaction. First, the center area drops inward to make the floor feel structurally weakened. Then, physics impulses push fragments outward so the collapse feels dynamic rather than like a simple animation. This makes the result look more physical and less pre-rendered.
Once fragments settle, inactive bodies are allowed to sleep or stop updating unnecessarily. This prevents the physics engine from spending CPU time on objects that are no longer visibly moving. The goal was to make the simulation impressive during interaction, but quiet and stable afterward.
Static colliders help preserve believable collisions around the broken area without requiring every surrounding floor section to become a full dynamic physics object. This keeps the scene stable, avoids unnecessary rigid bodies and reduces the amount of physics work needed per frame.
The live HUD shows that the project is not only a visual effect, but an optimized real-time system. FPS, frame time, physics state, active bodies, fragments, draw calls and triangle count make the internal cost of the simulation visible while the user interacts with it.
The main trade-off was balancing realism and browser performance. A more physically accurate simulation would require more bodies, constraints and collision checks, but that would reduce responsiveness. I chose a hybrid approach: optimized rendering for the intact state, selective physics for the destruction state and cleanup logic after the motion settles.
Floor Collapse demonstrates real-time graphics, physics integration, performance optimization and interaction design in one browser-based project. More importantly, it shows the ability to identify performance bottlenecks early and design the architecture around them instead of optimizing only after the demo becomes slow.