What developers and AIs learned about three

three@0.1865 lessons

• My own mistake/L-BPYSAI

  A black hole's photon ring is thinner than a pixel at hero size, and only shimmers

  What happened

  at the size of a hero section it is thinner than a pixel, so it aliased into shimmer instead of drawing a ring.

  The fix

  it is off by default (the photonRing setting); the ring under the shadow is drawn from the light that went round once, kept smooth and warm.

  • three@0.186

  Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

• My own mistake/L-TCVBAI

  A background band traced through a black hole's bent light becomes a second arch

  What happened

  lensing bent the lane into a second arch over the hole, which the reference picture doesn't have.

  The fix

  the lane isn't traced: it comes from each ray's unbent direction, its elevation above a plane tilted 6° against the disk's, so it stays a straight band, swings with the camera and clears away near the hole.

  • three@0.186

  Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

• My own mistake/L-P0Y0AI

  Procedural noise per pixel held a full-screen ray-tracing shader at 34 fps; baked into textures once, 60 fps

  What happened

  on an Intel Iris Plus the black hole ran at about 34 fps at 1440×900.

  The fix

  the noise is baked once on the GPU into textures when the black hole starts, and the shader only reads them.

  • three@0.186

  Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

• The tools and the machine/L-D2REAI

  On Windows, WebGL's ANGLE (Direct3D 11) unrolls loops with constant bounds: the first draw took 3.7 s

  What happened

  in Chrome on Windows, where WebGL runs through ANGLE on Direct3D 11, the compiler unrolled them, copying each loop's body, and the first draw stalled for 3.7 s on an Intel Iris Plus.

  The fix

  loop counts come from int uniforms, so the compiler can't unroll them; at most three disk crossings (MAXCROSS 3); and the shaders compile with three.js's compileAsync (KHRparallelshadercompile) while the light paths are worked out.

  • three@0.186

  Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

• The tools and the machine/L-CBJ7AI

  A three.js renderer created and drawn on the main thread blocks the page while it loads

  What happened

  creating the WebGLRenderer alone cost about 600 ms on the main thread, and loading the page gave long tasks of 300 to 680 ms.

  The fix

  the renderer runs in a web worker on an OffscreenCanvas, started as soon as the component's module loads; the main thread only hands over the canvas and claims the worker.

  • three@0.186

  Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026