Stereoscopic side by side video

Questions
1

I have a sidebyside video of an interview I did. If played correctly it should display in 3D.

(View it for example at “https://www.youtube.com/watch?
v=zG-FuKFi5A4” on YOUTUBE VR with a VR headset.)

The playground example https://playground.babylonjs.com/#ZMCFYA#83 demonstrates how to play a video. If I substitute for the video source in the line:

var ANote0VideoVidTex = new BABYLON.VideoTexture(“vidtex”,“textures/babylonjs.mp4”, scene);

my video:

“https://player.vimeo.com/external/514823763.hd.mp4?s=7dc919cbc776300237ab0538c015c24032686ef5&profile_id=174”

it will display my sidebyside video in 2D, showing both left and right images next to each other.

How do I modify the code to show the video as 3D - stereoscopic?

(Of course I am embedding this section of the code in an XR enabled page, so that it can be viewed in an HMD in 3D. I’m using QUEST.)
Thanks.

Eric

2

Adding @RaananW

3

The video dome will do the trick here - 360 Video Domes | Babylon.js Documentation

1 Like
4

My understanding is that video dome uses equirectangular 180 (half_dome) or 360 videos. Is there a way to specify the video as NOT equirectangular?

My video here is a framed video. It is not equirectangular. It is just like 2 “ordinary videos” side by side (and compressed by half horizontally). The raw video is 1280 x 720. It should end up as 1280 x 720 for each eye; as a “normal video texture”, one for each eye, so that what each eye sees is stereoscopically different. The video will not surround the viewer like an equirectangular video dome, it will display on a rectangle, acting as the “movie on a screen” in the scene.

There are several commands for videotexture and video that looked promising, but I have not been able to apply them so that it worked, including

is3D, msIsStereo3D, and msStereo3DPackingMode();

I really need a code example that works with my sample video to know how to set videotexture to play a 3D stereoscopic “framed” non-equirectangular video. (Note: similar problem for 3D stereoscopic “framed” non-equirectangular photos.)

Thanks for your help!

Eric

5

I see!

You can define a different mesh to show the video on. an example would be a simple plane - documentation VideoDome | Babylon.js Playground (notice that I am hosting the video on my localhost, so you will need to fix this URL in order to see the actual result).

6

Thanks, RaananW!

This was a big help!

There are still some subtle issues.

  1. The result was flipped left and right – writing was mirror-image, as was stereoscopy, so I used scaling.x = -1;

  2. My original video was compressed and needed to be expanded to the right ratio, so I set the x:y ratio to 16:9.

  3. The “window” into the video was slanted – I’m not sure why – so I rotated the image 30 degrees around the y axis.

  4. In order to have the speaker in the video look directly at the viewer I tried to put the speaker’s eyes directly in front of a seated viewer (still working on that).

  5. I think the image (which should be a rectangle) is now slightly, but not seriously, distorted by being treated as a segment of a sphere (as if it was projected on to the surface of a sphere, as opposed to being treated as a flat surface viewed in front of the sphere).

Thanks again! (I can now go to the next step of importing lots of media!)

Eric