logo
By Lawrence

5 minutes

The Pilot's Instruments

You have been flying this whole course by eye. No crosshair, no idea which of the four contacts is locked, no health, no score, and no way to tell whether the fighter crossing your nose at 400 metres is about to be hit or missed by fifty.

        "SpaceShooterHUD": {}

The HUD draws as DOM elements over the canvas rather than in 3D: brackets, readouts and the reticle are divs with position: absolute, which is why the System guards its work behind typeof document and does nothing at all in a headless render.

Finding the nose on a chase camera

In a cockpit view, the crosshair is trivial: the camera is at your eye, the nose is straight ahead, and forward is the centre pixel forever.

Your camera is not in the cockpit. It sits ten-odd units behind the ship, and that changes the geometry completely. Take the ray from the ship's nose and project points along it to screen. At 50 units out you get one pixel. At 500 you get a different one. There is no single pixel that means "where the nose is pointing". The answer depends on how far along the ray you ask, because the camera is looking at that ray from off to one side of it.

Continue reading

Unlock the Full Course

Every lesson, the runnable examples, and the finished build — yours to keep.

$9one-time

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search