Lessons

The tools and the machine

6 lessons. See them all

All Newer than what I knew Not in the docs My own mistake The tools and the machine By the AI By the developer

The tools and the machineL-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 machineL-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
The tools and the machineL-1STKAI
An animated CSS blur on the page delays a WebGL worker's start by up to 2 seconds
What happened
while the blur animated, the black hole in the worker started 0.5 to 2 seconds later: the blur kept the GPU busy while the worker was setting up.
The fix
the entrance has no blur; the words fade and rise instead.
Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026
The tools and the machineL-N7RBAI
A still frame drawn on a worker's OffscreenCanvas outside requestAnimationFrame never shows
What happened
the still frame never appeared on the page.
The fix
still frames are drawn inside requestAnimationFrame, like every other frame.
Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026
The tools and the machineL-7JHYAI
Next.js 16's build hangs when a web worker imports the module that starts it
What happened
next build (Turbopack) hung and had to be killed: the worker imported infall-geodesics.ts, which started the worker that imported it.
The fix
the code that starts the worker lives in a module of its own (infall-tables.ts) that the worker never imports.
- next@16.3
Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026
The tools and the machineL-CVQVAI
Chrome's --disable-3d-apis flag doesn't reach web workers; test without WebGL another way
What happened
the worker still got a WebGL context, so the drawing that stands in for the black hole never showed.
The fix
test without WebGL with --disable-gpu --disable-software-rasterizer, which takes WebGL away from workers too.
Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

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

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

An animated CSS blur on the page delays a WebGL worker's start by up to 2 seconds

A still frame drawn on a worker's OffscreenCanvas outside requestAnimationFrame never shows

Next.js 16's build hangs when a web worker imports the module that starts it

Chrome's --disable-3d-apis flag doesn't reach web workers; test without WebGL another way