Devlog #3: How I Fought WebGL Gravity Won 🥊
Last time, I built the background automation engine for NOVA Break — the lightweight, non-blocking browser extension that visually suggests breaks by injecting a miniature, Interstellar-style anomaly directly over your active tab.
My goal today: upgrade that basic overlay into a stunning, hardware-accelerated Three.js raymarching canvas layer.
Easy, right? …Right?
The Final Boss 👹: Twin Singularities & Stutter Lag
The moment I pushed my gravitational lens formulas into a standard 3D bounding sphere, everything broke.
The fragment shader executed the raymarching math twice — once on the front face, once on the back face.
The Fallout:
-
Ghosting Effects: Two black holes rendering simultaneously on top of each other.
-
GPU Choke: Billions of relativistic steps calculated every single frame.
-
System Meltdown: Browser thread choked, text selection vanished, laptop fans screaming.
No matter what I tried, the effect stuttered, broke apart, or turned into a weird golden mustache clipping at the edges.
The Plot Twist 🌀
The double-image artifact gave it away. The math wasn’t wrong — the geometry container was simply too deep.
Treating the simulation as a full 3D sphere volume meant computing spatial warping across layers of empty air. Worse, the canvas matched the entire 100vw layout, becoming an invisible wall that swallowed every click and text selection underneath.
The Solution 🛠️
I tore out the 3D bounding geometry entirely and engineered a 2D plane geometry pass, restricted to a floating 450px × 450px container centered on screen.
Optimization Breakdown:
-
Single Pass — Camera ray hits the shader exactly once per pixel.
-
Loop Reduction — Raymarching loop slashed to a 38-step pass.
-
Hardware Capping — Capped pixel scaling, injected
pointer-events: none.
-
Cinematic Scaling — CSS cubic ease-out handles scale-up without tearing the physics.
#blackhole-canvas-root {
position: fixed;
top: 50%;
left: 50%;
width: 450px;
height: 450px;
transform: translate(-50%, -50%) scale(1.0);
transition: transform 4.5s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
z-index: 100000;
}
The Result:
Ghosting gone. The black hole now grows from zero, drifting at a flawless 60 FPS, while every background link, button, and text field stays fully interactive.
And this masterpiece won the Hack Club Showcase! 🎉
Next Up 🚀
-
Cosmic Audio — Subtle cosmic sound effects as the singularity expands.
-
Space-Time Distortion — Text distortion filters that warp webpage text near the event horizon.
Take a look at the before-and-after photos below. Would love your feedback in the comments!
Zero frame drops. Zero laptop sacrifices.
