Showing 3D 360 photos and videos

[qporit]

I think it works, but I have to do more testing.

I was able to put the photodome up on the web. Doing a video is a little harder, since the server can host a jpg, but video has to be remote from the server. Maybe tomorrow.

I think the photoDome

photoDome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;

may have the same issue as the videodome:

https://www.qporitxr.com/bab

The photo is top/bottom stereoscopic, but looking at it in an HMD it is mono; there is no parallax.

    /******* Add the create scene function ******/

var createScene = function () {

var scene = new BABYLON.Scene(engine);
var vrHelper = scene.createDefaultVRExperience();

var dome = new BABYLON.PhotoDome(
“testdome”,
“Park_scene_01.jpg”,
{
resolution: 32,
size: 1000
},
scene
);

dome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;
return scene;

};
/******* End of the create scene function ******/

Thanks for the help!

[trevordev]

Yea, I havn’t made my change yet.

You can work around the issue for now with
https://playground.babylonjs.com/#VTFGED#1

[qporit]

The code gives an error message “cannot set property “isRightCamera” of undefined”. From my tests I suspect there is some problem with whether exp is created successfully. I’m also not sure about semicolons, but I do not think that is causing the error message.

[trevordev]

I’ll get a PR today which will fix this.

Fix is part of this pr webXR helpers to get webVR parity by TrevorDev · Pull Request #6568 · BabylonJS/Babylon.js · GitHub

[qporit]

3D 360 VR photo with BABYLON.PhotoDome.MODE_TOPBOTTOM worked(!) in Oculus GO with the Oculus Browser.

www.qporitxr.com/bab

I think video is also working. More testing coming…

Thanks!

Eric

[qporit]

The video is working in 3D 360 VR in the Oculus GO. I can start the video by clicking before going into VR mode, and I can start the video by linking to the video page from an external site (which also starts the video before going into VR mode). However if I go to VR mode without starting the video first, the controller does not work.

How do I get the controller to work in VR mode? I used the code:

var createScene = function () {

var scene = new BABYLON.Scene(engine);
var vrHelper = scene.createDefaultVRExperience();

 var camera2 = vrHelper.currentVRCamera;
 camera2.attachControl(canvas, true);

 scene.onPointerDown = function () {
 scene.onPointerDown = undefined
 camera2.attachControl(canvas, true);

}
var dome = new BABYLON.VideoDome(
“testdome”,
[“video.mp4”],
{
resolution: 32,
clickToPlay: true,
autoPlay: true
},
scene
);
dome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;

 return scene;

};
/******* End of the create scene function ******/

You can view the scene at

https://www.qporitxr.com/vid4.html

or link to the scene page with

https://www.qporitxr.com/play.html

Also, is it possible to start the scene in VR mode?

Also, is 32 the optimal or maximal value for resolution of the videodome, or can it go higher?

Thx!

[trevordev]

Do controllers work in this pg: https://playground.babylonjs.com/#TAFSN0#2
Starting in VR is not supported by browsers
Resolution is just the segments of the sphere of the photo dome (second parameter of Mesh.CreateSphere)

[qporit]

Based on the software in the playground, this now seems to work. I do not completely understand everything. When I change lines around slightly, I start with a black screen, or the starting position changes strangely.

I tried changing the resolution parameter from 32 to 128 and it runs, but I cannot perceive any difference in the video on the videodome.

Thanks again for the help! I’m building a webXR site, and I plan to host many VR photos and videos. And text. Right now, I’m leaning toward Babylon.js, rather than AFrame, React360, or other possible development platforms. Any thoughts on why Babylon is a good choice, or where pitfalls may lie?

LINK FROM:
www.qporitxr.com/bab/

OR GO DIRECTLY TO:
www.qporitxr.com.bab/vid7.html

CURRENT CODE:

/******* START: the create scene function ******/

var createScene = function () {

var scene = new BABYLON.Scene(engine);
//var vrHelper = scene.createDefaultVRExperience();

var camera = new BABYLON.ArcRotateCamera
                ("camera", -Math.PI / 2, Math.PI / 4, 3, 
                new BABYLON.Vector3(0, 3, 0), scene
                );
var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false}); 

camera.attachControl(canvas, true);
scene.activeCamera.beta += 0.8;

var dome = new BABYLON.VideoDome(
    "testdome",
    ["https://video.mp4],
    {
        resolution: 32,
        clickToPlay: true,
    autoPlay: true
    },
    scene
);
dome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;

vrHelper.enableInteractions();

return scene;
};
/******* End of the create scene function ******/

[trevordev]

Very cool site idea I’ve also been interested in this space (See this & this)

I like babylon because it does a lot more out of the box (Physics, gui, etc) for you so it might be faster to build some things, it also has a more stable api which is why some larger companies choose to use it (eg. Sony or Adobe) and this forum is usually a fast way to get answers if you get stuck.

Some pitfalls I’d watch out are:

• the webVR helper does a lot of things automatically for you but this might not be ideal for all headsets/scenarios, eg. some models loaded can be complex, picking in the scene happens a lot which can be slow for very complex scenes so you might want to disable some things like interactions and implement them manually so you know exactly what is going on
• webXR and webVR are different APIs and browser implementations and spec for webXR are not fully completed yet so you might want to plan to move to webXR eventually. Use WebXR (WebVR, WebAR, Magic Window, Etc.) - Babylon.js Documentation

Also I see your site currently uses Three, can you share why you want to move away from it?

[qporit]

My reasons for thinking about Babylon are, first of all, the ones you mention. It seems more stable, the forum (and you!) responded quickly and helpfully, it seems like it does a lot, and it seems straightforward, with good support (though not terrific documentation).

I built a demo showing VR video running in a webVR site using AFrame. Aframe has its own style, and one must go beyond that to three.js (& more, sometimes). In particular, it was hard to get VR video to work. It required an external component, and some fixes to that component and its documentation to make VR video work. The upgrade to v. 9 then broke the code. (External components do not upgrade automatically).

I tried react360, but it did not display VR video well, required node.js all the time, and it seemed too much trouble to go that route.

I’ll be writing games, displaying text and graphics, using text-to-speech (hopefully), and showing framed and 180 and 360, 2D and 3D, photos and videos. The simpler, more powerful, better documented, better supported, less buggy, and more stable the code is, the less time I’ll spend programming, and the more time I’ll spend creating. So I’m hoping some investment in Babylon will prove a good choice.

I’m the organizer of NYXR - the New York eXtended Reality Meetup, so I’m very interested in XR, in which I include not just xR (xR = AR + MR + VR), but also all the other technologies enabled by the exponential explosion of digital technology, such as AI, 5G, wearables, IoT, and derivative technologies like robotics, autonomous vehicles, and cryptocurrencies PLUS the content it enables: good, like VR games, and bad, like deep fakes, and surveillance. However, in terms of xR programming and content, I’m mostly working on VR right now, and waiting for AR and MR to evolve. I was an early adopter of the HoloLens, but my tests convinced me that MR still needed time and deeper resources than mine to create the infrastructure to create anything interesting.

Thanks for your help and comments!

–Eric

[Deltakosh]

@qporit

Thanks for your help and comments!

Thanks a lot for your feedback as well

[Deltakosh]

@qporit

So I’m hoping some investment in Babylon will prove a good choice

It will