https://github.com/rmarchet/blackhole-ts
Simulate a Schwarzschild black hole using three.js
https://github.com/rmarchet/blackhole-ts
astronomy blackhole glsl raytracing reactjs shader simulation threejs vitejs
Last synced: 2 months ago
JSON representation
Simulate a Schwarzschild black hole using three.js
- Host: GitHub
- URL: https://github.com/rmarchet/blackhole-ts
- Owner: rmarchet
- License: mit
- Created: 2025-04-23T06:34:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-15T04:01:54.000Z (about 1 year ago)
- Last Synced: 2025-05-15T04:42:55.971Z (about 1 year ago)
- Topics: astronomy, blackhole, glsl, raytracing, reactjs, shader, simulation, threejs, vitejs
- Language: TypeScript
- Homepage: https://rmarchet.github.io/blackhole-ts/
- Size: 20 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Black Hole Visualization
- 1. [Screenshot](#Screenshot)
- 2. [Features](#Features)
- 3. [Technologies Used](#TechnologiesUsed)
- 4. [Getting Started](#GettingStarted)
- 4.1. [Prerequisites](#Prerequisites)
- 4.2. [Installation](#Installation)
- 5. [Controls](#Controls)
- 5.1. [Camera Controls](#CameraControls)
- 5.2. [Visual Controls](#VisualControls)
- 6. [How It Works](#HowItWorks)
- 7. [Project Structure](#ProjectStructure)
- 8. [License](#License)
- 9. [Acknowledgments](#Acknowledgments)
- 10. [Docs](https://github.com/rmarchet/blackhole-ts/tree/main/Docs)
A real-time 3D visualization of a black hole using React, Three.js, and GLSL shaders. This project simulates gravitational lensing, accretion disk effects, and relativistic beaming around a black hole, inspired by scientifically accurate black hole renderings.
This is one of the possible visualizations that can be generated with this app:
- Real-time gravitational lensing simulation
- Accretion disk with multiple texture options
- natural
- arrows
- stripes
- grid
- blue
- Doppler shift effect
- Relativistic beaming effect
- Photon ring at the event horizon
- Rotation to simulate a Kerr black hole
- frame dragging effect
- Customizable glow effects
- Interactive camera controls with orbit mode
- Performance quality adjustment
- Post-processing effects:
- Bloom with adjustable intensity
- Glow with customizable parameters
- Background options:
- Star field with proper parallax
- Milky Way background
- Persistent settings using local storage
- React + TypeScript
- Three.js
- React Three Fiber
- GLSL Shaders
- Vite
- Local Storage for persistent settings
- Node.js (v20 or higher)
- npm or yarn
1. Clone the repository:
```bash
git clone https://github.com/rmarchet/blackhole-ts.git
cd blackhole-ts
```
2. Install dependencies:
```bash
npm install
# or
yarn install
```
3. Start the development server:
```bash
npm run dev
# or
yarn dev
```
4. Open your browser and navigate to `http://localhost:5173`
### 5.1. Camera Controls
- Left-click + drag: Rotate camera
- Right-click + drag: Pan camera
- Mouse wheel: Zoom in/out
- Toggle orbit mode for automatic camera rotation
### 5.2. Visual Controls
- Performance Quality:
- High quality: More accurate ray marching steps
- Low quality: Better performance
- Bloom Effect:
- Adjustable intensity
- Configurable threshold and radius
- Glow Effect:
- Toggle glow
- Adjustable intensity
- Accretion Disk:
- Multiple texture options
- Adjustable intensity
- Toggle Doppler shift
- Background:
- Toggle star field
- Toggle Milky Way
- Adjustable background intensity
The visualization uses advanced ray marching techniques in GLSL shaders to simulate:
- [Gravitational lensing](docs/Gravitational%20Lensing.md) around the black hole using geodesic calculations
- Accretion disk with realistic [Doppler and relativistic effects](docs/Doppler%20Shift.md)
- Photon ring at the event horizon
- Relativistic beaming and light aberration
- [Relativistic Jet](docs/Relativistic%20Jet.md) for a rotating black hole
- Star field and Milky Way background with proper parallax
- Post-processing effects for enhanced visual quality
- `src/components/`: React components including the main BlackHole component
- `src/shaders/`: GLSL shader code for the visualization
- `src/hooks/`: Custom React hooks for state management
- `src/constants/`: Configuration and constant values
- `src/assets/`: Textures and static assets
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
- Inspired by the work of Kip Thorne and the visual effects team of "Interstellar"
- Based on scientific papers about black hole visualization
- Thanks to the Three.js and React Three Fiber communities