webgl_effects_stereo demo has no stereo effect

[NeatNit]

Description

Just found this project, it's amazing. Browsing through the examples, I think there's something wrong with this one:
https://threejs.org/examples/#webgl_effects_stereo

Here's a screenshot from it:

There is no stereoscopic effect between the two sides of the screen! I crossed my eyes hoping to be wowed but got nothing... And then I compared the two images in an image editor and saw that they are identical.

(Multiple fields)

No response

Version

threejs.org

Device

Desktop

Browser

Firefox

OS

Linux

[Mugen87]

The projection matrices for the left and right eye are different and computed based on the eye separation parameter. Have you tried using something like Google Cardboard to view the effect?

[NeatNit]

No, I expected it to work with the cross-eyed method: https://www.kula3d.com/how-to-use-the-cross-eyed-method

Basically the left-eye image goes on the right and the right-eye image goes on the left. It's a fairly common way to view/show 3D images and videos with just a normal screen.

[Mugen87]

Cross your eyes. A third image should appear in the middle.

I went on this website but it seems I do something wrong because a) I don't see the third image and b) my eyes are start to hurt and I get fuzzy😅.

I've tested with webgl_effects_stereo a bit and setting a different eye separation in the example via effect.setEyeSeparation() produces the expected result.

[mrdoob]

@NeatNit

Does this one work?
https://raw.githack.com/mrdoob/three.js/effects-stereo/examples/webgl_effects_stereo.html

[NeatNit]

@NeatNit

Does this one work? https://raw.githack.com/mrdoob/three.js/effects-stereo/examples/webgl_effects_stereo.html

Almost, but the sides need to be swapped. By setting effect.setEyeSeparation( -100 ); instead of 100 using a breakpoint, I get the desired effect!

I went on this website but it seems I do something wrong because a) I don't see the third image and b) my eyes are start to hurt and I get fuzzy😅.

Yes, it's an acquired skill and takes some practice. Its biggest advantage is that it requires no special hardware: any screen can display the image and the user can see it in 3D by simply crossing their eyes, once they've got the hang of it. It works equally well for still images and for video.

You could argue it's niche, but there's plenty of resources and communities online about it. Easiest example: https://www.reddit.com/r/CrossView/

I'm not sure that website I linked is the best resource, it's just the first one I could find when writing the issue. If you're genuinely interested, you might want to look up better teaching resources. Edit: some good tutorials linked here: https://www.reddit.com/r/CrossView/wiki/index/

But most importantly, once you have any kind of 3D output working, it's trivial to implement cross-view by just placing it on the screen correctly, so giving users like me that option is a good thing!

[Mugen87]

Almost, but the sides need to be swapped. By setting effect.setEyeSeparation( -100 ); instead of 100 using a breakpoint, I get the desired effect!

Maybe the projection matrices for the right and left eye need to be switched?

[NeatNit]

Maybe the projection matrices for the right and left eye need to be switched?

No, it's probably correct, but for cross-view the left image should be rendered to the right half of the screen and vice versa. This is because when crossing your eyes, each eye is pointed at the opposite side of the screen.

So it's probably a matter of swapping the output rectangles on the screen.

[Mugen87]

The demo is intended for smartphone stereo though so it's probably better to keep it as it is.