Wiggle 3D Stereoscopy with Flex

I have been fascinated with 3D stereoscopy since I was a kid. I remember my first 3D poster – it came in a box of cereal and included the goofy glasses with one red lens and one blue lens. I would spend hours staring at the poster amazed at how a flat piece of paper could have magical depth by simply wearing colored lenses. I struggled to find the right colors in my Crayola box so I could create my own!

Since then, I’ve seen numerous 3D movies (including some mind-blowing ones at iMax theaters) that require some sort of hardware over your eyes to provide each eye a different view. The technique is actually simple. Two cameras are used to film two different views of everything so each camera sees a slightly different angle. Your left eye gets the left camera’s view and your right eye gets the right camera’s view. When an object is close, the image will appear to our left eye to be more to the right…and will appear to our right eye to be more to our left. In other words, the closer the object is, the more cross-eyed you get. Our brain takes this eye-angle data and converts it to depth perception.

There are other ways to create depth perception, one of which I found by accident.

Recently, my wife and I were on a cruise in Hawaii. As the ship was slowly cruising up the Nā Pali coast in Kauai, I took hundreds of pictures of the fantastic scenery. A week later, as I was viewing these pictures, I accidentally discovered that when I viewed two of the images back to back, I got a sense of depth from the images! Since that discovery, I occasionally experiment with shooting two or three images from slightly different locations and displaying them in rapid succession. I wanted to call this new technique “Wilson 3D Stereoscopy” but I later found that this technique was already called “wiggle stereoscopy”. Oh well…

Wiggle stereoscopy takes advantage of another way our brains perceive depth — how objects move in our field of view in relationship to each other . For example, if you look out the window of a moving car, objects that are close to you will appear to move much faster than objects in the distance. Our brain uses this data to help put together the 3D model in our head. Wiggle stereoscopy is basically the technique of toggling between two or more images so that we see the relative motion. This creates a temporary sense of depth.

Late last week, I was flying home from 360Flex Europe and was working on my next blog post in the series titled, “Rebuilding My Website Using Flex – Part 1“. I was playing around with with various image effects provided by Flex, and decided to take a few minutes and build a viewer for the wiggle photography I took while on the trip.

Below is the brain-dead MXML that I created. Basically, I put one image on top of the other and toggle the transparency (alpha) of the top image using <fade>. I played around with various timings and found what I think is a descent effect. Below is the code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” color=”#000000″ backgroundColor=”#000000″ historyManagementEnabled=”false” >

<mx:Sequence id=”wiggle”>
<mx:Sequence repeatCount=”1″>
<mx:Fade alphaFrom=”0″ alphaTo=”1″ duration=”400″ />
<mx:Pause duration=”200″/>
<mx:Fade alphaFrom=”1″ alphaTo=”0″ duration=”400″ />
<mx:Pause duration=”200″/>
<mx:Sequence repeatCount=”3″>
<mx:Fade alphaFrom=”0″ alphaTo=”1″ duration=”500″ />
<mx:Pause duration=”500″/>
<mx:Fade alphaFrom=”1″ alphaTo=”0″ duration=”500″ />
<mx:Pause duration=”500″/>

<mx:Canvas x=”0″ y=”0″ width=”100%” height=”100%” color=”#000000″>
<mx:Image source=”@Embed(‘DSC_2635a.jpg’)” width=”100%” height=”100%” id=”showpic2″/>
<mx:Image source=”@Embed(‘DSC_2636a.jpg’)” alpha=”0″ width=”100%” height=”100%” id=”showpic1″ creationCompleteEffect=”wiggle” />


Here are the results using 4 different pairs of images:

All my little viewer needs now is the ability to read an XML file to specify the image filenames and alternate timings (currently everything is hard-wired and embedded). I’ll add this later after I finish my website rebuild project.

Next, I want to learn how to combine relative motion with relative focus to provide the brain with additional “3D data”. Check out this 3D image from last year’s Sports Illustrated 3D swimsuit gallery – http://sportsillustrated.cnn.com/features/2007_swimsuit/3d/index5.html (note to wife – I’m only looking at the amazing 3D effects of the flowers, that’s all!). It’s labeled as Motion Parallax but it’s more than that. As you move the mouse around, different objects move at different speeds but it also introduces some cool blur effects to create relative focus. I can’t find any technical details on how this was done but I suspect that several images were used and separated into multiple “planes” and a simple flash-app was used to shift planes at different speeds in relationship to the mouse cursor and to blur different planes different amounts based on which one was in focus. If anyone has any other input on this, let me know. It’s a fascinating effect.

Adobe is also playing around with some related technologies. Check out the “multi-view camera” mentioned in this CNET article. Below is a brief demo video:

To read more about 3D stereoscopy, check out http://en.wikipedia.org/wiki/Stereoscopy

~ by Greg on April 17, 2008.

4 Responses to “Wiggle 3D Stereoscopy with Flex”

  1. Cool, I like too this effect

  2. Nice examples, wiggle4 is especially impressive. I few years ago I made http://wiggle.sourceforge.net/ with an online aligner and viewer for stereo imeages. Now that AS3 is powerful enough to run OpenCV, it would be a great challenge to make a new version of Wiggle that aligns images automatically. On the other hand, I feel like the wiggle fire has been stolen a little bit by Photosynth.

  3. Dear Greg

    I have created a new way of ‘seeing’ the 3D objects in sterograms using a very similar ‘wiggle’ technique to this!

    Colin Ord, author of the bestselling Magic Moving Images – animated optical illusions book introduces a quick and easy Photoshop technique for everyone to see the 3D objects in sterogram images without straining, crossing or squinting their eyes.

    A fantastic solution to ‘prove’ something exists in these dotty patterns!

    Please view the video tutorial on youtube

    or visit my personal project website for more details or to download the
    Stereogram – 3D Object Viewer v1.0 (experimental stereogram viewer application)

    Kind Regards
    Colin Ord
    Magic Moving Images

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: