Anaglyphs With Pixel Bender & Depth Map
Pixel Bender and displacement maps were so much fun to develop that my next experiment led me to create some more advanced effects. Do you know anaglyphs? Anaglyph images are used to provide a stereoscopic 3D effect, when viewed with 2 color glasses. There are multiple types of glasses (colors), but the most comon is red-cyan combination. So, I have created this simple pixel bender kernel that makes anaglyph images based on original image and its depth map (just like those used in displacement maps)
Take on your red cyan glasses and lets see the result:
I have been asked to make it also work for other types of glasses, so I made left/right glass matrices dynamic, now you can define any values you like (based on your glass color). The default matrices are:
shader.data.matrixLeft = [0.0, 0.0, 0.0, 0.7, 0.0, 0.0, 0.3, 0.0, 0.0]; shader.data.matrixRight = [0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0];
… these values are taken from optimized method for red cyan combination. There are some more for this color combination.
There is also the zBase parameter that takes values from 0.0 to 1.0. Defaul value is 0.5. With 0.0, the scene appears to be in front of monitor, with 1.0 depth goes behind the monitor. With 0.5 closer objects appears to be before monitor, distatnt ones behind:
shader.data.zBase = [0.5];
Take care so your head will not explode 
Download pixel bender kernel (.pbk) file for anaglyphs here.
Where to go from here:
See standalone versions & download on 3ddm.yoz.sk
[...] Did you know you can make anaglyphs using this technique? [...]
[...] Did you know you can make anaglyphs using this technique? [...]
[...] with Pixel BenderAndrei Ionescu | 26.07.10 | Comment? Jozef Chúťka has did manage to create anaglyphs using Pixel Bender and displacement maps. The result is [...]
[...] has been a lot of excitement around this post from Jozef Chutka: Anaglyphs With Pixel Bender & Depth Map, because it is really cool. A great 3D depth-map effect done with Pixel Bender. 3D image from Jozef [...]
This is so very cool!
I was wondering if it is also possible to use the transparancy (alpha) of a movieclip so you can combine different shaders onto eachother with different settings of the anaglyphs? This was you can make a pretty scene with it…
@reinier , I am not sure about what are you asking, but I will reply in general:
1. yes, shader can be used on MovieClip (any DispalyObject)
2. yes, pixel bender can recognize alpha value of each pixel (image4 src.a)
3. yes, you can apply multiple shaders on DisplayObject as well as apply one shader on multiple DisplayObject
Hi anyone, if you are interesting in standalone 3D Displacement Maps, see http://3ddm.yoz.sk/
Hi guys,
do you have any idea how can I get a Depthmap Rendering/ Grayscale Map image using two images taken from two cameras, separated by a distance of a few centimeters, with Pixel Bender?
Thk,
Filippo
Hi filippo,
I am not sure current version of pixel bender in flash player will be capable of something like that (no loops etc.) but you can try this software http://www.photosculpt.net/
Many thanks Jozef for sharing but I am looking for a realtime solution. My goal is not only for a stereoscopic 3D effect but I would like to find out the most distant objects and those closest.
http://www.pages.drexel.edu/~nk752/depthMapTut.html
Filippo, I do not know about any realtime AS3 attempts. Well maybe will be interested in http://kinecthacks.net/
Hi Jozef,
thanks for your prompt response.
A kind of Kinect system is what I would like to create. If I/we built a fast system in Pixel Bander to get a depth map it’s easy after to choose the objects in the environment we want to consider for the interaction. We can get an image with only the closest making transparent the others.
If you can help me obtaning a Pixel Bander solution using two images, taken from two cameras separated by a distance of a few centimeters, as input and getting a depth map as output I can make it in realtime.
filippo,
now I can see what you are up to… I am affraid you will not be able to use pixel bender while there are no loops in current version. I can see some algorithm public available
http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=algorithm+two+image+depth+maps … I am briefly reading http://cvlab.epfl.ch/publications/publications/1993/Fua93.pdf , I guess that is the way to go, anyway I believe it would not be fast enough to run realtime (as you could see with photosculpt) … however I think this is an interesting idea. Let me know how else could I help you
This is really nice,
Have you ever tried making multiple instances of the shader in one displayObject?
Like if you just need simple 3D, as an alternative to Papervision where you don’t need that much panning, like for top view flash games.
Or is that just impossible to due flash performance?
Great work.
Hi Joseph,
probably I have found a better documentation that can help to understand how to implement it. In this document it’s also great the idea of the deph map for augmented reality.
http://campwww.informatik.tu-muenchen.de/3DPVT2010/data/media/e-proceeding/poster-session1.html (GPU Accelerated Realtime Stereo for Augmented Reality –> .pdf)
There are also on internet other examples using openCV. https://sites.google.com/site/elsamuko/c-cpp/opencv-depthmap
Brmm, I never did, however you can. This effect works best with smooth depth changes, if there is something too far next to too close it may result choppy… use drawTriangles method from http://3ddm.yoz.sk/
filippo, great source, now if you could find C sources and compile it into alchemy, you should get really close to some good results
filippo check out also DAISY method “An Efficient Dense Descriptor Applied for Wide Baseline Stereo”
http://cvlab.epfl.ch/research/surface/daisy/
ALso there is a cool software which converts your 2d video files and plays them is snsglyph on the fly!
convert-to-3d.com