Draw the Matrix ourselves: WebGPU and WebGL 2, and no three.js

[h1ddenpr0cess20]

What changed

three.js is gone. src/gpu/ is a small renderer written for these games, with two backends: WebGPU (shaders in WGSL) and WebGL 2 (shaders in GLSL). The shaders are separate files in src/gpu/shaders/ (*.glsl, *.wgsl). The engine is the same file set in all three eggs.

• Which backend draws comes down to antialiasing. WebGPU only does 4× multisampling. Chrome on a desktop GPU gives WebGL 8×, which is what the three.js build was drawn with. So:
  • where WebGL can do more than 4×, WebGL draws;
  • elsewhere (most phones), WebGPU draws;
  • either falls back to the other if it won't start;
  • ?renderer=webgl or ?renderer=webgpu in the URL forces one.
• It looks the same. I rendered the old three.js build and the new one headlessly, frame by frame down the same seeded run. WebGL matches within 1/255 on every frame. WebGPU differs only by a pixel here and there along the lines and the egg's edge.
• It plays the same. src/core/ is untouched, and so are the camera rig, pools and timings.
• The bundle is smaller: about 56 kB of game JS plus whichever backend loads, instead of three.js.
• Lost GPUs. If the browser drops the WebGL context or WebGPU device, the renderer rebuilds itself instead of leaving a black screen.

How it works

• The wireframe is native one-pixel lines, additive, faded toward the black by the fog before they're added. The deck under them is a black fill, pushed back slightly in depth and drawn first among the see-through things. Both are the same as before.
• The rain is a canvas stretched over the whole frame behind everything, at 0.32 brightness. It's re-uploaded with fresh mipmaps on each of its 18 ticks a second, as before.
• Marc's shell keeps three r185's physical lighting, term for term: GGX with multiscatter compensation from the same DFG table, Charlie sheen, clearcoat, bump map, the studio's hemisphere light and two keys. His studio environment is prefiltered on the CPU in a worker, with three's PMREM ported exactly. The first frame waits for it.
• frame.js makes the decisions, once per frame. It culls, sorts and packs every uniform into vec4/mat4 blocks that std140 and WGSL lay out identically, so the two backends can't disagree.

One quirk is preserved on purpose: three takes a hemisphere light's "up" from the light's world position. The studio travels with the egg, so its "up" tilts toward +z as you run. That's part of how the game looks today, so the new renderer copies it.

Testing

• npm test: 110 pass. The new test/gpu.test.js checks the GLSL blocks and WGSL structs against frame.js, shape winding, the prefilter, draw order and per-material animation. The rig test now projects through the new camera.
• npm run lint is clean, and npm run build succeeds.
• Pixel diffs against the three.js build in headless Chromium (SwiftShader, both backends), as above. That diffing caught one real bug: the WebGPU backdrop bind group was missing two texture slots, and only this game has a backdrop. It's fixed in the engine everywhere.
• Backend choice was tested by faking an 8-sample GPU: WebGL is chosen. At 4 samples WebGPU is chosen, and ?renderer=webgpu overrides.
• Not tested: real GPUs and real phones. Headless SwiftShader is all I had.

🤖 Generated with Claude Code

https://claude.ai/code/session_01DAsxgyQ3z7SBtRq9X4N3R7

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
eggscape	Ready	Preview	Oct 2, 2026 1:17am UTC