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

19 comments so far

  1. […] Did you know you can make anaglyphs using this technique? […]

  2. […] Did you know you can make anaglyphs using this technique? […]

  3. […] 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 […]

  4. […] 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 […]

  5. reinier September 9, 2010 21:34

    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…

  6. Jozef Chúťka September 10, 2010 10:46

    @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

  7. Jozef Chúťka September 14, 2010 14:02

    Hi anyone, if you are interesting in standalone 3D Displacement Maps, see http://3ddm.yoz.sk/

  8. filippo November 19, 2010 20:29

    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

  9. Jozef Chúťka November 20, 2010 13:42

    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/

  10. Filippo November 22, 2010 11:23

    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

  11. Jozef Chúťka November 22, 2010 17:12

    Filippo, I do not know about any realtime AS3 attempts. Well maybe will be interested in http://kinecthacks.net/

  12. filippo November 22, 2010 18:38

    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.

  13. Jozef Chúťka November 23, 2010 00:01

    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

  14. Brmm November 23, 2010 10:59

    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.

  15. filippo November 23, 2010 15:49

    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

  16. Jozef Chúťka November 23, 2010 16:33

    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/

  17. Jozef Chúťka November 23, 2010 16:35

    filippo, great source, now if you could find C sources and compile it into alchemy, you should get really close to some good results 🙂

  18. Jozef Chúťka November 30, 2010 12:59

    filippo check out also DAISY method “An Efficient Dense Descriptor Applied for Wide Baseline Stereo”
    http://cvlab.epfl.ch/research/surface/daisy/

  19. Booney August 25, 2011 15:10

    ALso there is a cool software which converts your 2d video files and plays them is snsglyph on the fly!
    convert-to-3d.com

Leave a comment

Please be polite and on topic. Your e-mail will never be published.