1

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?

pimvdb
  • 151,816
  • 78
  • 307
  • 352

2 Answers2

2

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.

jhocking
  • 5,527
  • 1
  • 24
  • 38
0

With a 3D image you first have to consider: what image do you want the left eye to see, and what image do you want the right eye to see? Then you can use some technique to combine the images into a 3D image.

For red/cyan glasses combining the images isn't as simple as it seems; for example red plastic actually lets a bit of green light through. Fortunately, the problem of how best to create 3D red/cyan anaglyphs was considered by Eric Dubois, who developed an mathematically optimal technique for combining left/right image into a single red/cyan anaglyph.

Details on this algorithm was discussed in another question. You may also want to go to a working JavaScript demo that combines two images into a single anaglyph on a HTML5 canvas.

Community
  • 1
  • 1
gmatht
  • 835
  • 6
  • 14