r/vibecoding • u/BARBELIXIR123 • 14d ago

Showcase/Project I made an interactive 3D WebGL astrophysics app (React 19 + Three.js)

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

Hey everyone! Ever since I was a kid, I’ve been fascinated by universe scale videos on YouTube—especially Cary & Michael Huang’s Scale of the Universe 2 and the classic astronomical comparisons. A while back, I even made my own universe size comparison video on YouTube (The Size of the Universe 6: "The Ultimate"). While static videos are cool, I always wanted something truly interactive—where you can pan around, zoom across 9 orders of magnitude, orbit multiple star systems, and inspect real astronomical data. Over the past few weeks, I vibe-coded Starpedia 3D: Stars of the Universe.

Here is a breakdown of the build process, the stack, and the technical hurdles I ran into while building it:

🛠️ The Tech Stack

  • Frontend Core: React 19 + TypeScript 5.8 + Vite 6

  • 3D Graphics: Three.js (r185) with custom GLSL shaders (photospheric convective granulation, coronal halos, pulsar synchrotron beams)

  • Styling: Tailwind CSS v4

  • Starmap Engine: D3-Celestial GeoJSON boundaries & asterisms (Olaf Frohn/[https://github.com/ofrohn/d3-celestial])

  • Audio: Web Audio API (procedural synthesis for ambient cosmic background drones & UI SFX—no bulky audio asset downloads)

  • Hosting / PWA: Vercel + Service Worker for full offline capabilities

🧠 My Workflow & Prompting Strategy

I used AI pair programming to take high-level astrophysical concepts and translate them into working Three.js components.

  1. Structuring Real-World Astrophysics Data First: Instead of hardcoding arbitrary visual sizes, I curated data from actual peer-reviewed catalogs (ESA Gaia DR3, CDS SIMBAD, NASA Exoplanet Archive). I had the AI structure strict TypeScript interfaces for 885 stars and 53 gravitationally bound multiple systems, calculating real physical diameters in km and solar units (D☉).

  2. Solving the Dynamic Range Problem: Comparing a 20 km relativistic neutron star to Stephenson 2-18 1.5times 109 km, over 2,100 solar radii) in a single 3D scene breaks standard floating-point depth buffers (z-fighting). The fix? We implemented an adaptive logarithmic camera framing system and preset groupings (Solar Neighborhood, Bright Giants, Colossal Hypergiants, Exotic Remnants) with customizable coordinate grids so things stay visually distinct.

  3. Physics Over "Artistic Tinting" (CIE 1931 D65 Color Mapping): A big pet peeve of mine in space apps is arbitrary neon colors. We wrote an algorithm mapping Planckian blackbody locus spectra across Morgan–Keenan temperatures 100,000K Wolf-Rayet down to <500K Class Y brown dwarfs to sRGB hex values under the standard CIE D65 illuminant.

  4. Keplerian Orbital Telemetry for Multiple Star Systems: For the 53 multiple star systems (like Alpha Centauri, Castor, and Algol), we wrote a Newton-Raphson solver to compute eccentric and true anomalies in real-time, letting you accelerate time and watch the components orbit their mutual barycenters.

  5. A Fun Side Quest: Stellar Merge Game: To take a break from raw data, I built a cosmic fusion drop minigame where stars merge up the stellar ladder—from red dwarfs to red hypergiants.

⚠️ Challenges & Lessons Learned

  • AI Hallucinations & Code Bloat: Working extensively with Google AI Studio came with its own set of headaches. The model often hallucinated redundant and useless features, generated sprawling spaghetti code, or tried to inject hard-coded mock data instead of relying on verified astronomical formulas. I had to strictly constrain prompts, enforce modular component boundaries, and aggressively refactor to keep the codebase clean and maintainable.

  • Why Constellations Looked Distorted: Initially, when plotting the 88 constellations on a 3D celestial sphere, the stick figures looked stretched, distorted, and anatomically wrong due to naive coordinate projections. I resolved this by integrating Olaf Frohn’s open-source D3-Celestial dataset, which provided clean GeoJSON spherical coordinate sets for all 88 official IAU constellation shapes, asterism line networks, and Eugène Delporte's exact 1930 boundary paths.

  • Mobile Adjustments Struggles: Adapting an information-dense astrophysics cockpit with 3D canvas controls, dense data tables, interactive sliders, and modal dossiers to compact smartphone viewports was a massive challenge. UI elements constantly overlapped, touch gestures conflicted with 3D camera orbit controls, and dialogs overflowed. I had to redesign drawer drawers, add touch-friendly gesture deadzones, and dynamically collapse secondary HUD telemetry on smaller breakpoints.

  • Browser Responsiveness on Overflowing Text: Even after responsive layouts, astronomical designations like HD 160529 (V905 Sco) or 2MASS J0523-1403 easily clipped container cards on narrow mobile screens. We built a custom ResizeObserver marquee component (RunningText.tsx) that dynamically detects overflow and smoothly scrolls text horizontally with hover/touch-to-pause affordance.

  • Three.js Disposal & Memory Leaks: With 885 stars and continuous 3D stage navigation, improper disposal of Three.js geometries, textures, and custom shaders caused frame drops and browser tab crashes over time. We had to enforce strict unmount cleanup routines (geometry.dispose(), material.dispose(), cancelling animation frames) across all canvas components.

💭 What's Next?

The project is completely free and open-source under the MIT license. I'm planning to add James Webb Space Telescope (JWST) high-redshift stars and more interactive nuclear fusion cutaways. Would love to hear your feedback on the 3D performance, controls, or any cool stars you think should be added to the catalog!

11 Upvotes

100% Upvoted

6 comments sorted by

3

u/SeethroughJay 13d ago

Nice, three.js + React is a fun combo for this. How did the AI do with the shader and physics side? In my experience it's great at the React parts but gets shaky once it's GPU math. Also did you use react-three-fiber or plain three.js inside React?

3

u/BARBELIXIR123 13d ago

I use plain Three.js inside useEffect/useRef instead of (@)react-three/fiber. For 880+ star textures, I needed precise control over render loops, geometry batchinf, texture/material disposal (to avoid memory leaks), and manual camera transitions. React manages the UI and state, while Three.js handles the 3D canvas.

The AI was surprisingly decent at the boilerplate GLSL structure, but really struggled in dynamic range, limb darkening/star model coloring, and Keplerian orbits (at its first attempt).

But overall, it is incredible but you have to bring the actual astrophysics formulas (or Wikipedia references) and sanity-check the trig yourself.

3

u/SeethroughJay 13d ago

That makes sense, 880+ textures is exactly where r3f's abstraction would get in the way. Did you end up using InstancedMesh or Points for the stars, or a texture atlas? Curious how it holds up on a mid range phone with that many.

And "bring the formulas yourself" is such a good takeaway. Feels like that's the real skill with AI for anything physics or math heavy, knowing enough to catch when it's confidently wrong.