XR teleportation problems

Hi @RaananW,

I followed your advice and tried XR and I had found several difficulties. In terms of making work an example, the documentation may not be very straightforward. So first, the const xr = scene.createDefaultXRExperienceAsync(); is not really always working and in the documentation, it is not very clear how to add the teletransportation.

I did a step by step try, so you can reproduce it at your side (I spent several hours on this so I hope is clear and you can reproduce it). I used the XR example and I mix it with the example. I took the first and add the following code:

var groundMaterial = new BABYLON.StandardMaterial(“ground”, scene);
groundMaterial.diffuseTexture = new BABYLON.Texture(‘https://i.imgur.com/NyIF3yu.png’, scene);
var createScene = async function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.FreeCamera(“camera1”, new BABYLON.Vector3(0, 5, -10), scene);
// This targets the camera to scene origin
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight(“light”, new BABYLON.Vector3(0, 1, 0), scene);
// Default intensity is 1. Let’s dim the light a small amount
light.intensity = 0.7;
// Our built-in ‘sphere’ shape.
var sphere = BABYLON.MeshBuilder.CreateSphere(“sphere”, {diameter: 2, segments: 32}, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 1;
var groundMaterial = new BABYLON.StandardMaterial(“ground”, scene);
groundMaterial.diffuseTexture = new BABYLON.Texture(‘https://i.imgur.com/NyIF3yu.png’, scene);
var img = new Image();
img.onload = function() {
var heightMapSegments = this.width;
ground = BABYLON.Mesh.CreateGroundFromHeightMap(
“ground”, ‘https://i.imgur.com/Nu3WPxV.png’, 2816, 2816, heightMapSegments, 0, 100, scene, false);
ground.material = groundMaterial;
camera.position.set(0, 400, 0);
img.src = ‘https://i.imgur.com/Nu3WPxV.png’;
//const environment = scene.createDefaultEnvironment();
// XR
const xrHelper = await scene.createDefaultXRExperienceAsync({
floorMeshes: [ground]
// (re)enable:
return scene;

Before saving I Run, so the ground is loaded and the camera is placed in the set position.
I saved the scene example here. But it is not loading. It takes a lot of time loading at least.

Then I added the telestrasportation lines at line 49 I found in the documentation and it never worked the example, It got stuck.


let me know If you have a different result.

Ground is not defined when you initialize xr.

Either create the xr helper after the ground was created, or add the ground at a separate time. Setting the ground to be a global variable does not mean it will be used when it is initialized.

Dear @RaananW,

So I create a simpler example where I think all is well-programmed but is still not working as much the Web VR is.

Linux Ubuntu 16.04 + dev Machine
Firefox 74.0 (64-bit): not supported
Chrome 80.0.3987.149 (Official Build) (64-bit): Supported but no VR Button

Windows + Oculus Rift
Firefox 74.0 (64-bit): not supported
Chrome 80.0.39871.149 official build : Supported but no VR button

Andriod Version 9 + GearVR+ Samsung Note 8
Oculus browser - chromium 79.0.3945126 : not supported
Chrome 80.0.3987.149 : Supported and finally the VR button, although the performance was very poor.

On the other side with Babylon webVR all of them are working.
How can I help or do to make webXR work in those devices?



The WebXR polyfill (as mentioned before) will help you get all WebXR scenes working wherever WebVR is supported.

As I am constantly using windows (and oculus), and the oculus browser, i find it interesting that you don’t see the button. Note also that using WebVR on chrome is impossible - WebVR was removed in chrome 79. What you are using is the vr experience helper, which “falls back” to XR (more like an upgrade). So the poor experience will be the same poor experience when using WebVR (as there is no WebVR, and no spoon).

Try going to chrome://flags on the oculus browser and enable webxr. that might be the issue there. Apart from that - firefox doesn’t support webxr yet, but does support it if you use the polyfill.

1 Like


Did you tried this experience with your Oculus (which one?). The flags are of webXR are enable. Any Idea why is not the VR Button appearing on my Chrome? because clearly it is supported, but not working.

So I tried the polyfill, so what I did was to download this project I sent you. I added to the index.html in the tag:

<script src='https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js'></script>
  window.polyfill = new WebXRPolyfill();

So then in firefox I got the alert supported, but then I got the following error:

TypeError: scene.render is not a function
TypeError: scene.render is not a function192.168.1.77:8081:200:23
    _renderFrame https://preview.babylonjs.com/babylon.js:16
    _renderLoop https://preview.babylonjs.com/babylon.js:16
    <anonymous> self-hosted:876

This is a different issue, which you need to debug yourself, as I don’t have the scene with the polyfill together.

If the button is not shown, there must be either an exception thrown, or an error. The button is a simple html element, there is no reason for it to not show.

Now, about your code -

Here is a cleaner version of it - https://playground.babylonjs.com/#YB006J#187

Checking for XR support using the baseExperience is wrong, as an exception will be thrown before this happens. Also, there is no reason to attach the teleportation,as it is already automatically attached.

I checked the playground i sent you using the xr emulator on chrome, and it all works great, including teleportation.

Please check your console for errors and try debugging it. About firefox and the polyfill - did you download the playground and try hosting it? you will need to add the ‘async’ tag yourself, if i remember correctly, otherwise it will not work correctly.

You mean arr to the tag the property async or to the var createScene = async function(){}?

Yes, I’m hosting in a Linux machine and I try it in a windows machine and a GearVR.

So far we have:

  1. The correct code you publish here
  2. The self-hosted the same code with polyfill.

Both are working with the emulator (I can’t manage to teletransport) in windows 10 in chrome and Firefox even the camera positioning when Entering to VR. Do you mind to explain to me how do you tested the teleportation?

In the GearVR I got very different results and both of them not working well (very hard to explain). in scenario 1) I can have the stereo image in both eyes and teletransport, however, the image we get is like every time an image is shown it stays like a buffer problem.

In scenario 2) there the stereo image that is only appearing in the first half of the screen, so your right eye has no image and the left eye sees a stereo image of the scenario. In this case, the Teletransportation is not working even if we can see that the controller is tracked.

What is weird for me is that Babylon webVR works fine in the GearVR (but the camera positioning).

You can read about teleportation here - WebXR Selected Features - Babylon.js Documentation . Technically, holding the click while pointing at the floor will work in the emulator.

About gearvr - sounds like either xr is not correctly initialized or that an exception was thrown (in the 2nd scenario). It is hard to answer, but I will run a few tests.

And again, if webvr is working and enough for you, use webvr. I just simply asked why you didn’t pick webxr.

i can confirm the gearvr oculus browser issue, will see what I can do about it

1 Like

I couldn’t make the teletransportation work with the XR emulator, however I was able to see it working (with the described problems) in the Gear VR. Thanks about the Confirmation, let me know how I can help you, by testing or something else. (Also the behavior is different between polyfill and not using Oculus Browser).

You just need to keep the trigger on while pointing at the floor. It works :slight_smile:

The GearVR issue was resolved, PR is waiting to be merged - so the code is not yet in the playground.

1 Like

I confirm that now it is working in the GearVR, I can start where I want and Teletransportate.
I fill so dummy but I tried to teleport using the webXR emulator in Linux and Windows 10 Chrome and Firefox and there is no teletransportation. What am I doing wrong or not activating? :see_no_evil: :see_no_evil: :see_no_evil: