Aerosphere: A Three.js Planetary Sandbox
1. The Story
My friend randomly asked me one day if our college provided gpus for participating in major online hackathons, I was curious as to why he needed GPUs and he told me about the build small hackathon conducted by Hugging Face and Gradio!
So I checked this out myself and decided that I am also going to spend my first half of June building something awesome for people to see.
End Result: A WebGL and Nvidia-Minitron powered Planetary sandbox where you can mess with a planet anyway you want! Just tell the LLM what u want to see.
Space: Aerosphere
This hackathon featured 2 tracks:
- Backyard AI: Solve real problems for people.
- An Adventure in Thousand Token Wood: Build something cool, weird, delightful for other people to see, that needs AI to exist.
Well this was an easy choice....
Ofcourse I chose track 2!! I mean it's not often you get to build something really fancy and cool for people to enjoy! Limited by judges on many hackathons who push you to make something that "solves a problem", you don't really think about making creative stuff that can entertain.
After receiving my $250 Modal credits, I started getting out my first designs for the website. Here are some of the precursor designs:
| First Iteration | Second Iteration |
|---|---|
 |
 |
| Third Iteration | Fourth Iteration |
 |
 |
And finally, I came up with a design like this:
Here is the technical breakdown of AeroSphere—a real-time, interactive planetary simulation where every LLM inference directly impacts rendering shaders in a deep-space WebGL HUD.
2. The Vision: Making AI understand how planets work.
All I wanted was to experience magic. A planet actually changing colors based on my will. The concept was simple but hard to implement: Rather than answering the query in conversation, the user inputs a command ("Plunge the continents into an ice age"). The system interprets it according to the planet's timeline and produces strict mathematical JSON code that forces the 3D globe to physically change the states of its oceans, volcanoes, and cities.
It demanded zero-latency rendering, perfect mobile UX, and lightning inference speed.
3. The Failed Second Feature.
Initially, the ambition was much bigger than just moving planetary terrain boundaries. I had the whole thing plotted out with users being able to zoom all the way down to the surface and seeing these procedurally generated micro-organisms, or organisms, emerging from lava blobs and coming alive.
I even tried using the tiniest, blazingly fast models, like Qwen, to randomly generate animations in Three.js and SVG inserted right into the DOM on the fly. It was meant to literally make the language model hallucinate an ecosystem in JavaScript code.
Qwen just did not provide good enough animations and I couldn't make it do so...Here are some examples:
| First Example | Second Example | Third Example |
|---|---|---|
 |
 |
 |
There was just not enough time left in the hackathon at this stage for me to quickly think of a fix so I just left this feature altogether and stuck with what worked perfectly. A dynamic planet sandbox.
4. The Modal Lifeline
Running that many parameters (eight billion) at sufficient speed for real-time game engine inference is absolutely brutal. I was dealing with only 4GB of VRAM, which really slowed down my inferencing! (More than six minutes per prompt).
Thanks to $250 worth of Modal credits that were provided as part of the hackathon resources, everything changed drastically. The whole architecture was moved from locally-pipelined inference to serverless GPU inference via Modal.
There was, however, one significant caveat: my intention was to receive the hackathon badge called "Off the Grid", which means that the application cannot leverage any remote cloud API services such as Modal to run its computations.
In order to obtain this badge for the application, it was necessary to redesign the architecture in such a way that all endpoints would be run locally. In particular, I have managed to implement an approach based on the use of Hugging Face's ZeroGPU decorators (@spaces.GPU). This way, upon launch in a Hugging Face Space, the application directly loads the NVIDIA Mistral-NeMo-Minitron-8B pipeline to VRAM and runs the computations there, achieving the exact same zero latency as with Modal servers, but without any cloud involvement!
5. Rendering Worlds in Kilobytes
I wrote the renderer natively from scratch using Three.js and raw GLSL Fragment Shaders. AeroSphere doesn't use a single PNG image texture. Every single element of the planet the fracture of the tectonic plates, the swirling atmospheric storms, the glowing procedural city lights is generated entirely through mathematical Fractal Brownian Motion (FBM) noise equations natively on the user's GPU:
FBM(p) = Σ (aᵢ × noise(fᵢ × p))
Because the backend passes tiny JSON deltas, the JavaScript frontend securely masks networking and inference latency by smoothly extrapolating the visual transition (.lerp()) continuously across the requestAnimationFrame loop:
V_current = V_current + α × (V_target - V_current)
This constant mathematical gap closure perfectly completes the illusion—masking the small fraction of a second it takes the Mistral backend to process inference.
6. The "CSS Heist": Hijacking Gradio
Hugging Face Spaces are built upon Gradio by default, which was inherently designed to support columns for chat input rendering. The attempt to get cinema-level glassmorphic HUD to fit properly within Three.js rendering in Gradio context amounts to nothing but war against the platform at the DOM level.
The “CSS Heist” that took place.
Using an extremely aggressive external CSS file, I hacked Gradio’s internal spacing grids using gap: 0 !important; border: transparent !important. I hardcoded the WebGL canvas element into the background layer using python HTML binding code.
7. Flowchart of the entire process
Here's a visual representation of how the app works:
Conclusion
Huge thanks to the Hugging Face community for giving me the opportunity where I pushed myself into building something that truly amazes my friends and most importantly me