KesslerEdge - Stardance

Ship #1

@himanshu_thumu on KesslerEdge · about 1 month ago

KesslerEdge is an interactive, full-scale, scratch-made 3D orbital debris tracking and collision-avoidance simulator that I made for the Hack Club Stardance Challenge to visualize the exponential threat of Kessler Syndrome in Low Earth Orbit. I programmed the whole thing from the ground-up in Three.js – eschewing crude linear screensaver physics in favor of a truly deterministic orbital mechanics core which allows for 3,500 autonomous objects of space junk to orbit along separate 2D orbital trajectories which constantly map into 3D Cartesian space. One of the key technical challenges was scale, to transform the simulation from mere static debris into a dynamic Kessler Cascade where the collision of space debris creates many new and faster moving fragments, I architected an Object Pooling system capable of pre-allocating for over 12,000 particles in memory upon startup and setting draw ranges that only allow for currently-visible particles to be rendered, preventing the browser from ever entering into garbage collection, maintaining a perfect WebGL framerate.

To realize the project I programmatically generated a Space Shuttle-like player vehicle with procedurally placed cylinders, cones, and boxes, a low-poly space shuttle composed entirely of math and logic; mapped the Earth with a high resolution texture map; and even composed a post-processing pipeline with a UEBloom Pass that singles out high-energy light sources for visual pop.

The most difficult challenge, though, was coordinating the game loop with user interactions, discarding a particularly sickening camera shake in favor of a clean and responsive tactical HUD override; it pulsates an ominous red CSS vignette over the user’s screen and “snaps” a high-sensitivity 3D sensor cone to the point of interest when it gets too close. The simulation has hard fail-states for when fuel runs out and when the hull is breached, and even features a three second startup-period in order to avoid the common phenomenon of statistical spawn kills. You can test the live demo here by pressing the Up/Down arrow keys on your keyboard to try and compensate for increasing debris count while keeping your shuttle operational.

2 devlogs
4h
18.65x multiplier
69 Stardust

Try project → See source code →

Open comments for this post

@himanshu_thumu on KesslerEdge · about 1 month ago

2h 10m 33s logged

I completely rebuilt the visual identity and underlying simulation engine for KesslerEdge v3.0, taking it far beyond a simple prototype. Instead of using a basic block for our satellite or risking broken asset links with an external 3D model, I wrote a compound geometry script that procedurally builds a low-poly Space Shuttle directly from Three.js cylinders, cones, and boxes entirely out of math, while also wrapping the Earth in a high-res texture map to properly ground the simulation. To handle danger feedback, we experimented with a violent screen-shake mechanic but scrapped it when it ruined the readability of the orbital paths; instead, we engineered a Tactical HUD override where a pulsing red CSS vignette bleeds onto the screen and the 3D sensor cone physically snaps from cyan to warning-red during an evasion state. We also locked in fatal game-over triggers for when fuel hits zero or the shuttle hull is breached, adding a three-second hardware calibration grace period on boot to prevent immediate random spawn-kills. The biggest optimization milestone was architecting a true Kessler Cascade to simulate space debris colliding and fracturing into smaller, faster-moving pieces; to prevent the browser’s garbage collector from stuttering under thousands of dynamic allocations, I implemented an Object Pooling system that pre-allocates a memory block of 12,000 coordinates on load, using setDrawRange to only render the initial 3,500 active particles and seamlessly activating the dormant data blocks as the environment collapses, keeping the framerate locked at a smooth, high-performance pace.

Open comments for this post

@himanshu_thumu on KesslerEdge · about 1 month ago

1h 32m 47s logged

Pushed a huge KesslerEdge v2.5 refactor. I was pretty happy when I figured out the old physics engine was really just simulating debris ricocheting around like a DVD logo on my screen bouncing between invisible walls. Which was completely pointless for collision detection. So that got thrown out, I wrote a deterministic orbital core where every one of the ~3500 pieces is now locked into their real 2D orbits which is then transformed into 3D space. It actually moves around without destroying the framerate. Before the end of the session I hooked up a UnrealBloomPass to the wireframe world and the debris that essentially makes the GPU compute that they are actually emitting light rather than it being a flat WebGL effect. Time to start work on game state tracking and collision detection loop.