The Glasses Free 3D Map

This morning I found a link on Hacker News to a glasses-free 3D webpage. This Dragon Courtyard demo uses your device's webcam to track your head motion and then applies motion parallax to make it feel like you're looking through a window into a 3D scene.

I decided to see if the same approach could be applied to a 3D map. The result is this Head Tracked 3D Map.

The concept is simple and reasonably effective. Instead of moving the 3D scene with your mouse, the webpage moves the virtual camera based on the position of your head detected through your webcam. Using MediaPipe FaceMesh, the browser estimates the position of key facial landmarks in real time - especially the tip of your nose, which serves as an easy proxy for where your head is.

As your head shifts left, right, up, or down, the code translates that movement into small changes in the map’s bearing (horizontal rotation) and pitch (vertical tilt). As a consequence the buildings and streets appear to shift naturally, as if you’re peering around them. 

The result makes a nice demo but probably doesn't have too many practical applications.The technique could find a niche in certain interactive experiences - for instance, in lightweight 3D map games or simple flight simulators where a sense of depth could enhance immersion.

If you do own a pair of 3D glasses then you might also enjoy this 3D Stereoscopic Anaglyph and Crossview Map.

A 3D anaglyph image works by placing two images of the same thing, taken one eye width apart. One of the images is tinted red and the other blue. The two images are then superimposed on top of each other. When you then look at your anaglyph image with 3D anaglyph glasses the image appears to be in 3D. 

The 3D Stereographic Anaglyph and Crossview Map works on exactly the same principle. Only in this case  a red tinted map is overlayed on top of a blue tinted map to create a 3D map - if you have a pair of 3D anaglyph glasses to view it with it.