I am trying to use BABYLON.JS to show 360 3D top/bottom equirectangular photos and videos. I can show 2D 360 media, and I can use the vrhelper, but I have been unable to use MODE_TOPBOTTOM or anything else to get the code to recognize the 3D nature of the media. Exactly how do I do it? Can you please provide examples of code showing a 3D 360 photo, and code for running a 3D 360 video. Thx!!!
Hey and welcome!
Does that help: How to do 360 Video - Babylon.js Documentation ?
Welcome qporit! Here’s an equirectangular photo-dome. Pretty! Here’s another.
The How to do 360 Video doc mentions
videoDome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;
but does not show an example of how to use it. I tried several ways, but I could not figure out how to use it correctly.
The first example from Wingnut seems to have identical left and right images, so it would not be 3D. “another” does not seem to have vr enabled. (But I’ll check them out later in an HMD.)
I’m looking for just a real simple example of a 3D equirectangular video (and a photo) working.
Thanks.
Pinging @sebavan as he had some examples if I remember correctly
The mode is just a convenient way of specifying where how the eyes are store in the video. I unfortunately do not have examples to share as the videos I worked with were private. Maybe if you have your video, I can try to make it work in a PG ?
Here is my code, with a local video file. The local video file is top/bottom equirectangular. Perhaps you can point to where my code is WAY wrong. If the MODE_TOPBOTTOM line is commented out, the video runs – but as 2D. With the line, it distorts the file completely, If you have a sample, just substitute the name of my file with yours and I can try it without seeing your file at all.
Thanks for the help!!!
Blockquote
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>vid 3D 360 test</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>
<canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP
<script>
var canvas = document.getElementById("renderCanvas"); // Get the canvas element
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
/******* Add the create scene function ******/
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var scene = new BABYLON.Scene(engine);
var vrHelper = scene.createDefaultVRExperience();
var videoDome = new BABYLON.VideoDome(
"videoDome",
["vid1.mp4"],
{
resolution: 32,
clickToPlay: true
},
scene
);
// ONE OF MY TRIES TO IMPLEMENT 3D *******************************************
// WHERE SHOULD THIS *** MODE_TOPBOTTOM *** GO?
// IS SOME OTHER LINE OF CODE NEEDED SOMEPLACE?
// IF THIS LINE IS COMMENTED OUT, THE VIDEO PLAYS AS 2D 360.
videoDome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;
return scene;
};
/******* End of the create scene function ******/
var scene = createScene(); //Call the createScene function
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
</script>
What do you mean by as 2D ?
You will only see 3D in a VR headset, not in the browser.
For instance: YouTube
Whether in a browser or HMD with the “VRbutton” clicked, you see the right and left eye images. 2D = monoscopic = the two images are identical, there is no parallax. 3D: on a desktop you can check that there is parallax, and in an HMD you can see the parallax (and can check it explicitly by comparing the relative position of front vs background images in the left eye vs right eye. I did actually do that both in an HMD and on the desktop.
So, with the MODE line commented out, I see my video as a 2D monoscopic video in an HMD. Left and right eyes are identical, and there is no parallax.
But there is no mistaking the distortion produced by using the MODE_TOPBOTTOM the way it is in the code above. (You can check, of course, by substituting your own local file for my local file – this code is pure HTML and can run locally.)
What is your source video made of ?
Is it having both eyes splitted or is it only a panoramic video ?
In any cases on the desktop, only one eye will be displayed. and the mouse controls will navigate in the view of one eye only.
Depending on your source, you can enable 3d in the HMD by configuring appropriately the mode.
My source video is a 3D 360 top bottom video (from the Vuze camera). It is 3840 x 3840 with left eye 3840 x 1920 on top of the similar right eye images.
With the code I displayed, and the MODE_… commented out, on the browser it shows one eye’s vision and the mouse controls will move it around. There will be a “VRbutton” in the lower right. Click that and you get a left and right image which are identical. Viewed in an HMD, it will be a monoscopic 360 panoramic image.
I want the left and right eye images to correspond to the left and right eye images captured by the Vuze 3D 360 camera. I tried to get Babylon.js to interpret the video correctly as a 3D panoramic video in an HMD. But my attempts to use MODE_… to do that produced only a distorted video. I am obviously not using that command correctly, and I am trying to figure out how to correctly display a 3D 360 video in an HMD.
I do not understand or know how to configure the mode appropriately. That is what I am trying to determine.
Thx!
Addding @trevordev to double check on WebVR ? but it should all be ok with your setup with distortion. Could you share your video ?
The best way to help you would be to get a repro in the PG so we can see how you set it up
Yep, can you share the video. I think I know what you are talking about where each eye needs to see a different dome to get a 3D effect. I’m not sure if this is built in but I think someone on the forum got something like this working in the past.
According to How to do 360 Video - Babylon.js Documentation
" Video Types
Several types of 360 video exist today. The most common being Monoscopic Panoramic, Stereoscopic Side by Side panoramic and Top bottom panoramic.
The first one represents a panoramic view which is dedicated to one eye. The second one contains two panoramic views dedicated to each eyes whereas the last one contains both panoramic views respectively on the top and bottom of the video.
In the video Dome you can change adapt to the type of your source video by using :
videoDome.videoMode = BABYLON.VideoDome.MODE_MONOSCOPIC;
// or
videoDome.videoMode = BABYLON.VideoDome.MODE_SIDEBYSIDE;
// or
videoDome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;
"
My photos and videos are equirectangular 3D top/bottom. I have been trying to use videoDome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM (and the corresponding code for photos) But I have not been able to get it to work. I think I am just not using the line of code correctly. (See my code sample above.)
I will try to make a sample available with a video and photo file this afternoon or tomorrow (possibly on github, PG, or a (shared with you) private URL on my website).
Thanks.
I have my version of the code posted above, so it can be tested with any 3D equirectangular video substituted for “vid1.mp4” – or just looking at the code it may be obvious what the error is.
Thx.
Hey I think I found the issue. Somehow both the left and right cameras reported themselves as being the right camera. This playground should work after my fix. Currently it is showing both eyes the same picture.
When I try to run this with or without an HMD, it says “loading assets… please wait” . I waited. It never ran.
Sorry, yea I was loading a video from a local server, you will need to point to the location of your videos url