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” layout=”absolute” color=”#000000″ backgroundColor=”#000000″ historyManagementEnabled=”false” >
<mx:Fade alphaFrom=”0″ alphaTo=”1″ duration=”400″ />
<mx:Fade alphaFrom=”1″ alphaTo=”0″ duration=”400″ />
<mx:Fade alphaFrom=”0″ alphaTo=”1″ duration=”500″ />
<mx:Fade alphaFrom=”1″ alphaTo=”0″ 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:
- Wiggle Image 1
- Wiggle Image 2
- Wiggle Image 3
- Wiggle Image 4 (The original Kauai pictures mentioned above)
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