Homeβ–ΈPerception & Optical Illusionsβ–ΈAR Navigation Simulator

AR Navigation Simulator (3D)

A real 3D city block where five AR waypoint beacons are continuously projected from world space onto the screen, with live distance, compass bearing, heading and ETA β€” the same core mechanic a phone AR-navigation app uses, running as a genuine WebGL scene you can walk and orbit around.

Perception & Optical Illusions3DModerate60 FPS⇄ 2D version
3d-augmented-reality-ar-navigation-simulation β†— Open standalone

This is a genuine 3D augmented-reality navigation model: a procedurally laid-out city block of buildings sits under an open sky, five glowing waypoint beacons stand at fixed positions, and your position marker walks the ground plane under WASD/arrow-key control while an orbiting chase camera follows you. The AR overlay itself is real, not decorative β€” every visible beacon's 3D world position is projected through the camera's actual view and projection matrices (Vector3.project(camera)) into 2D screen coordinates every frame, exactly the transform a phone's AR-navigation app performs to pin a digital label onto the live camera feed. Distance and compass bearing to each waypoint are computed from real 2D-plane trigonometry (Euclidean distance and atan2-based bearing, normalised to 16-point compass headings), and a ground-level route line is redrawn to the selected destination every frame. Switch destinations, change walking speed and camera field of view, or toggle between showing every waypoint and only the active destination, to see how a wider FOV surfaces more beacons at once β€” just like widening a phone's camera angle would.

βš™ Under the hood

Waypoint beacons are projected from 3D world space onto the 2D screen every frame using the camera's real view/projection matrices, with live distance, compass-bearing and ETA readouts computed from the player's ground position.

CanvasAugmented RealityWebGL

3D Β· Three.js / WebGL renderer Β· 60 FPS target Β· runs fully client-side, no install

What did you find?

Add reproduction steps (optional)