You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Tuesday, July 3rd 2018, 2:34pm

WebVR with 2 panos on 2 different divs

Hi,


I'm trying to merge 2 visits without too much fuss. My plan was to put 2 divs in an html and an embedpano for each, and play on visibility between both with the z-index.

<body>
<script src="krpano.js"></script>
<div id="pano1" style="position:absolute;width:100%;height:100%;z-index:2;">
<script> embedpano({xml:"krpano_vr.xml", target:"pano1", id:"pano1Object"});</script>
</div>
<div id="pano2" style="position:absolute;width:100%;height:100%;z-index:1;">
<script> embedpano({xml:"krpano_vr.xml", target:"pano2", id:"pano2Object"});</script>
</div>
</body>


Perfect until I tried webVR on Chrome (no headset connected, just "cardboard webVR"): if I clicked VR on pano1, then pano2 was not going in VR mode automatically. I synchronized both panos by calling pano2Object.call("webvr.entervr"); each time pano1 was going VR. However, when I did this, neither Fullscreen nor webVR were working anymore.

Seems like only one div can go webVR or FullScreen. So I then created a parent "container" div and a specific js RequestFullScreen("container") function that says fullscreen should apply to the container div instead of the pano1Object one.

<body>
<script src="krpano.js"></script>
<div id="container">
<div id="pano1" style="position:absolute;width:100%;height:100%;z-index:2;">

<script> embedpano({xml:"krpano_vr.xml", target:"pano1", id:"pano1Object"});</script>
</div>
<div id="pano2" style="position:absolute;width:100%;height:100%;z-index:1;">
<script> embedpano({xml:"krpano_vr.xml", target:"pano2", id:"pano2Object"});</script>
</div>
</div>
</body>


It worked well on Chrome and Firefox, webVR is now synchronized on the two divs: if I go VR on one, then the other one goes VR too. But it's not working on Edge (no idea for Safari) and as a consequence it does not work on my Windows Mixed Reality Headset. I'm guessing it's a miracle that it works on Chrome and Firefox.

I'm kind of stuck for my Windows MR Headset at least. I have another idea but need help to know howto:

webvr.entervr() is assuming I want VR on the pano1Object div only, but as I coded a RequestFullScreen("container"), is there a way I can code a webvr.entervr("container")?

Thanks in advance





2

Sunday, July 8th 2018, 3:29pm

Hi,

WebVR doesn't work that way!

There can be not 'two divs', WebVR requires ONE WebGL canvas element and several 'setup' code for the movement tracking and the rendering.

That means only one viewer instance can use WebVR at one time.

Btw - why that strange setup with two divs?

Best regards,
Klaus

3

Tuesday, July 24th 2018, 6:34pm

Sorry for delay in the answer.

I want to have a carousel of tours. Like https://krpano.com/krpanocloud/webvr/?v=119pr15, but with different configs on each tour (different vtourskin.xml, different vtourskin.png, different versions of krpano...)


The way you do it on your side is with loadpanoscene/loadscene/loadpano/... but they seem to miss arguments (compared to embedpano at least, for instance the missing initvars argument). Plus they leave the keep="true" hotspots visible, or the state of globals. And I'm not sure I can reset the FIRSTXML variable, on which I rely heavily in my tours to find my images and secondary plugins.

From what you say, I have to use loadpanoscene/loadscene/loadpano/...
It means I also have to add what's missing compared to embedpano:
- reinit FIRSTXML and global variables
- try not to use initvars
- remove keep=true hotspots
- reinit the bottom navigation layer (my tours have different vtourskin.png / vtourskin.xml)


Maybe you have some set of actions to do that already?

That's why I wanted to try several divs/canvases... much easier *tongue*


Florian