Hi everyone! I built my portfolio around a black hole inspired by Interstellar’s Gargantua, and I wanted to share it here.
It isn’t a model or a texture: a fragment shader traces the light around a Schwarzschild black hole for every pixel (velocity-Verlet on the photon orbit equation, up to 190 steps per pixel, 340 on the high tier). The photon ring, the secondary image and the lensed starfield come out of the physics. The disk is Keplerian fbm noise with two cross-faded epochs so the shear never winds it into sub-pixel rings, plus relativistic Doppler beaming.
The three.js side is deliberately small: the black hole is a single draw call (a full-screen quad and one ShaderMaterial), accumulated over eight jittered frames to smooth the edges, then UnrealBloomPass. Bloom was lighting up the shadow, so a SavePass keeps the clean image and puts it back inside the shadow. When nothing moves, it stops drawing.
Live demo (switch to Study to change views and toggle Doppler, the secondary images and the lens one by one):
Write-up with the shader code: How I Built a Black Hole in WebGL with Three.js · Jonás Javier
Feedback very welcome, especially on performance on phones.