WebXR not Working

Questions
1

hi there,
i have a problem with a small selfmade web-application. Like in the tutorial explained, i added the following Code to my VueJS-App to enable the VR-mode:

var vrHelper = scene.createDefaultVRExperience({
        createDeviceOrientationCamera: true,
        useXR: true,
      });
vrHelper.enableTeleportation({
        floorMeshes: [this.environment.ground],
      });

this.environment refers to the environment data-variable and is set liek this:

this.environment = scene.createDefaultEnvironment({
        enableGroundShadow: true,
        groundYBias: 1,
      });
      this.environment.setMainColor(BABYLON.Color3.FromHexString("#74b9ff"));

In Chrome I can access the 3D-Scene trouble-free, but if i want to access VR-mode via Oculus Browser on the Oculus Quest 2, i can just see a 2D version of a single rendered Frame in a very bad quality inside a “normal”-sized canvas/window (cannot explane it). Here a visual Explanation: https://youtu.be/Es0y8L6gUlY

2

Adding @RaananW

3

Hi,

this is not WebXR, this is WebVR, which is deprecated.

Please refer to our documentation: WebXR | Babylon.js Documentation

1 Like
4

First of all: Thanks foor the quick reply! I will try that later!
But - for my knowledge - why are these code-lines still part of the tutorial and actually functional in the examples (either in Chrome or Oculus-Browser) but not in my custom code?

5

I had the same problem. I fixed it by adding an environment ground. You can look at the playground demo how to do this.

Tijmen

6

I can not directly see why your example does not work, but the solution is often simple just take the working demo, remove parts which you do not need. If the playground does not work any more you just removed the essential part. (you can also do it the other way, try adding the stuff of the demo to your own code, till it works)

7

Are they still part of the tutorial?

can you show me where so we can remove it?

8

That can be caused due to many factors. https would probably be my first guess (as webvr falls back to webxr, and webxr is only available over https when not in localhost). But it is hard to say. want to share a bit more?

But please - avoid using the WebVR experience helper and move to the webxr experience helper which does more in terms of compatibility. and is not deprecated :slight_smile:

1 Like
9

can you show me where so we can remove it?

Sure. The method is called in the following chapters:

  • Getting Started / Chapter 8: Going Virtual
  • Diving Deep / WebXR / Introduction(…) / Example 2 (line 28,29)
10

Well, I agree about the first page, but the second explicitly tells you to use WebXR :slight_smile: :

image
image1212Ă—512 24.3 KB

I will make sure we take the going virtual page out of the docs.

12

ah, sorry! I meant the WebVR Demo, which is attached on the right. :sweat_smile:

// Enable VR
var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false, useXR: true});
vrHelper.enableTeleportation({floorMeshes: [environment.ground]});

13

Will be removed

Thanks for the help! :slight_smile:

2 Likes
14

For setting up a basic VR experience with teleportation (and awesome controllers models! BTW), I usually just need these lines:

BJS_WebXR
BJS_WebXR901Ă—156 3.73 KB

As described here: https://doc.babylonjs.com/divingDeeper/webXR/introToWebXR

You can see an example here: Archviz VR

Hope it helps :wink:

2 Likes
15

yeah, tried it and in normal cases it would work, but in my case i’m not able to run the application locally via https because i dont know how to switch from http to https. Thats the main-problem for now.

16

you can use any http-server with a self-assigned signature.

I personally use http-server for self-hosted sites. there is a great answer here on how to do that - node.js - npm http-server with SSL - Stack Overflow

You can also use webpack and allow https on webpack’s dev server.

1 Like