I'm trying to explore how a 3D anaglyph image (with red/cyan colors) can be made. I'm using the HTML5 <canvas> element to do the drawing.
The problem is that I cannot find out what colors exactly should be used. Also, I'm not really sure as to how to combine the colors.
Currently I have the following code: http://jsfiddle.net/eGjak/15/. The problem is that I cannot manage to use the correct color for the red part. No matter how much red I choose, my glasses are still letting the red through the red part of the glasses. The cyan however is not going through the cyan part of my glasses. It seems like it also depends on the background color - could someone shed some light on this?
Secondly, how should I combine the red and cyan? I currently add up the colors, but this results in white because red is (255,0,0) and cyan is (0,255,255). On a sample image, it seems like they add up to black - how is that possible?
So, what color should I use for the red part? And how do I combine the red and cyan parts where they are overlapping each other?
Well first off, here are a couple open-source anaglyph image implementations that you could look at:
http://www.schrammel.org/stereo-plascolin.php
http://www.leebyron.com/else/redblue/#redblue
That said, I don't think looking at some code is the best way to figure this out. You need to understand at a higher level what's going on behind the code.
So I would suggest looking at the tutorials on this page; these are explanations of how to create an anaglyph image manually in an image editing program:
http://graphicssoft.about.com/od/3danaglyphs/Making_3D_Anaglyphs.htm
First try doing the tutorial in Photoshop or GIMP or whatever to make sure the resulting image is what you want, and then try to implement that technique programmatically.
