A real-time interactive black hole simulation built with Three.js and WebGL shaders, featuring accurate gravitational physics, ray tracing, and stunning cosmic visuals.
Try it out here
- Gravitational Lensing: Light rays bend around the black hole's massive gravitational field
- Schwarzschild Metric: Accurate spacetime curvature calculations
- Doppler Beaming: Relativistic effects on light from rotating accretion disk
- Event Horizon: Proper black hole boundary rendering
- Accretion Disk: Realistic hot plasma disk with temperature-based coloring
- Rich Cosmic Background: Procedurally generated stars, galaxies, nebulae, and cosmic dust
- Ray Marching: Real-time ray tracing through curved spacetime
- Dynamic Lighting: Temperature-based blackbody radiation simulation
This simulation is heavily inspired by the excellent physics explanations from ScienceClic English:
Primary References:
- Simulating Black Holes in C++ by kavan
- similar black hole simulation by oseiskar
- physics by oseiskar
- Light follows geodesics in curved spacetime
- Massive objects bend light paths according to Einstein's General Relativity
- Implementation uses simplified Schwarzschild metric calculations
- Event horizon at radius:
Rs = 2GM/c² - Spacetime curvature affects light ray trajectories
- Proper handling of the photon sphere and unstable orbits
- Keplerian Orbital Motion: Inner disk rotates faster than outer regions
- Temperature Gradient: Inner regions reach higher temperatures due to friction
- Blackbody Radiation: Color temperature corresponds to plasma temperature
- Spiral Structure: Magnetic field effects and turbulence patterns
- Doppler Beaming: Light from approaching disk appears brighter/bluer
- Gravitational Redshift: Light loses energy climbing out of gravitational well
- Time Dilation: Effects of strong gravitational fields on light propagation
- Modern web browser with WebGL support
- No additional installations required
-
Clone or Download the project files:
git clone [repository-url] cd black-hole-simulation -
Serve the files using any local server:
# Using Python python -m http.server 8000 # Using Node.js npx http-server # Or simply open index.html in a modern browser
-
Open in browser: Navigate to
http://localhost:8000
| Control | Action |
|---|---|
| Mouse Drag | Orbit around the black hole |
| Mouse Wheel | Zoom in/out |
| Accretion Disk | Toggle plasma disk visibility |
| Gravitational Lensing | Enable/disable light bending |
| Doppler Effect | Toggle relativistic color shifts |
| Observer Distance | Change viewing distance (3-25 units) |
| Black Hole Mass | Adjust gravitational strength (0.5-3.0) |
| Time Scale | Control disk rotation speed |
| Quality | Ray marching steps (Fast/Medium/High/Ultra) |
black-hole-simulation/
├── index.html # Main HTML page
├── app.js # Three.js application and physics
├── styles.css # UI styling
├── assets/ # Optional: for organizing media files
│ ├── background.jpg
│ ├── starry_background.jpg
│ └── stars.jpg
└── README.md # This file
- Fragment Shader: Implements ray marching through curved spacetime
- Physics Calculations: Real-time gravitational deflection
- Procedural Generation: Cosmic background with multiple layers
- Adaptive Step Size: Larger steps far from black hole
- Quality Settings: Adjustable ray marching iterations
- Efficient Rendering: Optimized shader code for 60fps
- Schwarzschild Deflection: Simplified geodesic integration
- Accretion Disk Intersection: Ray-plane intersection with physics
- Cosmic Background: Multi-layer procedural generation
- Camera System: Spherical coordinate orbital mechanics
- Chrome 80+
- Firefox 75+
- Safari 14+
- Edge 80+
Requirements: WebGL 1.0 support, Hardware acceleration recommended
Contributions are welcome! Areas for improvement:
- More accurate relativistic effects
- Additional cosmic phenomena
- Performance optimizations
- Mobile device support
- Educational overlays
Physics Inspiration: kavan
Technical Stack:
- Three.js - 3D Graphics Library
- WebGL - GPU-accelerated rendering
- GLSL - Shader programming
This project is open source. Feel free to use, modify, and distribute.
Experience the wonder of black holes and the warping of spacetime in real-time. Drag to explore, and watch as light itself bends around one of the universe's most extreme objects.