I am trying to see the three.js stereo effect in my headset (Meta Quest 3). I am running the official three.js example Stereo Effect
I am connected using Virtual Desktop and when I use Full SBS, what I see is exactly like looking at a flat screen. Seems like the 2 scenes are rendering the exact same image.
When I look at the code I do not see different cameras used for each eye. Am I missing something?
I think you need to run the examples through the Quest browser, not through virtual desktop. Try this sample for instance: three.js xr - ball shooter
It’s not that you’re missing anything, its most likely virtual desktop not understanding the media.
Also, the times that I have tried streaming media or 3d from desktop to my quest… it actually introduces enough latency that I get uncomfortable, whereas running them in the browser can work really well.
Yes, you are correct regarding meta quest browser. I have already tried all the examples (including ball shooter) using meta browser and they all work exactly as expected. Meta browser is certainly used for all VR / WebXR projects.
My main issue is that I am not getting the expected 3D effect from Stereo Effect . It really is a Side-By-Side images from slightly different angles. Not a WebXR project. I have 3D movies that are the same. For these we don’t need meta browser. As long as left eye sees the left image and right eye sees the right image.
I have used it to watch 3D movies using Virtual desktop. It provides a 3D effect (not a VR effect). When I do this with three.js Stereo effect (running it inside a web browser which covers the whole screen), Virtual Desktop can easily send the left image to left eye and right image to right eye. But, I am seeing the final image being flat as if both images are rendered from the same camera/angle.
I was wondering if I am doing something wrong, or the code might have a bug. Because I do not see anywhere in its code two cameras with different angles producing the images.
I think I understand what you mean. I looked at it with my eyes crossed, and didn’t see obvious 3d separation. However in the debugger I do see it offsetting the 2 cameras by the pupillary distance… so my guess is that the separation just isn’t enough to make the spheres appear in 3d, but rather just enough to push the viewplane back away from the window a bit. You could try increasing the eye separation… with stereoeffect.setEyeSeparation(…) … It may be that the effect was designed for older devices that had different eye separation parameters or something. The code does the 2 image rendering setup in the stereoeffect.js but the actual camera handling happens inside threejs in the StereoCamera update method.
Compared left and right images – they are practically identical. Here is the difference:
As @manthrax suggested, try with higher eye separation (the objects are too far and maybe the eye separation default value is not sufficient to create any stereopsis)
As a test case, do you see 3Dness in this:
for parallel eyes:
https://boytchev.github.io/CourseVAX/LecturesBG/08/E0810-Many-parallax-objects.html
for crossed eyes:
https://boytchev.github.io/CourseVAX/LecturesBG/08/E0811-Many-crossed-parallax-objects.html
1 Like
@PavelBoytchev I tried the two links.
For parallel eyes (E0810): It does create the 3D effect I expected.
For crossed eyes (E0811): It just creates a weird image distortion.
I also tried changing eyeSep value. It only makes the spheres lose their shapes. It does not provide any 3D effect.
It looks like the stereo effect code needs to be reviewed by one of the three.js team contributors.
That sample is 13 years old. It was originally called “webgl_effects_crosseyed.html”
It’s an interesting time-capsule, but I don’t really see how it could be updated into something more useful, except by increasing the separation, but I think the original point of it was to show off cubemap refraction. It’s not intended to be used with VR/XR. It’s more of an optical illusion.
But there are other XR samples that show SBS video iirc?
https://threejs.org/examples/#webxr_vr_video
And the regular XR library handles actual VR rendering so… not really sure that anything needs to be done in this case.
I hope that three.js team either fix Stereo Effect code or remove it from their example library.
Meh… I think its worth keeping as a historical reference.
It still works.
If you want to see some other works by the original author, prepare to be amazed:
https://alteredqualia.com/ (These were made over a decade ago and are still some of the most amazing demos on the web imo.)
The Stero Effect example works pretty good for the old google cardboard.
1 Like
I dusted off my google cardboard and loaded it on my smartphone. I did not see any 3D effect. It just looks like looking at a flat screen but really close to the eyes.
As @PavelBoytchev indicated, the two images are very identical to each other, therefore no 3D effect.
In any case, I do appreciate everyone’s input. It is great to have such caring community.
Here is a fork of the official Stereo Effect example that allows changing the eye separation using a GUI. Give it a try.
Example : three.js webgl - effects - stereo
Source : SBEDIT : Online Code Editor
Thank you @seanwasere
Earlier I tried to change the eye separation without success. Looking at your code, I realized my mistake. This was very valuable to me.
1 Like