Black Hole Render
Cinematic Three.js/WebGL black hole renderer with shader-driven lensing, bloom, adaptive quality, viewer controls, and PNG export.
Real-time Three.js/WebGL black-hole renderer with shader-driven gravitational lensing, bloom, particles, and adaptive quality; exports PNG stills.
Black Hole Render is a cinematic procedural Three.js experiment built around shader-driven visuals, responsive quality profiles, and export-ready stills. It combines layered geometry, lensing, bloom, particles, orbiting bodies, and compact viewer controls.
It pairs the visual experiment with practical controls - presets, a clean still-export mode, and a WebGL fallback - plus smoke tests across desktop render, mobile controls, and export.
Tech Stack
Key Features
- Cinematic, high-energy, and minimal visual presets
- Mobile and desktop adaptive quality profiles
- PNG viewport export
- Clean mode for higher-fidelity stills
- WebGL fallback for unsupported hardware
- Smoke tests for desktop render, mobile controls, and export
Technical Highlights
- Three.js scene with layered shader geometry
- Screen-space lensing and bloom-driven presentation
- Hidden-tab pause behavior
- Resize handling for stable framing
- Quality caps for high-density mobile screens
Architecture
Render Pipeline
- Scene geometry and shader layers
- Postprocessing for bloom and stylized output
- Particle and orbiting body systems
Viewer Controls
- Preset switching
- Clean still-export mode
- Reset and export actions
Challenges & Solutions
Keeping a heavy visual scene responsive on mobile
Balancing cinematic quality with export and runtime controls
Providing graceful fallback when WebGL is unavailable