The Instanced Forge
Four thousand ingots drawn in a single call, with the draw-call figure published next to the frame time so the cost of the scene is stated rather than implied.
Achilles: Supreme. Highest learning value in the canon. Used sparingly.
Exhibit case
Why it matters
Almost every spatial scene that dies in production dies the same way: it was built as a collection of objects. One mesh per thing, one draw call per mesh, one JavaScript update per frame per thing. It looks fine on the machine it was authored on, and then it meets a mid-range Android and the whole idea gets deleted from the brief.
This field is the opposite construction. There is exactly one piece of geometry — a twenty-four vertex box — and one program. Position, rotation axis, rotation phase, proportion and heat are per-instance attributes uploaded once at arm time and never touched again. The vertex stage does the placement with a Rodrigues rotation; the CPU does nothing per object, ever.
The consequence is the point of the entry: the dial changes the instance count by a factor of thirteen and the draw-call readout does not move off 1. Frame cost rises with vertex load, gently and predictably, and you can watch it do so. A spatial study that cannot show you its own cost is asking to be believed. This one is asking to be measured.
Key techniques
- One geometry, five instanced attributes.
iOffset,iAxis,iScale,iPhase,iHeatareFloat32Arrays filled once. There is no per-frame buffer upload and no per-object matrix. - Rotation in the shader, not on the CPU. Rodrigues' formula rotates a vector about an arbitrary axis with two trig calls, which is far cheaper than composing four thousand model matrices in JavaScript and re-uploading them.
- Golden-angle spiral placement.
theta = i * 2.399963distributes instances evenly over a disc with no clumping and no rejection sampling, and it is deterministic — the field is byte-identical on every load, so it can be re-observed rather than merely remembered. - Seeded LCG for variation. A five-line linear congruential generator instead of
Math.random(), because a study whose appearance changes between two screenshots cannot be reviewed. It also keeps the scene out of module scope, where random calls are illegal in a Worker runtime. - Two-light metal. A cold key from above and the forge itself from below. The under-light is what makes the material read as metal in a near-black room; with the key alone it reads as plastic.
- Rim term from the view vector rather than a fresnel texture, weighted by per-instance heat so the hottest ingots hold their silhouette against the void.
- Ordered dither on output. Eight-bit output over a near-black background bands visibly; one hash per pixel removes it for free.
- Scene rotation, not camera rotation. The pointer orbits the
Transform, so the projection and framing stay authored. Moving the camera instead lets the composition drift into arrangements nobody approved.
What to steal
The transferable part.Move variation into attributes and the loop disappears. If your scene has a per-object for loop in requestAnimationFrame, that loop is your ceiling. Everything in it that is a function of time and a constant belongs in the vertex shader.
Publish the cost. Instances, draw calls, frame time, fps, device pixel ratio — four figures, permanently visible. It changes how you build: you stop guessing about the trade and start reading it, and quality tiers become an argument you can win in a review.
Deterministic randomness. Seed it. A field that regenerates differently on every reload cannot be diffed, screenshotted, or defended.
Clamp device pixel ratio before you optimise anything else. A 3x phone rendering full-bleed at native density is doing nine times the fill work of a 1x desktop. Math.min(devicePixelRatio, 1.6) is the single highest-leverage line in the file.
Pause on `IntersectionObserver` and `visibilitychange`. An off-screen render loop is not a performance detail, it is a battery bug, and it is four lines to fix.
What not to copy
Context-specific or costly.Do not read this as licence for one enormous instanced draw. Instancing trades draw calls for vertex work, and past a few tens of thousands of instances you are simply vertex-bound instead of call-bound. The win is structural, not infinite.
Do not put the geometry construction at module scope. It calls into random and into the GL context; both are disallowed in a Worker's global scope, and the build will pass while every deployed request returns a 500.
Do not animate the instance buffers. The moment you re-upload attribute data each frame you have rebuilt the problem instancing exists to solve. Everything here that moves is a function of uTime and a constant.
Do not treat the pointer orbit as navigation. It aims the light and nudges the framing; it never reveals content, because touch and keyboard users must see a complete composition without ever moving anything.
Inclusion rationale
Hephaestus stayed sealed until something existed that ran at frame rate on a phone and could prove it. This is that entry, and it sets the chamber's admission standard: a spatial piece enters here only if it publishes its own budget, degrades to something composed rather than to something broken, and honours reduced motion without apologising. It earns Achilles rank because the transferable lesson — variation belongs in attributes, cost belongs on screen — applies to nearly every scene anyone will build after it.
Technical register
Performance
One draw call, four uniform writes per frame, zero per-object JavaScript. Device pixel ratio is clamped to 1.6 and the loop is gated by IntersectionObserver with a 120px root margin plus visibilitychange, so scrolling the study out of view stops the GPU entirely rather than leaving it spinning behind the fold. ogl is behind a dynamic import() inside the stage hook, so the renderer is never in the SSR graph, never in the initial bundle, and is never downloaded at all by a visitor who does not open this chamber. Depth testing is on and back faces are culled, which halves fragment work on closed geometry for one line of setup. The heavy tier exists to be measured, not to be shipped: 1 400 is the published default because that is where the readout stays inside frame on the slowest machine tested.
Mobile
The field is a fixed 1200/720 box, so it crops predictably instead of reflowing and re-deriving its own composition at every breakpoint. There is no pointer, so the orbit simply never engages and the scene runs on its authored rotation — nothing is hidden behind a gesture that does not exist. The HUD collapses from four columns to two rather than shrinking its type, because system data that has stopped being legible has stopped being data. If the context cannot be acquired at all, the CSS forge glow underneath is the entire visual, and it is composed to work alone.
Accessibility
Under prefers-reduced-motion the stage composes and renders exactly one frame at a fixed time offset and never requests another — a still reading of a spatial study is legitimate, and the setting is honoured as a real instruction rather than as a slowdown. The canvas is aria-hidden; it carries mood and evidence, not information, and every figure it demonstrates is also present as text in the readout below it. The vertex-load control is the shared Segment primitive, so it is a real radio group with roving focus, arrow-key traversal and a visible focus ring. No content anywhere in the entry requires the scene to have rendered.
Study next