Creating anaglyph 3D image on HTML5 canvas

Question

I'm creating a simple 3D engine using the HTML5 canvas object. It is working well but I'd like to implement red/blue anaglyph processing, so that one could really see 3D using red/blue glasses. At the moment I have the 3D object rendered twice, the second time from a camera position just next to the first camera position.

The problem I'm facing is how to combine the two objects rendered to have the correct color for an anaglyph. Now I'm using globalAlpha=0.5 and rendering the first in red and the second in blue. This is however not completely working, as pixels only affected by the red object should stay red, but they are becoming the color between black and red as my background color is black.

When taking a look at a 3D anaglyph creating application, I noticed that red and blue pixel together are calculated as following:

 255  0  0
 0    0  255
------------- +
 255  0  255

The HTML5 canvas is however calculating all pixels using alpha, so if the background color is black a red pixel becomes dark-red while it should stay red. Basically I need the pixels of the red object only affect the red component of each pixel, and the pixels of the blue object affect only the blue component of each pixel.

I could be working on a per-pixel basis but would this be possible and not performance-breaking? I'm rendering 20 frames a second so I guess it would not be of any practical use. Any suggestions would be appreciated.

I hope this image clarifies the whole:

Answer 1

There is a globalCompositeOperation property of the canvas context that you can change to affect this behavior. Specifically, setting it to 'lighter' will add the colours of any drawing operations to the source image. This will also respect the alpha value. If it is a complex scene, you may have to draw the scene twice, each to a hidden canvas, then copy them each into the visible canvas with the composite operation set to 'lighter'.