How to place the VR Camera in an initial position

Hi,
I’m new on BJS and I’m tryin to do my first webVR experience. I’m using the example to create a large ground with hight and my current problem is that the initial place of the experience is at the position (0,400,0), but the application is starting at (0,0,0), so the user can not move on the created ground.

I’m using an assetsManager and a vrHelper. I put at the assetsManager.onFinish = function(tasks) {} the camera positioning to begin the experience but none of the different options worked.

I was checking the different documentation and set up the 3 different cameras:

// Initial camera before the user enters VR
vrHelper.deviceOrientationCamera;
// WebVR camera used after the user enters VR
vrHelper.webVRCamera;
// One of the 2 cameras above depending on which one is in use
vrHelper.currentVRCamera;
Like this:
camera.devicePosition=new BABYLON.Vector3(100, ground.getHeightAtCoordinates(100, 100),100);
But the camera is always starting at the origin.

I’m really stuck here, if anyone has a piece of advice?

pinging the overlord of XR: @RaananW

Hey aburbanol,

Have you tried setting the camera.position property?

once you create the camera object, you can just set the property like:

camera.position = new BABYLON.Vector3(0, 400, 0);

I’ve taken your example and added an animation to the camera.position property:
https://playground.babylonjs.com/#JSVXVR#6

Hey,

Great to see new users experimenting with WebVR :slight_smile:

First, as @ReubenH suggested - the camera position is set using the .position vector. I would recommend setting it and not creating a new vector (like this - camera.position.set(0, 400, 0);) but this is a different subject altogether.
The devicePosition attribute is updated on each from from the vr device itself (and should actually be readonly, but it is javascript, and setting primitives to be readonly in this architecture is not that easy :slight_smile: )

But I have a broader question - I notice that a lot of people go straight to WebVR, but ignore WebXR. WebVR is already removed in google chrome AND chromium (objectively - the most used desktop and mobile browser(s)). WebXR is a much better, easy to use, and concise API for controlling VR devices.

Babylon’s support for WebXR is also much simpler to use, and honestly better documented (mind you, I wrote the WebVR documentation :slight_smile: ).

Have you seen the XR support? tried it? is there a reason you went straight to WebVR? I am honestly asking to know what we can do as a framework to move people to the new API and give up on the old one…

1 Like

Hey @RaananW,

Thanks for your answer, still not working for me. So 1) I’m not using WebXR because it is not working in the devices I’m planning to use, like GearVR with Note 8 or IPhone8, Motorola G6 plus with VR-lenses solutions. While the WebVR Helper works perfectly with my GearVR on a Samsung Note 8 and Firefox with Oculus Rift.

In the documentation research there is always first VR instead of XR, for example in the playground examples that are available, you will see VR and No XR so I started there because It is supposed to be the more recent examples.

If you help me, I will migrate to XR. I’m Creating a single VR world to reproduce 360° Videos.

I change the example adding the webXR support, but is not working in my devices:
https://playground.babylonjs.com/#JSVXVR#13
In the GearVR there is the button to VR, but when I go inside there are weird images and there is no VR experience.

So let’s make it work? maybe I open another thread?

Hey,

In general, I recommend using WebXR, as it is obviously the future. webvr was nice, but it’s slowly dying. It is true, however - device support for XR it not the best. There is a polyfill that you can use, which uses WebVR where XR is not available, so you can try this and move to XR (GitHub - immersive-web/webxr-polyfill: Use the WebXR Device API today, providing fallbacks to native WebVR 1.1 and Cardboard)

Having said that - if everything in WebVR is working as you expect (apart from the issue you started this conversation for), and it is enough for you, use it!

We’ll start with the WebVR position - want to share a demo of what you are trying to do? Are you setting the position AFTER going into VR, or before?

About WebXR and gear - not sure what weird images you are seeing, but I noticed your ground is HUGE (more than 2000 units). Notice that 1 unit in Babylon is 1 meter in WebXR (same as in WebVR). Which means your ground is 2.8Km long. You are probably somewhere in a “ripple” in the ground, but it is so high and you don’t notice it. try starting with a simple scene (many in the docs) and see if it works.

Hi @ReubenH,
Thanks for your answer, Yes it works in non-VR but I added the webVR helper and you can see that neither the camera initial position or your animation are working in VR support. Here is the playground modified examples:

  1. Camera position set and working non-VR scene
  2. Camera position set and working VR scene
  3. Camera position set and working XR scene

@RaananW. In the scene (2) I added the var vrHelper = scene.createDefaultVRExperience(); the WebVRFreeCamera and vrHelper.enableTeleportation({ floorMeshName: "ground" });. In the scene (3) I added the line const xr = scene.createDefaultXRExperienceAsync(); with the following results:

  1. Camera position and target working, no VR scenario.
  2. Camera position and target not working, VR button working and If I move the camera out of VR until I can see the surface, the VR experience works well.
  3. Camera position and target working but the VR button is not shown.

I also had several problems trying to make work the XR. I will open a new thread with that to allow the teletransportation works.

Hi @RaananW,

So coming to the basics and only tacking about the camera position:

  1. Example without WebVR starting at the set position.
  2. Example with WebVR and the camera not placed in the set position. (line 111 camera.position.set(1000, 400, 0);)

I’m Setting the position before going to VR, you will see in the 2nd example how it is starting under the ground.

You are creating both the vr experience (which creates cameras for you) and a webvr camera, which is unneeded. The active camera is not the camera you think it is (open the inspector and see), and the camera to which you set the position is not the camera you will use in VR.

Change the position right after entering VR, not before. Try doing it one frame after VR has initialized to check if it is really working. Should worl on the first frame, but just to be sure. And again, note that you are using an XR and not VR camera if you are using the experience helper on chrome.

@RaananW I used the ‘vrHelper.onEnteringVRObservable’, but the problem becomes that every time I was going in and out I lost my position and I was always going back. However, when you explain to me about the redundant camera I was creating, I realize that I had to use the helper camera, so I would say that the Solution to my questions is:

Solution:
At the moment you create use vrHelper it creates a camera and VRCamera that you have to manipulate with:
// Initial camera before the user enters VR
vrHelper.deviceOrientationCamera;
// WebVR camera used after the user enters VR
vrHelper.webVRCamera;
// One of the 2 cameras above depending on which one is in use
vrHelper.currentVRCamera;

The camera right way to set up a camera position is:

I leave this example of WebVR setting initial camera position:
https://playground.babylonjs.com/#YB006J#194