I built a traversable universe of 200 known stars, connected by a procedural wormhole network, in a browser

Exploring the Universe Through Web Technologies: A Browser-Based Galaxy Simulator

In an era where web development continually pushes the boundaries of what’s possible within browsers, I am thrilled to share a project that exemplifies this innovation: a comprehensive space exploration simulator built entirely with web technology. This interactive application features a navigable universe comprising over 200 known star systems, interconnected by a procedurally generated wormhole network, offering users an immersive experience of cosmic exploration right in their browser.

Introducing the Galaxy Voyager

Live Demonstration: Galaxy Voyager
Video Overview: YouTube Demo

Conceptual Foundations

The project originated from a personal fascination with our Solar System and astronomical data. What started as a simple model of our Sun and its planetary neighbors has since evolved into a virtual galaxy encompassing more than 200 real star systems, ranging from the nearby Alpha Centauri to the intriguing TRAPPIST-1 system.

Harnessing authentic astronomical data from NASA’s Horizons API and the Exoplanet Archive, the galaxy map reflects actual orbital parameters and celestial bodies. To add depth and realism, I implemented a dynamic, procedurally generated wormhole network—ensuring each interstellar journey offers a fresh, unique path through the cosmos.

Dual Modes of Exploration

The simulator invites exploration through two distinct interfaces:

1. Star System Explorer

A detailed, data-rich interface allowing users to browse and learn about over 200 star systems.
Displays precise orbital information for our Solar System utilizing NASA Horizons data.
Presents exoplanetary data for renowned systems like Kepler-22b or TRAPPIST-1.
Visualizes celestial bodies with accurate rendering of planets, moons, and stars.

2. Spaceship Navigation Mode

Offers a first-person cockpit experience for interstellar travel.
Users navigate through the network of wormholes connecting various star systems.
Accompanying dashboard features an interactive graph created with React Flow, illustrating the current network topology.

Technical Implementation and Challenges

Building this universe within the constraints of a browser posed several technical challenges:

Core Technologies

React: The foundation for building the user interface and managing application state.
React Three Fiber (R3F): Facilitates rendering complex 3D scenes directly in React components.
**Zustand