-
-
Landing Page
-
-
-
Onboarding Screen 1, to pick aircraft type
-
Onboarding Screen 2, to pick simulation environment conditions
-
Onboarding Screen 3, to pick camera and tracking preferences
-
Onboarding Screen 4, to enter autonomous flight program code
-
Onboarding Screen 5, to review changes before starting the simulation environment
Inspiration
Air-to-air refueling is one of those problems that looks simple from a distance and incredibly hard once you zoom in. Consider a Air-Force fighter jet unable to refuel from a large ship, who needs to attach to another aircraft in order to refuel. A small mistake in things like alignment, timing, or closure rate can turn into a real safety issue very quickly.
This inspired us to build Boom.
We wanted to create something that makes this challenge easier to understand, easier to practice, and easier to analyze afterward. Instead of treating the refueling problem as sort of a black box, we wanted to make it optimal for simulation & testing within the browser.
What it does
Boom is a browser-based 3D aerial refueling simulator focused on the boom phase of refueling. It simulates a tanker, a receiver aircraft, boom motion, passive visible and thermal sensing, controller behavior, and safety logic.
Users can run scenarios across different mission conditions, watch how the system tracks the receiver, and see how the boom responds during alignment and insertion. After each run, they can replay what happened, scrub through the timeline, and review metrics like offset, closure rate, confidence, sensor disagreement, and safety events.
How we built it
We built Boom with Next.js, React, TypeScript, React Three Fiber, and Three.js so the whole experience could run directly in the browser. We used Zustand to manage simulator and UI state, and we wired the sim around a loop that connects perception, tracking, control, autopilot behavior, safety checks, and replay.
On the simulation side, we modeled a passive multispectral sensor setup with visible and thermal views, added a fused tracking layer, and connected that to controller logic that guides the boom toward the receiver. We also built replay tooling and run storage so users can go back through a scenario and understand exactly what changed over time.
Challenges we ran into
One of the biggest challenges was making the project feel believable without getting lost in unnecessary complexity. We had to decide what level of realism mattered most for a hackathon build and focus on the parts that actually helped explain the problem: relative motion, sensing, alignment, closure, and safety.
Another challenge was getting multiple systems to work together cleanly. The 3D scene, sensor logic, tracking, controller states, safety behavior, and replay system all depend on each other, so even small changes in one part could affect everything else. Making that feel smooth in the browser took a lot of iteration.
Accomplishments that we're proud of
We’re proud that Boom is not just a static visualization. It is an interactive simulator with sensing, control logic, safety states, mission scenarios, and replay built into one experience.
We’re also proud that we made a technical defense-style concept feel accessible. A user can open it in the browser, understand what is happening, and immediately start exploring how different conditions affect the refueling process.
What we learned
We learned that good simulation design is as much about clarity as it is about physics. If users cannot understand what the system is seeing or why it made a decision, the simulation loses a lot of its value.
We also learned how tightly perception and control are connected. Tracking quality, environmental conditions, and safety thresholds all shape how well the boom can align and respond. Building Boom made that relationship much more concrete for us.
What's next for Boom
Next, we want to make Boom more realistic, more measurable, and more useful as a training and evaluation tool. That includes expanding the scenario library, improving the scoring and analytics, and making the replay/debrief workflow even stronger.
We also want to push further on autonomy evaluation by supporting more controller testing, better mission disturbance modeling, and richer post-run comparisons. The long-term goal is to make Boom a practical rehearsal and debrief platform for one of the most difficult parts of aerial refueling.
Built With
- bun
- indexeddb
- next.js
- react
- react-three-fiber
- three.js
- typescript
- zustand
Log in or sign up for Devpost to join the conversation.