Black Hole Archive 3D

Step into the abyss with an interactive 3D black hole experience featuring real-time WebGL physics, deep cosmic sound design, and 21 immersive astrophysics chapters.

Comment

About the project

Black Hole Archive 3D is an interactive, photorealistic 3D space web experience and scientific encyclopedia dedicated to exploring the extreme physics of black holes—from event horizons and accretion disks to Hawking radiation and wormholes.

Inspiration

I was inspired by the breathtaking visualizations of general relativity seen in Interstellar and real observational milestones like the Event Horizon Telescope’s capture of M87* and Sagittarius A*. Black holes are among the most fascinating objects in the cosmos, yet traditional static diagrams fail to capture their dynamic bending of spacetime. We wanted to make theoretical astrophysics accessible, interactive, and visually awe-inspiring through real-time 3D simulation and immersive sound design directly in the browser.

What it does

Black Hole Archive 3D transforms complex astrophysics into an intuitive 21-chapter interactive visual archive:

Interactive 3D Schwarzschild Black Hole: Renders real-time gravitational lensing, relativistic Doppler beaming, rotating accretion disk dynamics, photon spheres, and relativistic particle jets.

Dynamic Physics Controls: Allows users to tweak black hole spin parameter , accretion rate , gravitational lensing bending intensity, tilt angle, and color palettes on the fly.

Multi-Chapter Interactive Canvas: 21 curated chapters covering Everything Black Holes—from stellar-mass collapse and supermassive engines to spaghettification, Hawking radiation, and theoretical Einstein-Rosen bridges.

Deep Spatial Audio Engine: Custom Web Audio API synthesizer that responds to user navigation and interaction with sub-bass acoustic pulses and ambient cosmic resonances.

AI Cosmic Assistant: Integrated AI guide that answers deep physics questions, explains equations, and generates customized astronomical hypothetical scenarios.

How I built it

I built Black Hole Archive 3D using a modern, performant full-stack architecture: Frontend & 3D Visuals: React 18, TypeScript, and Tailwind CSS powered by Three.js and @react-three/fiber. Custom GLSL fragment shaders simulate gravitational ray-marching curves, photon rings, and Doppler redshift/blueshift effects.

Physics Equations Integrated: Schwarzschild Radius:

General Relativity Spacetime Metric:

Hawking Radiation Temperature:

Differential Tidal Stretching (Spaghettification):

Audio Synthesizer: Built-in procedural Web Audio API engine generating sub-bass hums and dynamic frequency shifts tied to active chapters and user interactions.

AI Integration: Node.js/Express backend leveraging @google/genai to handle streaming AI Q&A and cosmic parameter explanations without exposing API keys.

Challenges I ran into

Simulating Real-Time Relativistic Lensing in WebGL: Calculating exact geodesic light bending near the photon sphere in standard real-time rasterization is computationally heavy. We optimized custom GPU GLSL shaders to approximate ray deflection and accretion disk distortion at 60 FPS across desktop and mobile devices.

Seamless UI Overlay Alignment: Ensuring the floating chapter controls, orbital parameter sliders, and interactive overlays never obscured the core 3D viewport required careful responsive spatial layouts and dynamic z-index layering.

Immersive Audio Feedback: Generating smooth, low-latency sub-bass haptic feedback across different browser audio policies required initializing audio contexts on user gesture and tuning smooth exponential ramp envelopes.

Accomplishments that I am proud of

60 FPS Procedural 3D Shader Rendering: Smooth, responsive 3D accretion disk animation and light warping running purely client-side on WebGL.

Rich 21-Chapter Content Coverage: Comprehensive coverage from beginner concepts to advanced General Relativity mathematics with interactive visual tools.

Zero-Latency Sub-Bass Haptics: Implemented a tactile Web Audio synth that brings physical depth to UI actions and chapter shifts.

What I learnt

GPU Shader Optimization: How to use distance-field approximations in GLSL fragment shaders to represent curved spacetime lensing without dropping frame rates.

Combining Physics & Design: Balancing strict scientific accuracy with engaging visual storytelling and sleek dark-mode typography.

Hybrid AI Workflows: Integrating generative AI seamlessly as a contextual assistant rather than a gimmick, deepening user curiosity around physics equations.

What's next for Black Hole Archive 3D

Full Kerr Metric Kerr Black Hole Ray Tracing: Implementing Kerr frame-dragging visualization in WebGL shaders to simulate asymmetric ergosphere distortions.

WebXR / VR Mode: Adding WebXR support to let users step inside a virtual observation deck overlooking M87* or Sagittarius A*.

Gravitational Wave Audio Sonification: Integrating actual LIGO interferometer chirp data into the audio synthesizer for interactive merger simulations.

Built With

Share this project:

Updates

Submission history