USER INTENT
HUD toggled on
The app reveals the visor overlay and marks HUD mode active in the shared suit model.
ENGINEERING LOG HUD–07 / DECLASSIFIED
A flight simulator
behind the faceplate.
HUD Mode turns the suit configurator into a first-person night flight. Three.js renders the world; regular browser elements render the visor; a small, testable flight model keeps both in agreement.
- 68°
- base field of view
- 2.2 km
- deterministic city tile
- 0.75 s
- target lock time
Inspect the render stack
CHAPTER 01 / BOOT SEQUENCE
The 3D engine does not exist
until you ask for it.
The main suit schematic stays lightweight. The first time HUD Mode is activated, hud.js dynamically imports the flight engine, creates it once, then reuses it on later flights.
SUIT INTEGRATION
Flight systems armed
Helmet, repulsors, and thrusters come online automatically if the operator left them off.
LAZY BOUNDARY
Engine imported
import('./flight/engine.js') loads Three.js and the flight modules only now.
FIRST FRAME
Renderer started
The engine sizes its canvas, resumes synthesized audio, and enters the animation loop.
CHAPTER 02 / THE FRAME
Every frame is a handoff.
The renderer asks the browser for the next frame, measures elapsed time, advances every system, draws the scene, then publishes a compact snapshot to the visor.
WASD/arrows, Shift, Space, or pointer.
Attitude, thrust, position, collisions, world wrap.
City, drones, locks, bolts, effects, audio.
Scene + perspective camera → WebGL canvas.
Snapshot → compass, radar, warnings, targets.
FRAME-RATE INDEPENDENCE
Motion is measured in seconds, not frames.
The loop computes dt from timestamps and caps it at 0.05 seconds. Speed is multiplied by that elapsed time, so the same suit travels roughly the same distance on fast and slow displays—and a stalled tab cannot inject one giant physics step.
CHAPTER 03 / PROCEDURAL CITY
One city tile.
Nine views. No edge.
A seeded generator builds one 2.2 km square of streets, buildings, traffic, and Stark Tower. Three.js displays a 3×3 grid of cloned tiles around the player.
–1,–1
0,–1
1,–1
–1,0
0,0
1,0
–1,1
0,1
1,1
x
z
WORLD-WRAP TEST
The player crosses the boundary. The coordinates come home.
At ±1,100 m, the engine shifts the suit by exactly one tile. Active drones, bolts, and explosions shift by the same amount, so their relative positions do not jump.
WORLD X
INSTANCING
Many buildings, shared geometry
Buildings are grouped into three InstancedMesh batches. Each instance supplies its own transform and tint while sharing geometry and material.
GENERATED TEXTURES
Windows painted at runtime
Small 2D canvases paint lit and unlit windows, roads, glow sprites, clouds, and the moon—then become GPU textures.
COLLISION GRID
Ask only the local block
A 20×20 spatial grid stores building footprints. Height checks inspect one cell instead of every tower in the scene.
CHAPTER 04 / FLIGHT MODEL
Small equations.
Convincing weight.
The flight model has no DOM and no Three.js dependency. It accepts input, suit power, thruster status, and elapsed seconds; then mutates a plain state object. That separation makes the behavior easy to test.
- SPEED
- m/s
- PITCH
- °
- ALT
- m
NOMINAL
TARGET SPEED
(46 + normalized power × 130)
×
thruster factor
×
boost
then adjusted for climb or dive
CHAPTER 05 / TARGETING
A 3D point becomes
a bracket on glass.
Combat joins vector math in the scene with ordinary HTML in the visor. Move the contact through the lock envelope to see the same timing rules used by the engine.
DRN
–9°
+9°
Measure
Subtract suit position from drone position to get an offset vector.
Qualify
Compare its angle to the camera’s forward vector and reject contacts past 850 m.
Project
Three.js maps the 3D position into normalized device coordinates from –1 to +1.
Overlay
The engine converts those coordinates to pixels; the DOM target bracket moves there.
CHAPTER 06 / SUIT INTEGRATION
The game listens to the suit.
HUD Mode is not a separate demo pasted over the app. The selected modules and simulated power supply actively change what the flight engine can do.
SUIT MODEL
Configuration
Modules + reactor power
SYSTEMS_TICK
FLIGHT ENV
Simulation
Speed + abilities + status
SNAPSHOT
DOM HUD
Feedback
Gauges + warnings + radar
Arc power
Raises cruise speed and must reach 30% before boost can engage.
Thrusters
Offline thrusters reduce the speed target to 45% and disable boost.
Repulsors
Offline repulsors reject fire input and trigger a visor warning.
Helmet
An offline helmet degrades the HUD overlay while the 3D world keeps running.
CHAPTER 07 / KEEPING IT FAST
Spend frames on flight,
not housekeeping.
Pixel-ratio ceiling
The renderer caps device pixel ratio at two, limiting GPU work on very dense screens.
Pooled bolts
Repulsor shots reuse a fixed set of objects instead of allocating during combat.
Pooled explosions
Particle bursts are reset and recycled after each one-second effect.
Shader warm-up
A hidden drone, bolt, and explosion are rendered at boot to avoid a first-shot compilation hitch.
NO FLIGHT AUDIO FILES
The suit makes its own sound.
Web Audio oscillators, filtered noise, and gain envelopes synthesize the thruster hum, repulsor discharge, lock tone, impact, and explosions at runtime.
END OF FILE READY FOR FIELD TEST
Now put on the faceplate.
Open the suit designer, select HUD Mode, and watch these systems meet in the same frame.
Launch suit designer