A 3D engine, built by hand.
Every frame on the record.
Halcyon renders 3D in software on Canvas 2D: its own matrices, culling, clipping and z-buffer, six shading modes, 34 generated primitives — and a console that reports what every stage of every frame costs.
Every stage of the frame. On the record.
Each card runs a real piece of the pipeline, drawn in this browser by the same kind of software renderer Halcyon is.
Two backends, one frame
Switch the z-buffer off and Halcyon sorts whole triangles and paints them on Canvas 2D, with textures mapped by subdivided affine patches. Switch it on and every triangle is walked pixel by pixel with Pineda edge functions, its depth kept as 1/d in a Float32Array.
- Near-plane clipping before projection
- Edge antialiasing that feathers outward
- Colour and depth in typed arrays
Every switch answers on the next frame
The inspector's RENDER tab sets the shading mode and the pipeline — wireframe, backface culling, z-buffer, dithering, edge antialias — and the telemetry under the viewport shows what each change costs: triangles culled, draw calls, frame time by stage, fill rate.
- Six shading modes
- Five pipeline switches
- Frame time split into four stages
A hardware controller, bound to the console
Plug in a KORG nanoKONTROL2 and Web MIDI puts the shape under your hands: faders on pitch, yaw, roll, spin and scale, knobs on the camera orbit and the fog, buttons on the camera presets, the shape list and theatre mode.
- 21 bindings, checked at compile time
- Every fader centred on its row's default
- The traffic printed as it arrives
The whole console, live.
The console with each inspector tab open — shape, render, world — drawn and measured in your browser as you watch.
Built to be read.
A triangle that crosses the near plane is cut in camera space by Sutherland–Hodgman — into nothing, a triangle, or a quad fanned into two — its texture coordinates carried along the cut.
One key light: ambient plus diffuse quantised to 64 steps, and a Blinn-Phong highlight, exponent 32, in 16. Azimuth, elevation, ambient and specular each have a slider.
Water, methane, ammonia, carbon dioxide, benzene, caffeine, aspirin and glucose, built as balls and sticks, each with its formula, its molar mass and its references.
Space pauses, W draws the wireframe, C toggles culling, S and F the sky and the floor, G the grid, R resets, 1–9 pick a shape — and Escape leaves theatre mode.
Built from first principles.
Open to the last line.
Halcyon is plain TypeScript on one Canvas 2D context — about 41,000 lines, MIT-licensed, every stage of the pipeline written and tested in the open.
A 3D engine, built by hand.
Open it and read every frame.
Six shading modes, two backends, 34 primitives — in the browser, on Canvas 2D.