Go back to home page

Stereo Convergence

Stereoscopic imagery is gorgeous and richer than single-lens imagery, but sometimes you don’t want to drag out your VR headset or 3D goggles, or maybe you’re just in public and don’t want to be quite as immersed.

So I decided to build a simple web viewer for stereoscopic imagery. It’s a teeny tiny plugin that lets authors set the range of focus on a stereo image and Stereo Convergence handles the interaction. On pointer devices, just hover along the Y axis to change the focal point, and on touch devices, just touch and drag!

And the HTML is simple; after adding loading the distribution files, all it needs is a container element and two “eyes” to function.

<div data-stereoplayer data-stereo-min="-0.8" data-stereo-max="1.6" data-stereo-clip="true">
    <img data-eye="left" src="../../image-left" />
    <img data-eye="right" src="../../image-right" />
</div>

...

<link href="../bower_components/stereo-convergence/stereo-convergence.css" rel="stylesheet">
<script src="../bower_components/stereo-convergence/stereo-convergence.js"></script>

This means that it can go beyond just jpegs. By adding a data-eye attribute to any embedded media, it could theoretically handle all sorts of use cases (why you’d want to do that is a question I can’t answer).

The plugin is primarily for inline (content) images, but I won’t deny that you can get creative with your implementations. If you do, you should contact me and let me know what you’ve done with it.
The plugin has no dependencies and is concise in getting the job done, so the distribution weighs in under 5kb.

You can find out more about Stereo Convergence and installation instructions on github.

View on Github