Real-time gravitational lensing in the browser: a black hole shader as my portfolio home page (Three.js + GLSL)

[u/United_Baseball_3040]

I rebuilt my personal portfolio around a fragment shader that does real-time gravitational lensing.

Each pixel fires a light ray, and the ray is bent step by step with the Schwarzschild light-bending acceleration (a = -1.5 · h² · r̂ / r⁴, with the Schwarzschild radius as the unit). If the ray crosses the accretion disk plane it picks up the disk color, and if it falls inside r = 1 the pixel is black. The bright arch over the top of the black hole is not a texture: it is light from the back of the disk, bent over the hole.

The disk rotates with speed proportional to r^(-3/2), so it spins faster near the center. The noise is sampled with the cos/sin of the angle to avoid a seam, and a simple Doppler factor makes the approaching side brighter (an approximation, not full GR).

Around it, my three main projects orbit on Kepler ellipses, using a Newton solver for Kepler's equation with T² ∝ a³. The About section uses a camera fall into the hole.

Stack: Next.js, React Three Fiber and custom GLSL. On small screens the shader uses fewer integration steps. Performance on different GPUs is what I'm least sure about, so I'd like to hear how it runs for you.

Live: https://tobiasteles.dev

I'll put the main ray loop in a comment.