Building Stereoscopic Anaglyph maps with Mapbox tools and Ordnance Survey open data
If you’re as old as me you'll remember the red and blue glasses excitement of the 1980s; a time when two-dimensional images popped out of your TV screen or magazine. There was a 3D cowboy film on the telly and my children’s magazine had a 3D Dangermouse cartoon in it.
Then there was the unfortunate Jaws 3D movie. But we don't talk about that.
Mapbox just released a new 3D terrain model feature as part of version 2 of their Javascript mapping library. I got to wondering if it might be possible to take Ordnance Survey’s free Open Zoomstack vector map of Great Britain and use it to create an interactive red/blue anaglyph map that ran in a web browser.
Oh, and if you want to know how to get OS Open Zoomstack into Mapbox’s map editor, Mapbox Studio, there are some links at the bottom.
TLDR; If you want to take a look at the live 3D anaglyph map of Great Britain using Ordnance Survey open data you can find it here.
What do you need to create an anaglyph?
- A stereo-pair: Two images that are looking at the same thing but taken from eye-width apart.
- These two images tinted red and blue, overlayed on top of each other, then colour-blended together to make each of the images only visible to one eye when viewing the image using red/blue anaglyph glasses.
The first point can be covered by Mapbox’s javascript mapping library as it gives us control over the centre-point (the point we are looking at) and bearing (the direction from which we are looking at that point). They also have new free camera controls in their javascript library that gives us much more freedom to place the camera just where we want.
We can synchronise two maps so they move in unison with each other starting with the techniques shown in Mapbox’s own syncing code on GitHub, then offset one map’s camera by a short distance to create our left and right images.
When it comes to colouring and blending the images together in the browser there are a few ways to do this using CSS code. I found two articles about this method of blending images together to create a red/blue anaglyph.
In the end, though, I took ideas from those articles and created a simpler method that can be applied to any HTML element.
Creating red/blue anaglyphs using CSS
Here’s a picture of a cat.
He’s just an background-image on a div.
<div id="RightEye"></div>We can colourise him by adding a clever bit of CSS that adds a red background and blends the image into this red background…
/* This is not the complete CSS code, just the important, relevant bits that tint the image red. Complete code is later down the article */
#RightEye {
mix-blend-mode: multiply;
background-image: url(img/cat.png);
background-size: contain;
background-repeat: no-repeat;
}
#RightEye::after {
content: '';
position: absolute;
z-index: 2;
background: #f00;
mix-blend-mode: screen;
}This will give you a red cat…
The red image will only be visible to the right eye (the blue/cyan lens).
And here‘s the cyan code which adds a cyan background and blends the cat into it…
#LeftEye {
position: absolute;
z-index: 1;
background-image: url(img/cat.png);
background-size: contain;
background-repeat: no-repeat;
}#LeftEye::after {
content: '';
position: absolute;
z-index: 1;
background: #0ff;
mix-blend-mode: screen;
}
The technique then requires us to overlay these images on top of each other, then blend these two images together using the multiply colour blending modemix-blend-mode: multiply on the top-most image.
Then we shift one of the images horizontally by a few pixels. This will make the image appear in front of or inside our monitor depending on the direction and amount of the shift.
Here’s the cat with the red channel shifted a few pixels to the right which makes it appear that the image is an inch-or-so inside our monitor when viewed with anaglyph glasses.
If we were to shift the red image to the left the cat photo would appear to move toward us and appear slightly in front of our screen.
Here’s all the code you need to make a flat image appear to be inside your monitor:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D Stereoscopic anaglyph cat for red/blue glasses</title>
<style>
#LeftEye {
position: absolute;
top: 10%;
left: 24%;
width: 590px;
height: 600px;
z-index: 1;
background-image: url(img/cat.png);
background-size: contain;
background-repeat: no-repeat;
}#LeftEye::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: #0ff;
mix-blend-mode: screen;
opacity: 1;
}#RightEye {
position: absolute;
top: 10%;
left: 25%;
width: 590px;
height: 600px;
mix-blend-mode: multiply;
z-index: 2;
background-image: url(img/cat.png);
background-size: contain;
background-repeat: no-repeat;
}#RightEye::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background: #f00;
mix-blend-mode: screen;
}
</style>
</head><body>
<div id="LeftEye"></div>
<div id="RightEye"></div>
</body>
</html>
So now we know how to overlay and blend two images. I’ve adapted that code to overlay and blend two Mapbox maps together.
I’ve also built a “crossview” version where it’s possible to cross your eyes to view the stereoscopic effect if you don't have 3D glasses.
You can view them here: steveattewell.com/stereomap-gb/
Anaglyph colour considerations
Red and blue 3D glasses don’t like strong red, blue or green colours. These strong colours show very strongly in one eye and poorly in the other. This gives an unpleasant shimmery effect for the viewer. With that in mind, I used Mapbox Studio to re-colour the original Ordnance Survey Open Zoomstack backdrop map. The left image is the original, and the right-hand one has all of the offending colours muted toward grey or darkened to stop them from being distracting.
There you have it, some stereoscopic maps. Get yourself a pair of 3D glasses and have a play with the live map :) It also has a switch you can use to switch it to “crossview” mode if you don't have 3D glasses.
More resources and references
You can play with the live 3D map here.
Ordnance Survey Open Zoomstack backdrop mapping download
The Mapbox GL Javascript library — version 2
How to import OS Open Zoomstack into Mapbox Studio
Mapbox GL JS mapping library code examples
Two articles about blending images together to create a red/blue anaglyph
Also, here are a couple of links to another way to colour images ready for anaglyph which feels cleaner than the crazy CSS code I used, but it doesn’t work in Safari (I found that out the hard way):
How to apply SVG filters to HTML elements
About me
I’m a Senior User Experience Designer at Ordnance Survey, Great Britain’s mapping agency. By day I design mapping applications for business & Government and the interfaces that let customers and developers get hold of Ordnance Survey’s geospatial data. By night I put on 3D glasses and noodle around with this kind of thing.
If you like this article, give it a clap. Or maybe follow me on Twitter if you want to hear about more experiments like this.
