Black Hole Render
Cinematic Three.js/WebGL black hole renderer with shader-driven lensing, bloom, adaptive quality, viewer controls, and PNG export.
Shows WebGL fluency, shader-driven visual systems, performance awareness, and polish beyond ordinary CRUD projects.
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.
The project is a technical-art proof point: it shows taste, WebGL fluency, performance awareness, and the ability to wrap a visual experiment in practical controls and verification.
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