I just threw together a proof-of-concept for generating stereoscopic images using the Canvas tag in HTML 5. This should work in Chrome 4.0, Firefox 3.5, Safari 4.0, and Opera 10.10. However, more significantly, it works on the Android 2.0 browser. The two images it uses are a little large for shifting your focus for a regular monitor (though it is possible as I have done it), but actually not too bad on the Motorola Droid with its more densely packed pixels. If you're having trouble, try using your browser's page zoom setting to zoom out; the display areas are optimized for the Droid. Anyway, just thought you folks would be interested in seeing something like this. It's not doing any 3D math, just doing a simple X-axis translation proportional to the Z-axis. That's enough to start. Unfortunately, animating this on the Droid is still pretty slow, and it's only 8 rectangle draws, so I doubt an action game could be made out of this. Puzzle games would be neat, though.

I think the cross eye technique is simpler, than focusing behind the screen.
If it is a cross eye image, than I misunderstood something.

Quote: Original post by szecs
I think the cross eye technique is simpler, than focusing behind the screen.
If it is a cross eye image, than I misunderstood something.

While the cross-eye technique is easier for most people to do as compared to the parallel technique, it causes a lot more eye strain. Also, at least for me, it takes the image out of focus, whereas focusing behind the screen keeps everything in focus.


Just changed the file for a much more dynamic example, balls bouncing around the screen. Also, should work in IE now.

You can (or, well, I can) retain focus when using the cross-eyed technique.

I wonder if you could use the canvas to generate row-interleaved stereoscopic images, or if it would be too slow for that. YouTube's 3D video player chews up all of my CPU time when you use its row-interleaved mode!

I suppose in an ideal world you'd have a single element that understood 3D and let the user pick how it was displayed. For the time being, that's a nice demo – I look forwards to seeing where you take it! [smile]

Quote: Original post by benryves
You can (or, well, I can) retain focus when using the cross-eyed technique.

I wonder if you could use the canvas to generate row-interleaved stereoscopic images, or if it would be too slow for that. YouTube's 3D video player chews up all of my CPU time when you use its row-interleaved mode!

I suppose in an ideal world you'd have a single element that understood 3D and let the user pick how it was displayed. For the time being, that's a nice demo – I look forwards to seeing where you take it! [smile]

Yeah, I think the ideal situation would be to have a 3D analog of the Canvas element. That's the only way you're going to get enough performance to be useful.

So far, it seems the Droid's bottleneck is actually the setTimeout function. In bumping up some of the math involved and increasing the number of drawn objects by about 4, I didn't see any noticeable slowdown in the animation, which means that the draw ops are pretty quick, it's the setTimeout call that is slow. I'm trying to see if setInterval is any better, but I can't get anything to my phone right now. Cripes!

ed: had to do the whole "change file extension and email as attachment" thing. setInterval didn't go any faster than setTimeout, and 10 balls wasn't any slower than 5 balls, so the bottleneck is either the timer or the four fillRect calls to "clear" the background.

So I made a holder for my phone to make it a full stereoscope. I'm going to scrap the HTML5 stuff and do some OpenGL in AndroidSDK.







works pretty well.

Cool! I had no idea that they had added a canvas tag. That's gonna come in handy!

Woah! That's pretty neat. I think my eyes got stuck crossed for a while once I saw the result, like they didn't want to let go of it.

Also, I could totally see people using those viewers in public, and everyone else thinking they were perverted weirdos for it. Hah.

it works but you dont really provide enough visual data for the effect to be really effective. I only notice it when two balls are actually crossing each other. Think of adding shadows in, some bg elements the balls can go in front / behind of, more 3D shapes than just 2D "discs" in space etc.

Nice work. [smile] A small mirror may make focusing on the 3D image easier if you use this technique (not that this appears to be a problem for you).