Galaxy Voyager - A procedural galaxy explorer with 220+ star systems, built with React Three Fiber & Post-Processing

Showcase
, , ,
1

Creator: Vikas Kumar Singh

Live Demo: Galaxy Voyager Video Showcase: Youtube Demo

Galaxy Voyager is a real-time, browser-based space exploration simulator built entirely on the Three.js ecosystem. The core challenge was to render a vast, data-driven universe at a cosmic scale, pushing the boundaries of what can be achieved in a web browser without traditional 3D assets.

The entire project is built declaratively using React Three Fiber (R3F), which was instrumental in managing the complex scene graph across 220+ unique star systems.

Key technical features implemented with Three.js:

  • Procedural Generation: Wormhole Network is generated procedurally using stars data to create dynamic wormhole network at every visit

  • Advanced Post-Processing: The project’s unique visual identity was achieved through a sophisticated post-processing pipeline. Using R3F’s ecosystem (@react-three/postprocessing), a chain of effects like bloom, Chromatic aberration,noise, and color adjustments were layered to give stars their intense glow and the universe its ambient feel. The wormhole travel sequence was created by chaining several passes together to distort and warp the final rendered image in real-time.

  • Performance at Scale: To maintain a stable 50-60 FPS, performance was critical. The solution for handling cosmic-scale floating-point precision issues involved a world-partitioning system, where each star system is a self-contained THREE.Scene that is dynamically loaded and unloaded, with the camera and world origin re-centered on each jump.

  • Data Visualization: The project parses and visualizes real orbital data from NASA’s APIs, converting complex ephemeris data into dynamic Line geometries that update over time.

This project was a deep dive into the power and flexibility of Three.js for creating large-scale, data-driven, and visually rich experiences on the web.

Technology Stack:

  • Core: Three.js, React Three Fiber (R3F)

  • Visuals: @react-three/postprocessing

  • State Management: Zustand

  • Frontend: React

  • UI: React Flow (for the 2D star map)

2 Likes
2

Would love some feedback from this community,this is my first big project on threejs

3

Just curious, if everything is procedurally generated (this is great!), why do you load and unload star systems? Would it be easier just to regenerated them on demand?

1 Like
4

Sorry i should have been clear.Its the wormhole network that is procedurally generated,and well its technically possible i guess to create them on demand,i should probably look into it.I m keeping a track of scene registry at high level that loads and unloads scene and that scene registry is dynamically created once portal network is created with stars data

1 Like
6

I would suggest a split-screen (or PIP) mode. It has been popularized in creative since at least the 80’s (from RPGs to 3D design spaces). One (1) benefit is that a smaller window (or scissor) improves performance. On that note, there was considerable slowdown for a sparse presentation. A second (2) benefit is that with a supplementary zoom view, the user has more context for their interaction (slow or not). On that note, a detailed celestial simulation would underscore the benefit of R3F (as opposed to CSS).

If you don’t understand, perhaps supplementary resources in the form of historic archives or tutorial examples could be found. I would estimate an R3F engineer could revise the architecture in 180 minutes.

~ T.M.
Team Progrenn “Prognosis” Progenesis

1 Like
7

Hi T.M.,

Thank you for the excellent feedback on my project.

The PIP/split-screen suggestion is a fantastic idea. You perfectly clarified the performance benefits (pixel fill-rate) and the UX advantage over a simple gizmo (context vs. orientation).

It’s a powerful technique I hadn’t considered and will definitely be exploring.

Much appreciated,

Vikas Kumar Singh
Creator of Galaxy Voyager

1 Like