Home▸Rendering & Computer Graphics▸3D Augmented Reality Anchor Simulation

🧊 3D Augmented Reality Anchor Simulation

A hologram anchored to a fiducial marker on a tracked real-world surface, rendered through a real perspective camera. Adjust device lens FOV, anchor height and marker jitter, and watch the live screen-space projection and real-world occlusion readouts update in real time.

Rendering & Computer Graphics3DModerate60 FPS📱 Mobile-adapted

⚙ Under the hood

A fiducial marker on a tracked floor plane anchors a rotating holographic icosahedron. Its position is projected from 3D world space into 2D screen space every frame using the real camera perspective-projection matrix (Vector3.project(camera)), exactly like an AR SDK compositing a virtual object over the live camera feed. A depth-only "real-world" occluder mesh (color writes disabled, depth writes enabled) lets the hologram correctly disappear behind real geometry, and a ray cast from the camera to the anchor confirms occlusion independently of the depth buffer. Anchor jitter simulates the small positional noise real marker trackers exhibit frame to frame.

Three.jsAugmented Realityperspective projectionocclusionmarker tracking

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