Building Stereoscopic Anaglyph maps with Mapbox tools and Ordnance Survey open data
By: Steve Attewell
Tags: Anaglyph, 3d, Mapbox, Maps, Ordnance Survey

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.

I can haz three dee mapz pleeeez?— Photo by Ramiz Dedaković on Unsplash

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 mode mix-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.